thiscodeWorks - Organizing the best of code online

// bad
var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
    .attr('width', (radius + margin) * 2).append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);

// good
var leds = stage.selectAll('.led')
    .data(data)
  .enter().append('svg:svg')
    .classed('led', true)
    .attr('width', (radius + margin) * 2)
  .append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);

#javascript

make all input copy paste

document.querySelectorAll('input, textarea').forEach((el) => {
      // Remove inline oncopy and onpaste handlers
        console.log(el)
      el.oncopy = null;
      el.onpaste = null;

      // Or remove attribute values if needed
      el.removeAttribute('oncopy');
      el.removeAttribute('onpaste');
    });

#html #javascript

GOOGLE RANKING CHECKER

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kiểm tra Thứ hạng Google</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            margin-bottom: 20px;
        }
        .form-row {
            margin-bottom: 15px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"], textarea, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        .loading {
            display: none;
            margin: 20px 0;
            text-align: center;
        }
        .progress-container {
            width: 100%;
            background-color: #f1f1f1;
            border-radius: 4px;
            margin-top: 10px;
        }
        .progress-bar {
            width: 0%;
            height: 30px;
            background-color: #4CAF50;
            text-align: center;
            line-height: 30px;
            color: white;
            border-radius: 4px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .error {
            color: red;
            margin-top: 10px;
            display: none;
        }
        .success {
            color: green;
            margin-top: 10px;
            display: none;
        }
        .results-actions {
            display: none;
            justify-content: space-between;
            margin-top: 20px;
        }
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 200px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        .rank-good {
            background-color: #d4edda;
            color: #155724;
        }
        .rank-medium {
            background-color: #fff3cd;
            color: #856404;
        }
        .rank-bad {
            background-color: #f8d7da;
            color: #721c24;
        }
        .rank-none {
            background-color: #e2e3e5;
            color: #383d41;
        }
        .copy-btn {
            background-color: #007bff;
        }
        .copy-btn:hover {
            background-color: #0069d9;
        }
        .redirect-info {
            font-size: 12px;
            color: #666;
            margin-top: 3px;
        }
        .report-settings {
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 15px;
        }
        /* Pháo hoa CSS */
        .pyro {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 999;
            pointer-events: none;
            display: none;
        }
        .pyro > .before, .pyro > .after {
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
            animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
        }
        .pyro > .after {
            animation-delay: 1.25s, 1.25s, 1.25s;
            animation-duration: 1.25s, 1.25s, 6.25s;
        }
        @keyframes bang {
            to {
                box-shadow: -70px -115.67px #00ff73, -28px -99.67px #a6ff00, 58px -31.67px #0051ff, 13px -7.67px #00ffa2, -19px -33.67px #ff00d0, -37px -23.67px #ff8800, 19px -78.67px #ff002f, 56px -87.67px #00ffcc, -29px -45.67px #ff5e00, 1px -66.67px #ff1500, 42px -123.67px #91ff00, 21px -108.67px #b300ff, -23px -3.67px #ffd000, -65px -55.67px #ff4800, -63px -27.67px #00ff88, 46px 0.33px #0055ff, 75px -86.67px #8cff00, -11px -117.67px #00ff4d, 69px -125.67px #ff0033, 82px -36.67px #00ffbb, -39px -92.67px #00ff73, 49px -124.67px #ff0040, 94px -7.67px #ff6600, 82px 22.33px #ff001a, -14px -98.67px #00ffd5, 27px 7.33px #00ff33, -68px -18.67px #0080ff, 89px -42.67px #ff00fb, -88px -93.67px #ff0004, -62px -59.67px #00ff8c, 52px -21.67px #00ff33, 74px 6.33px #ff00bf, -42px -69.67px #00ff8c, -9px -92.67px #00ff8c, 26px -65.67px #ff0004, 57px -51.67px #a2ff00, 47px -89.67px #0099ff, 74px -123.67px #ff0037, -86px -108.67px #ff4000, 76px -25.67px #0400ff, 77px -57.67px #6aff00, -13px -91.67px #00ff95, 52px -66.67px #91ff00, -42px -103.67px #00ff73, -69px -115.67px #ff0037, 89px -38.67px #ff0088, 90px -113.67px #00ff6a, -63px -42.67px #0066ff, -71px -69.67px #0400ff, 0px -53.67px #002bff, 26px -70.67px #ff006a;
            }
        }
        @keyframes gravity {
            to {
                transform: translateY(200px);
                opacity: 0;
            }
        }
        @keyframes position {
            0%, 19.9% {
                margin-top: 10%;
                margin-left: 40%;
            }
            20%, 39.9% {
                margin-top: 40%;
                margin-left: 30%;
            }
            40%, 59.9% {
                margin-top: 20%;
                margin-left: 70%;
            }
            60%, 79.9% {
                margin-top: 30%;
                margin-left: 20%;
            }
            80%, 99.9% {
                margin-top: 30%;
                margin-left: 80%;
            }
        }
        /* Thông báo chúc mừng */
        .celebration {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9);
            border: 2px solid #4CAF50;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            display: none;
        }
        .celebration h2 {
            color: #4CAF50;
            margin-top: 0;
        }
        .celebration p {
            font-size: 18px;
            margin-bottom: 20px;
        }
        .celebration button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }
        .redirect-chain {
            margin-top: 5px;
            font-size: 0.85em;
            color: #666;
        }
        .redirect-chain-item {
            display: block;
            margin-bottom: 3px;
            padding-left: 10px;
            border-left: 2px solid #d35400;
        }
        @media (max-width: 768px) {
            .form-row {
                flex-direction: column;
            }
            .form-row > div {
                width: 100%;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Kiểm tra Thứ hạng Google</h1>
        
        <div class="form-row">
            <div style="flex: 1;">
                <label for="api-key">API Key (Serper.dev):</label>
                <input type="text" id="api-key" placeholder="Nhập API key của bạn" value="85dd0b1bd9a79f29cd3a121a23cc404a759dc00a" hidden>
            </div>
        </div>
        
        <div class="form-row">
            <div style="flex: 1;">
                <label for="domains">Danh sách Domain:</label>
                <textarea id="domains" rows="5" placeholder="Mỗi domain một dòng, ví dụ:&#10;example.com&#10;example.org"></textarea>
            </div>
            <div style="flex: 1;">
                <label for="keywords">Danh sách Từ khóa:</label>
                <textarea id="keywords" rows="5" placeholder="Mỗi từ khóa một dòng, ví dụ:&#10;từ khóa 1&#10;từ khóa 2"></textarea>
            </div>
        </div>
        
        <div class="form-row">
            <div>
                <label for="device">Thiết bị:</label>
                <select id="device">
                    <option value="desktop">Desktop</option>
                    <option value="mobile">Mobile</option>
                </select>
            </div>
            <div>
                <label for="location">Vị trí:</label>
                <select id="location">
                    <option value="">Mặc định (Việt Nam)</option>
                    <option value="1006094">Hà Nội</option>
                    <option value="1006113">TP. Hồ Chí Minh</option>
                    <option value="1006151">Đà Nẵng</option>
                </select>
            </div>
        </div>
        
        <div class="report-settings">
            <label for="report-name">Tên báo cáo:</label>
            <input type="text" id="report-name" placeholder="PIC" value="">
        </div>
        
        <div class="form-row">
            <button onclick="checkRanks()">Kiểm tra Thứ hạng</button>
        </div>
        
        <div id="loading" class="loading">
            <p>Đang kiểm tra thứ hạng... Vui lòng đợi.</p>
            <div class="progress-container">
                <div id="progress" class="progress-bar">0%</div>
            </div>
            <p id="progress-text">0/0</p>
        </div>
        
        <div id="error" class="error"></div>
        <div id="success" class="success"></div>
        
        <div id="results-actions" class="results-actions">
            <button class="copy-btn" onclick="copyAllRanks()">Sao chép dán vào daily ranking</button>
            <button class="copy-btn" onclick="copyFormattedReport()">Sao chép báo cáo Viptalk</button>
        </div>
        
        <div id="results"></div>
    </div>
    
    <!-- Hiệu ứng pháo hoa -->
    <div class="pyro">
        <div class="before"></div>
        <div class="after"></div>
    </div>
    
    <!-- Thông báo chúc mừng -->
    <div id="celebration" class="celebration">
        <h2>🎉 Chúc mừng! 🎉</h2>
        <p id="celebration-message"></p>
        <button onclick="closeCelebration()">Đóng</button>
    </div>
    
    <script>
        // Biến toàn cục để lưu kết quả
        let results = [];
        
        // Kích thước batch mặc định
        const DEFAULT_BATCH_SIZE = 5;
        
        // Đường dẫn API redirect server
        const DEFAULT_REDIRECT_SERVER = "https://red.nguonkienthuc.com";
        
        // Cache kết quả tìm kiếm
        const searchCache = {};
        
        // Hàm làm sạch domain
        function cleanDomain(domain) {
            let cleanedDomain = domain;
            
            // Loại bỏ http://, https://, www. và dấu / ở cuối
            cleanedDomain = cleanedDomain.replace(/^https?:\/\//, '');
            cleanedDomain = cleanedDomain.replace(/^www\./, '');
            cleanedDomain = cleanedDomain.replace(/\/$/, '');
            
            return {
                cleanedDomain: cleanedDomain.toLowerCase(),
                originalDomain: domain
            };
        }
        
        // Hàm chia mảng thành các mảng con có kích thước nhỏ hơn
        function chunkArray(array, size) {
            const chunks = [];
            for (let i = 0; i < array.length; i += size) {
                chunks.push(array.slice(i, i + size));
            }
            return chunks;
        }
        
        // Hàm kiểm tra nhiều chuyển hướng cùng lúc (sử dụng API như phiên bản cũ)
        async function checkMultipleRedirects(domains) {
            try {
                // Đảm bảo mỗi domain có protocol
                const urls = domains.map(domain => {
                    if (!domain.startsWith('http://') && !domain.startsWith('https://')) {
                        return 'https://' + domain;
                    }
                    return domain;
                });
                
                // Gọi API kiểm tra nhiều chuyển hướng
                const response = await fetch(`${DEFAULT_REDIRECT_SERVER}/check-redirects`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ urls, maxRedirects: 10 })
                });
                
                if (!response.ok) {
                    throw new Error(`Lỗi API: ${response.status}`);
                }
                
                return await response.json();
            } catch (error) {
                console.error('Lỗi kiểm tra nhiều chuyển hướng:', error);
                return {};
            }
        }
        
        // Hàm tìm kiếm Google với cache
        async function searchGoogleBatch(queries) {
            const apiKey = document.getElementById('api-key').value.trim();
            if (!apiKey) {
                throw new Error('API key không được để trống');
            }
            
            const device = document.getElementById('device').value;
            const location = document.getElementById('location').value;
            
            // Gom nhóm các từ khóa giống nhau để tránh tìm kiếm trùng lặp
            const uniqueQueries = [];
            const queryMap = new Map(); // Ánh xạ từ từ khóa đến chỉ mục trong uniqueQueries
            
            queries.forEach(query => {
                const cacheKey = `${query.keyword}_${device}_${location || 'default'}`;
                
                // Nếu từ khóa đã có trong cache, bỏ qua
                if (searchCache[cacheKey]) {
                    return;
                }
                
                // Nếu từ khóa chưa được thêm vào uniqueQueries, thêm vào
                if (!queryMap.has(query.keyword)) {
                    queryMap.set(query.keyword, uniqueQueries.length);
                    uniqueQueries.push({
                        keyword: query.keyword,
                        cacheKey: cacheKey
                    });
                }
            });
            
            // Nếu có từ khóa cần tìm kiếm
            if (uniqueQueries.length > 0) {
                const searchQueries = uniqueQueries.map(query => {
                    const queryParams = {
                        q: query.keyword,
                        device: device,
                        gl: "vn",
                        hl: "vi",
                        num: 100
                    };
                    
                    if (location) {
                        queryParams.location = location;
                    }
                    
                    return queryParams;
                });
                
                const myHeaders = new Headers();
                myHeaders.append("X-API-KEY", apiKey);
                myHeaders.append("Content-Type", "application/json");
                
                const requestOptions = {
                    method: "POST",
                    headers: myHeaders,
                    body: JSON.stringify(searchQueries),
                    redirect: "follow"
                };
                
                try {
                    const response = await fetch("https://google.serper.dev/search", requestOptions);
                    
                    if (!response.ok) {
                        const errorText = await response.text();
                        throw new Error(`Lỗi API: ${response.status} - ${errorText}`);
                    }
                    
                    const data = await response.json();
                    
                    // Lưu kết quả vào cache
                    uniqueQueries.forEach((query, index) => {
                        searchCache[query.cacheKey] = data[index];
                    });
                } catch (error) {
                    console.error("Lỗi khi tìm kiếm:", error);
                    throw error;
                }
            }
            
            // Trả về kết quả từ cache cho tất cả queries
            return queries.map(query => {
                const cacheKey = `${query.keyword}_${device}_${location || 'default'}`;
                return searchCache[cacheKey];
            });
        }
        
        // Hàm hiển thị pháo hoa
        function showFireworks() {
            const pyro = document.querySelector('.pyro');
            pyro.style.display = 'block';
            
            // Ẩn pháo hoa sau 3 giây
            setTimeout(() => {
                pyro.style.display = 'none';
            }, 3000);
        }
        
        // Hàm hiển thị thông báo chúc mừng
        function showCelebration(message) {
            const celebration = document.getElementById('celebration');
            const celebrationMessage = document.getElementById('celebration-message');
            
            celebrationMessage.textContent = message;
            celebration.style.display = 'block';
            
            // Hiển thị pháo hoa
            showFireworks();
        }
        
        // Hàm đóng thông báo chúc mừng
        function closeCelebration() {
            document.getElementById('celebration').style.display = 'none';
        }
        
        // Hàm kiểm tra thứ hạng tối ưu
        async function checkRanks() {
            const domainsText = document.getElementById('domains').value.trim();
            const keywordsText = document.getElementById('keywords').value.trim();
            
            if (!domainsText) {
                showError('Vui lòng nhập danh sách domain');
                return;
            }
            
            if (!keywordsText) {
                showError('Vui lòng nhập danh sách từ khóa');
                return;
            }
            
            // Parse danh sách domain và từ khóa
            const domains = domainsText.split('\n')
                .map(domain => domain.trim())
                .filter(domain => domain.length > 0);
                
            const keywords = keywordsText.split('\n')
                .map(keyword => keyword.trim())
                .filter(keyword => keyword.length > 0);
            
            if (domains.length === 0) {
                showError('Không có domain hợp lệ');
                return;
            }
            
            if (keywords.length === 0) {
                showError('Không có từ khóa hợp lệ');
                return;
            }
            
            // Hiển thị loading
            document.getElementById('loading').style.display = 'block';
            document.getElementById('error').style.display = 'none';
            document.getElementById('success').style.display = 'none';
            document.getElementById('results').innerHTML = '';
            document.getElementById('results-actions').style.display = 'none';
            
            // Reset kết quả
            results = [];
            
            // Kiểm tra chuyển hướng cho tất cả domain một lần
            let redirectResults = {};
            try {
                redirectResults = await checkMultipleRedirects(domains);
            } catch (error) {
                console.error('Lỗi khi kiểm tra chuyển hướng:', error);
            }
            
            // Tạo danh sách các domain đã làm sạch để kiểm tra
            const domainInfo = domains.map(domain => {
                const { cleanedDomain } = cleanDomain(domain);
                let domainToCheck = domain;
                if (!domainToCheck.startsWith('http://') && !domainToCheck.startsWith('https://')) {
                    domainToCheck = 'https://' + domainToCheck;
                }
                
                // Thêm thông tin chuyển hướng
                const redirectInfo = redirectResults[domainToCheck] || {};
                
                return {
                    domain: domain,
                    cleanedDomain: cleanedDomain,
                    redirected: redirectInfo.hasRedirect || false,
                    redirectChain: redirectInfo.redirectChain || null,
                    finalUrl: redirectInfo.finalUrl || null,
                    redirectCount: redirectInfo.redirectCount || 0
                };
            });
            
            // PHƯƠNG PHÁP TỐI ƯU: Tạo danh sách các từ khóa duy nhất để tìm kiếm
            const uniqueKeywords = [...new Set(keywords)];
            
            // Tạo ánh xạ từ từ khóa đến các domain cần kiểm tra
            const keywordToDomains = new Map();
            
            // Nếu số lượng domain và từ khóa bằng nhau, giả định mỗi domain đi với một từ khóa
            if (domains.length === keywords.length) {
                for (let i = 0; i < domains.length; i++) {
                    if (!keywordToDomains.has(keywords[i])) {
                        keywordToDomains.set(keywords[i], []);
                    }
                    keywordToDomains.get(keywords[i]).push(domainInfo[i]);
                }
            } else {
                // Nếu số lượng không bằng nhau, kiểm tra mọi domain với mọi từ khóa
                uniqueKeywords.forEach(keyword => {
                    keywordToDomains.set(keyword, domainInfo);
                });
            }
            
            // Tạo danh sách các query để tìm kiếm
            const queries = uniqueKeywords.map(keyword => ({
                keyword: keyword
            }));
            
            // Thực hiện tìm kiếm theo batch
            const batchSize = DEFAULT_BATCH_SIZE;
            const batches = chunkArray(queries, batchSize);
            
            let completed = 0;
            const totalKeywords = uniqueKeywords.length;
            
            try {
                for (const batch of batches) {
                    // Cập nhật tiến trình
                    document.getElementById('progress-text').textContent = `${completed}/${totalKeywords}`;
                    const percent = Math.round((completed / totalKeywords) * 100);
                    document.getElementById('progress').style.width = `${percent}%`;
                    document.getElementById('progress').textContent = `${percent}%`;
                    
                    // Tìm kiếm batch
                    const searchResults = await searchGoogleBatch(batch);
                    
                    // Xử lý kết quả tìm kiếm
                    for (let i = 0; i < batch.length; i++) {
                        const keyword = batch[i].keyword;
                        const searchResult = searchResults[i];
                        
                        // Lấy danh sách domain cần kiểm tra cho từ khóa này
                        const domainsToCheck = keywordToDomains.get(keyword) || [];
                        
                        // Kiểm tra từng domain trong kết quả tìm kiếm
                        for (const domainData of domainsToCheck) {
                            let rank = null;
                            let matchedUrl = null;
                            
                            // Tạo danh sách các domain cần kiểm tra (bao gồm cả domain chuyển hướng)
                            let domainVariants = [domainData.cleanedDomain];
                            
                            // Thêm domain từ chuỗi chuyển hướng
                            if (domainData.redirectChain && domainData.redirectChain.length > 1) {
                                for (let j = 1; j < domainData.redirectChain.length; j++) {
                                    try {
                                        const redirectUrl = new URL(domainData.redirectChain[j].url);
                                        const redirectDomain = redirectUrl.hostname.replace(/^www\./, '');
                                        domainVariants.push(redirectDomain.toLowerCase());
                                    } catch (e) {
                                        console.error("Lỗi xử lý URL chuyển hướng:", e);
                                    }
                                }
                            }
                            
                            // Tìm kiếm trong kết quả Google
                            if (searchResult && searchResult.organic) {
                                for (let j = 0; j < searchResult.organic.length; j++) {
                                    const result = searchResult.organic[j];
                                    try {
                                        const resultUrl = new URL(result.link);
                                        const resultDomain = resultUrl.hostname.replace(/^www\./, '').toLowerCase();
                                        
                                        // Kiểm tra xem domain kết quả có khớp với domain cần kiểm tra không
                                        if (domainVariants.some(domain => resultDomain.includes(domain))) {
                                            rank = j + 1;
                                            matchedUrl = result.link;
                                            break;
                                        }
                                    } catch (e) {
                                        console.error("Lỗi xử lý URL kết quả:", e);
                                    }
                                }
                            }
                            
                            // Thêm kết quả
                            results.push({
                                domain: domainData.domain,
                                cleanedDomain: domainData.cleanedDomain,
                                keyword: keyword,
                                rank: rank,
                                matchedUrl: matchedUrl,
                                redirected: domainData.redirected,
                                redirectChain: domainData.redirectChain,
                                finalUrl: domainData.finalUrl,
                                redirectCount: domainData.redirectCount,
                                date: new Date().toLocaleDateString('vi-VN'),
                                location: document.getElementById('location').options[document.getElementById('location').selectedIndex].text
                            });
                        }
                    }
                    
                    // Hiển thị kết quả sau mỗi batch
                    displayResults();
                    
                    // Cập nhật số lượng hoàn thành
                    completed += batch.length;
                }
                
                // Cập nhật tiến trình thành 100%
                document.getElementById('progress-text').textContent = `${totalKeywords}/${totalKeywords}`;
                document.getElementById('progress').style.width = '100%';
                document.getElementById('progress').textContent = '100%';
                
                // Đếm số từ khóa trong top 10
                const top10Keywords = results.filter(result => result.rank !== null && result.rank <= 6);
                const top10Count = top10Keywords.length;
                
                // Hiển thị thông báo chúc mừng nếu có từ khóa trong top 10
                if (top10Count > 0) {
                    // Tạo thông báo dựa trên số lượng từ khóa trong top 10
                    const message = `Bạn có ${top10Count} từ khóa nằm trong top 6 Google!`;
                    
                    // Hiển thị thông báo chúc mừng
                    showCelebration(message);
                    
                    // Bắn pháo hoa nhiều lần tương ứng với số từ khóa top 10
                    for (let i = 0; i < top10Count; i++) {
                        setTimeout(() => {
                            showFireworks();
                        }, i * 3000); // Mỗi hiệu ứng pháo hoa cách nhau 3 giây
                    }
                }
                
                showSuccess(`Đã kiểm tra thành công ${results.length} kết quả`);
            } catch (error) {
                showError(`Lỗi: ${error.message}`);
            } finally {
                // Ẩn loading
                document.getElementById('loading').style.display = 'none';
                
                // Hiển thị nút sao chép nếu có kết quả
                if (results.length > 0) {
                    document.getElementById('results-actions').style.display = 'flex';
                }
            }
        }
        
        // Hàm hiển thị kết quả
        function displayResults() {
            const resultsDiv = document.getElementById('results');
            
            // Tạo bảng kết quả
            let tableHtml = `
                <table>
                    <thead>
                        <tr>
                            <th>STT</th>
                            <th>Domain</th>
                            <th>Từ khóa</th>
                            <th>Thứ hạng</th>
                            <th>URL khớp</th>
                            <th>Ngày kiểm tra</th>
                            <th>Vị trí</th>
                        </tr>
                    </thead>
                    <tbody>
            `;
            
            // Thêm các dòng kết quả
            results.forEach((result, index) => {
                // Xác định class cho thứ hạng
                let rankClass = 'rank-none';
                let rankDisplay = 'Không tìm thấy';
                
                if (result.rank !== null) {
                    rankDisplay = result.rank;
                    if (result.rank <= 10) {
                        rankClass = 'rank-good';
                    } else if (result.rank <= 20) {
                        rankClass = 'rank-medium';
                    } else {
                        rankClass = 'rank-bad';
                    }
                }
                
                // Tạo thông tin chuyển hướng
                let redirectInfo = '';
                if (result.redirected) {
                    // Tạo tooltip với thông tin chi tiết về chuỗi chuyển hướng
                    let redirectChainHtml = '';
                    if (result.redirectChain && result.redirectChain.length > 0) {
                        redirectChainHtml = '<div class="redirect-chain">';
                        result.redirectChain.forEach((redirect, idx) => {
                            const statusColor = redirect.status === 301 ? '#e74c3c' : '#3498db';
                            redirectChainHtml += `
                                <span class="redirect-chain-item" style="color: ${statusColor}">
                                    ${idx + 1}. ${redirect.url} (${redirect.status})
                                </span>
                            `;
                        });
                        redirectChainHtml += '</div>';
                    }
                    
                    redirectInfo = `
                        <div class="redirect-info">
                            <span class="tooltip">
                                Đã chuyển hướng (${result.redirectCount})
                                <span class="tooltiptext">
                                    ${redirectChainHtml || 'Không có thông tin chi tiết'}
                                </span>
                            </span>
                        </div>
                    `;
                }
                
                // Thêm dòng vào bảng
                tableHtml += `
                    <tr>
                        <td>${index + 1}</td>
                        <td>
                            ${result.domain}
                            ${redirectInfo}
                        </td>
                        <td>${result.keyword}</td>
                        <td class="${rankClass}">${rankDisplay}</td>
                        <td>${result.matchedUrl ? `<a href="${result.matchedUrl}" target="_blank">${result.matchedUrl}</a>` : 'N/A'}</td>
                        <td>${result.date}</td>
                        <td>${result.location}</td>
                    </tr>
                `;
            });
            
            // Đóng bảng
            tableHtml += `
                    </tbody>
                </table>
            `;
            
            // Hiển thị bảng
            resultsDiv.innerHTML = tableHtml;
        }
        
        // Hàm sao chép tất cả thứ hạng thành một cột
        function copyAllRanks() {
            // Tạo một chuỗi chứa tất cả thứ hạng, mỗi thứ hạng trên một dòng
            const ranksList = results.map(result => result.rank ? result.rank.toString() : 'N/A').join('\n');
            
            // Sao chép vào clipboard
            navigator.clipboard.writeText(ranksList)
                .then(() => {
                    showSuccess('Đã sao chép tất cả thứ hạng thành công!');
                })
                .catch(err => {
                    console.error('Lỗi khi sao chép: ', err);
                    showError('Không thể sao chép. Vui lòng thử lại.');
                });
        }

        // Sao chép báo cáo theo định dạng
        // function copyFormattedReport() {
        //     // Lấy ngày hiện tại
        //     const today = new Date();
        //     const day = today.getDate();
        //     const month = today.getMonth() + 1;
            
        //     // Lấy tên báo cáo từ input
        //     const reportName = document.getElementById('report-name').value.trim();
            
        //     // Lấy thông tin khu vực
        //     const locationElement = document.getElementById('location');
        //     const locationText = locationElement.options[locationElement.selectedIndex].text;
        //     const locationInfo = locationElement.value ? ` - ${locationText}` : '';
            
        //     // Bắt đầu với tiêu đề báo cáo
        //     let report = `Ngày ${day}/${month} - [${reportName}]\n============\n\n`;
            
        //     // Nhóm kết quả theo domain (sau khi đã làm sạch)
        //     const domainGroups = {};
            
        //     results.forEach(result => {
        //         const domain = result.cleanedDomain;
        //         if (!domainGroups[domain]) {
        //             domainGroups[domain] = {
        //                 originalDomain: result.domain,
        //                 cleanedDomain: domain,
        //                 keywords: [],
        //                 ranks: [],
        //                 redirected: result.redirected || false,
        //                 finalUrl: result.finalUrl || null,
        //                 redirectChain: result.redirectChain || null,
        //                 has301: false
        //             };
        //         }
                
        //         // Kiểm tra xem có chuyển hướng 301 không
        //         if (result.redirectChain && result.redirectChain.length > 0) {
        //             for (let i = 0; i < result.redirectChain.length; i++) {
        //                 if (result.redirectChain[i].status === 301) {
        //                     domainGroups[domain].has301 = true;
        //                     break;
        //                 }
        //             }
        //         }
                
        //         domainGroups[domain].keywords.push(result.keyword);
        //         domainGroups[domain].ranks.push(result.rank);
        //     });
            
        //     // Tạo báo cáo cho từng domain
        //     for (const domain in domainGroups) {
        //         const group = domainGroups[domain];
                
        //         // Thêm domain vào báo cáo (màu xanh)
        //         // Nếu có chuyển hướng 301, thêm đánh dấu [301]
        //         const redirectMark = group.has301 ? ' [301]' : '';
        //         report += `${domain}${redirectMark}\n`;
                
        //         // Nếu có chuyển hướng, hiển thị URL cuối cùng
        //         if (group.redirected && group.finalUrl) {
        //             // Lấy hostname từ finalUrl
        //             try {
        //                 const finalUrlObj = new URL(group.finalUrl);
        //                 const finalDomain = finalUrlObj.hostname;
        //                 report += `→ ${finalDomain}\n`;
        //             } catch (e) {
        //                 // Nếu không parse được URL, hiển thị toàn bộ finalUrl
        //                 report += `→ ${group.finalUrl}\n`;
        //             }
        //         }
                
        //         // Thêm từ khóa và thứ hạng
        //         for (let i = 0; i < group.keywords.length; i++) {
        //             const keyword = group.keywords[i];
        //             const rank = group.ranks[i] || 'N/A';
        //             report += `${keyword} - top ${rank}\n`;
        //         }
                
        //         report += '\n';
        //     }
            
        //     // Sao chép vào clipboard
        //     navigator.clipboard.writeText(report)
        //         .then(() => {
        //             showSuccess('Đã sao chép báo cáo định dạng thành công!');
        //         })
        //         .catch(err => {
        //             console.error('Lỗi khi sao chép: ', err);
        //             showError('Không thể sao chép. Vui lòng thử lại.');
        //         });
        // }
        // Sao chép báo cáo theo định dạng
function copyFormattedReport() {
    // Lấy ngày hiện tại
    const today = new Date();
    const day = today.getDate();
    const month = today.getMonth() + 1;
    
    // Lấy tên báo cáo từ input
    const reportName = document.getElementById('report-name').value.trim();
    
    // Lấy thông tin khu vực
    const locationElement = document.getElementById('location');
    const locationText = locationElement.options[locationElement.selectedIndex].text;
    const locationInfo = locationElement.value ? ` - ${locationText}` : '';
    
    // Bắt đầu với tiêu đề báo cáo
    let report = `Ngày ${day}/${month} - [${reportName}]\n============\n\n`;
    
    // Lấy danh sách domain và từ khóa ban đầu để giữ nguyên thứ tự
    const domainsText = document.getElementById('domains').value.trim();
    const keywordsText = document.getElementById('keywords').value.trim();
    
    const originalDomains = domainsText.split('\n')
        .map(domain => domain.trim())
        .filter(domain => domain.length > 0);
        
    const originalKeywords = keywordsText.split('\n')
        .map(keyword => keyword.trim())
        .filter(keyword => keyword.length > 0);
    
    // Tạo Map để lưu trữ thông tin domain đã xử lý
    const processedDomains = new Map();
    
    // Nếu số lượng domain và từ khóa bằng nhau, giả định mỗi domain đi với một từ khóa
    if (originalDomains.length === originalKeywords.length) {
        // Lặp qua danh sách domain theo thứ tự ban đầu
        for (let i = 0; i < originalDomains.length; i++) {
            const domain = originalDomains[i];
            const keyword = originalKeywords[i];
            
            // Tìm kết quả tương ứng
            const result = results.find(r => 
                r.domain === domain && r.keyword === keyword);
            
            if (result) {
                const cleanedDomain = result.cleanedDomain;
                
                // Kiểm tra xem domain đã được xử lý chưa
                if (!processedDomains.has(cleanedDomain)) {
                    processedDomains.set(cleanedDomain, {
                        originalDomain: domain,
                        keywords: [],
                        ranks: [],
                        redirected: result.redirected || false,
                        finalUrl: result.finalUrl || null,
                        redirectChain: result.redirectChain || null,
                        has301: false
                    });
                    
                    // Kiểm tra xem có chuyển hướng 301 không
                    if (result.redirectChain && result.redirectChain.length > 0) {
                        for (let j = 0; j < result.redirectChain.length; j++) {
                            if (result.redirectChain[j].status === 301) {
                                processedDomains.get(cleanedDomain).has301 = true;
                                break;
                            }
                        }
                    }
                }
                
                // Thêm từ khóa và thứ hạng vào domain
                const domainData = processedDomains.get(cleanedDomain);
                domainData.keywords.push(keyword);
                domainData.ranks.push(result.rank);
            }
        }
        
        // Tạo báo cáo theo thứ tự domain ban đầu
        const addedDomains = new Set();
        
        for (let i = 0; i < originalDomains.length; i++) {
            const domain = originalDomains[i];
            const { cleanedDomain } = cleanDomain(domain);
            
            // Nếu domain này đã được thêm vào báo cáo, bỏ qua
            if (addedDomains.has(cleanedDomain)) {
                continue;
            }
            
            // Đánh dấu domain đã được thêm vào báo cáo
            addedDomains.add(cleanedDomain);
            
            // Lấy thông tin domain
            const domainData = processedDomains.get(cleanedDomain);
            
            if (domainData) {
                // Thêm domain vào báo cáo
                const redirectMark = domainData.has301 ? ' [301]' : '';
                report += `${cleanedDomain}${redirectMark}\n`;
                
                // Nếu có chuyển hướng, hiển thị URL cuối cùng
                if (domainData.redirected && domainData.finalUrl) {
                    try {
                        const finalUrlObj = new URL(domainData.finalUrl);
                        const finalDomain = finalUrlObj.hostname;
                        report += `→ ${finalDomain}\n`;
                    } catch (e) {
                        report += `→ ${domainData.finalUrl}\n`;
                    }
                }
                
                // Thêm từ khóa và thứ hạng theo thứ tự
                for (let j = 0; j < domainData.keywords.length; j++) {
                    const keyword = domainData.keywords[j];
                    const rank = domainData.ranks[j] || 'N/A';
                    report += `${keyword} - top ${rank}\n`;
                }
                
                report += '\n';
            }
        }
    } else {
        // Nếu số lượng domain và từ khóa không bằng nhau
        // Nhóm kết quả theo domain (giữ nguyên thứ tự xuất hiện đầu tiên)
        const domainOrder = [];
        const domainGroups = {};
        
        results.forEach(result => {
            const domain = result.cleanedDomain;
            
            if (!domainGroups[domain]) {
                domainOrder.push(domain);
                domainGroups[domain] = {
                    originalDomain: result.domain,
                    cleanedDomain: domain,
                    keywords: [],
                    ranks: [],
                    redirected: result.redirected || false,
                    finalUrl: result.finalUrl || null,
                    redirectChain: result.redirectChain || null,
                    has301: false
                };
            }
            
            // Kiểm tra xem có chuyển hướng 301 không
            if (result.redirectChain && result.redirectChain.length > 0) {
                for (let i = 0; i < result.redirectChain.length; i++) {
                    if (result.redirectChain[i].status === 301) {
                        domainGroups[domain].has301 = true;
                        break;
                    }
                }
            }
            
            domainGroups[domain].keywords.push(result.keyword);
            domainGroups[domain].ranks.push(result.rank);
        });
        
        // Tạo báo cáo theo thứ tự domain đã lưu
        for (const domain of domainOrder) {
            const group = domainGroups[domain];
            
            // Thêm domain vào báo cáo
            const redirectMark = group.has301 ? ' [301]' : '';
            report += `${domain}${redirectMark}\n`;
            
            // Nếu có chuyển hướng, hiển thị URL cuối cùng
            if (group.redirected && group.finalUrl) {
                try {
                    const finalUrlObj = new URL(group.finalUrl);
                    const finalDomain = finalUrlObj.hostname;
                    report += `→ ${finalDomain}\n`;
                } catch (e) {
                    report += `→ ${group.finalUrl}\n`;
                }
            }
            
            // Thêm từ khóa và thứ hạng
            for (let i = 0; i < group.keywords.length; i++) {
                const keyword = group.keywords[i];
                const rank = group.ranks[i] || 'N/A';
                report += `${keyword} - top ${rank}\n`;
            }
            
            report += '\n';
        }
    }
    
    // Sao chép vào clipboard
    navigator.clipboard.writeText(report)
        .then(() => {
            showSuccess('Đã sao chép báo cáo định dạng thành công!');
        })
        .catch(err => {
            console.error('Lỗi khi sao chép: ', err);
            showError('Không thể sao chép. Vui lòng thử lại.');
        });
}

        // Hàm hiển thị lỗi
        function showError(message) {
            const errorDiv = document.getElementById('error');
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
            document.getElementById('success').style.display = 'none';
        }
        
        // Hàm hiển thị thông báo thành công
        function showSuccess(message) {
            const successDiv = document.getElementById('success');
            successDiv.textContent = message;
            successDiv.style.display = 'block';
            document.getElementById('error').style.display = 'none';
        }
    </script>
</body>
</html>

#dex #defi #flutter #javascript #ruby #swift #vue.js #decentralizedexchange #crypto #tech #software #decentralizedexchangedevelopment #cryptoexchange #cryptoexchangedevelopment #centralized #india #usa #uk #uae #australia #spain #russia #southkorea #pancakeswap #uniswap

Why Entrepreneurs Choose Crypto Exchange Script for Their Business

Entrepreneurs choose crypto exchange scripts because they offer a fast, cost-effective, and customizable way to launch a cryptocurrency trading platform. These ready-made solutions come with essential features like trading engines, wallet integration, security modules, and admin dashboards—helping startups avoid the complexity of building from scratch. With reduced development time, lower investment costs, and scalable architecture, crypto exchange scripts are the ideal choice for entrepreneurs looking to enter the crypto market quickly and efficiently.

#javascript

Code - Spin on scroll in Elementor » Nicolai Palmkvist

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>

<script>
const slides = document.querySelectorAll('.slide');
let isMobile = window.innerWidth <= 768; // Assuming mobile width is 768px or less

slides.forEach((slide, i) => {
    let angle = isMobile ? i * 10 : (i * 10) - 10;
    gsap.to(slide, {
        rotation: angle,
        transformOrigin: "0% 2300px",
    });
});

let speed = isMobile ? 30 : 30; // Faster speed on mobile
ScrollTrigger.create({
    trigger: '.scroller',
    start: "top top",
    end: "bottom bottom",
    //markers: true,
    onUpdate: (self) => {
        gsap.to(slides, {
            rotation: (i) => {
                let baseAngle = isMobile ? i * 10 : (i * 10) - 10;
                return baseAngle - self.progress * speed;
            }
        });
    }
});
</script>

#javascript

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>

var $ = jQuery

$(document).ready(function(){

$('.reboot-slider').each(function(){

var $this = $(this),
    currentSlide = 0,
    previousSlide = 0,
    slideNumber = $this.find('.reboot-side-slider .swiper-slide:not(.swiper-slide-duplicate)').length,
    barHTML = '',
    forward,
    textContainer = $this.find('.reboot-changing-widget')

for(var i=0; i<slideNumber;i++){

    barHTML += `<span class="dot"><span class="dot-number">${i+1}</span></span>`
}

$this.find('.reboot-bar .dot').remove()
$this.find('.reboot-bar').append(barHTML)
$this.find('.reboot-bar .dot').eq(0).addClass('active')

textContainer.each(function(){
    var texts = $(this).find('.elementor-widget').eq(0)
    texts.addClass('currentUp')
    $(this).css('--h', texts.height()+'px')
})

setTimeout(function(){
    $this.addClass('loaded')
    if($this.find('.reboot-side-slider .swiper-container-initialized, .reboot-side-slider .swiper-initialized').length){
        $this.find('.reboot-side-slider').addClass('loaded')
    }

    var init = setInterval(function(){
        if($this.find('.reboot-side-slider .swiper-container-initialized, .reboot-side-slider .swiper-initialized').length){

            $this.find('.reboot-side-slider').addClass('loaded')
            clearInterval(init)
        }
    },50)
}, 500)

var bgs = JSON.parse($this.attr('data-settings')).background_slideshow_gallery,
    bgHTML = '<div class="reboot-slider-background">'

if(bgs){
    bgs.forEach(function(background){
        bgHTML += `<img decoding="async" src="${background.url}"/>`
    })
}
bgHTML += '</div>'

$this.find('.reboot-slider-background').remove()
$this.prepend(bgHTML)

var backgrounds = $this.find('.reboot-slider-background img')

backgrounds.eq(0).addClass('currentForward')

setInterval(function(){
    currentSlide = $this.find('.reboot-side-slider .swiper-slide-active').attr('data-swiper-slide-index')
    if(previousSlide != currentSlide) {

        if( previousSlide < currentSlide ){
            forward = true
        }
        if( previousSlide > currentSlide ){
            forward = false
        }
        if( previousSlide == slideNumber - 1 && currentSlide == 0 ){
            forward = true
        }
        if( previousSlide == 0 && currentSlide == slideNumber - 1 ){
            forward = false
        }
        textContainer.each(function(){
            var texts = $(this).find('.elementor-widget')

            $(this).css('--h', texts.eq(currentSlide).height()+'px')

            texts.removeClass('prev next currentUp currentDown')
            backgrounds.removeClass('prev currentBackward currentForward')

            backgrounds.eq(previousSlide).addClass('prev')

            if(forward) {
                texts.eq(previousSlide).addClass('prev')
                texts.eq(currentSlide).addClass('currentUp')

                backgrounds.eq(currentSlide).addClass('currentForward')

            }else{
                texts.eq(previousSlide).addClass('next')
                texts.eq(currentSlide).addClass('currentDown')

                backgrounds.eq(currentSlide).addClass('currentBackward')
            }
        })

        $this.find('.reboot-bar .dot').removeClass('active')
        $this.find('.reboot-bar .dot').eq(currentSlide).addClass('active')
    }
    previousSlide = currentSlide
}, 500)

$this.find('.reboot-bar .dot').on('click', function(){

    var index = $(this).index()

    $this.find('.reboot-side-slider .swiper-pagination-bullet').eq(index).trigger('click')
    $this.find('.reboot-side-slider .swiper-container').trigger('mouseleave')

})
$this.find('.reboot-slider-left').on('click', function(){

    $this.find('.reboot-side-slider .elementor-swiper-button-prev').trigger('click')
    $this.find('.reboot-side-slider .elementor-swiper').trigger('mouseleave')
})
$this.find('.reboot-slider-right').on('click', function(){

    $this.find('.reboot-side-slider .elementor-swiper-button-next').trigger('click')
    $this.find('.reboot-side-slider .elementor-swiper').trigger('mouseleave')
})
$this.find('.reboot-slider-left a, .reboot-slider-right a').on('click', function(e){

    e.preventDefault()
})

})
})

$(window).on('resize', function(){


$('.reboot-slider').each(function(){

    var textContainer = $(this).find('.reboot-changing-widget')

    textContainer.each(function(){
        var texts = $(this).find('.elementor-widget.currentUp, .elementor-widget.currentDown')

        $(this).css('--h', texts.height()+'px')
    })
})
})

</script>

#javascript

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

selector{
    --radius: 8px;
    --height: 320px;
    --active-height: 410px;
    --overlay: 0.75;
}
selector{
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s ease-in-out;
}
selector.loaded{
    opacity: 1;
    transform: translateX(0);
}

selector .swiper-wrapper{
    height: var(--active-height);
    align-items: center;
}
selector:not(.loaded) .swiper-wrapper{
    transition-duration: 0s !important;
}
selector .swiper-slide{
    display: flex;
    align-items: flex-end;
    border-radius: var(--radius);
    height: var(--height);
    box-shadow: 0 0 50px rgba(0,0,0,0.15);
}
selector.loaded .swiper-slide{
    transition: all 0.3s ease-in-out 0.2s;
}
selector .swiper-slide.swiper-slide-active{
    height: var(--active-height);
}
selector .swiper-slide:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(0,0,0);
    background: linear-gradient(20deg, rgba(0,0,0,var(--overlay)) 0%, rgba(0,0,0,0) 100%);
    height: 100%;
    width: 100%;
    z-index: 1;
}
selector .elementor-testimonial__footer{
    display: block;
}
selector img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
}
selector .elementor-testimonial__cite{
    z-index: 2;
    position: relative;
}
selector .elementor-testimonial__name{
    margin-bottom: 5px;
}
selector .swiper-pagination,
selector .elementor-swiper-button{
    display: none;
}
selector .swiper-container{
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1024px){
selector{
    --height: 180px;
    --active-height: 250px;
}
}
@media (max-width: 767px){
selector{
    --height: 80px;
    --active-height: 105px;
    width: 100% !important;
    max-width: var(--container-widget-width, 300px) !important;
}
selector .elementor-testimonial__cite{
    opacity: 0;
}
}

#javascript

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

selector{
    --speed: 0.5s;
    --gap: 40px;
}
selector{
    transition: all 0.3s ease-in-out;
    height: var(--h);
    --height: calc(var(--h) + var(--gap));
    overflow: hidden !important;
}
selector .elementor-widget{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
selector .elementor-widget .elementor-button{
    transform: translateY(calc(-10 * var(--height)));
    transition: none !important;
}
selector .elementor-widget.prev .elementor-button{
    animation: prev var(--speed) ease-in-out;
    transform: translateY(calc(-1 * var(--height)));
}
selector .elementor-widget.next .elementor-button{
    animation: next var(--speed) ease-in-out;
    transform: translateY(var(--height));
}
selector .elementor-widget.currentUp,
selector .elementor-widget.currentDown{
    z-index: 1;
}
selector .elementor-widget.currentUp .elementor-button{
    animation: currentUp var(--speed) ease-in-out;
    transform: translateY(0);
}
selector .elementor-widget.currentDown .elementor-button{
    animation: currentDown var(--speed) ease-in-out;
    transform: translateY(0);
}

@keyframes prev {
  0%   {transform: translateY(0);}
  100%   {transform: translateY(calc(-1 * var(--height)));}
}

@keyframes next {
  0%   {transform: translateY(0);}
  100%   {transform: translateY(var(--height));}
}

@keyframes currentUp {
  0%   {transform: translateY(var(--height));}
  100%   {transform: translateY(0);}
}

@keyframes currentDown {
  0%   {transform: translateY(calc(-1 * var(--height)));}
  100%   {transform: translateY(0);}
}

#javascript

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

selector{
    --speed: 0.5s;
    --gap: 40px;
}
selector{
    transition: all 0.3s ease-in-out;
    height: var(--h);
    --height: calc(var(--h) + var(--gap));
    overflow: hidden !important;
}
selector .elementor-widget{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
selector .elementor-widget p{
    transform: translateY(calc(-10 * var(--height)));
    transition: none !important;
}
selector .elementor-widget.prev p{
    animation: prev var(--speed) ease-in-out;
    transform: translateY(calc(-1 * var(--height)));
}
selector .elementor-widget.next p{
    animation: next var(--speed) ease-in-out;
    transform: translateY(var(--height));
}
selector .elementor-widget.currentUp,
selector .elementor-widget.currentDown{
    z-index: 1;
}
selector .elementor-widget.currentUp p{
    animation: currentUp var(--speed) ease-in-out;
    transform: translateY(0);
}
selector .elementor-widget.currentDown p{
    animation: currentDown var(--speed) ease-in-out;
    transform: translateY(0);
}

@keyframes prev {
  0%   {transform: translateY(0);}
  100%   {transform: translateY(calc(-1 * var(--height)));}
}

@keyframes next {
  0%   {transform: translateY(0);}
  100%   {transform: translateY(var(--height));}
}

@keyframes currentUp {
  0%   {transform: translateY(var(--height));}
  100%   {transform: translateY(0);}
}

@keyframes currentDown {
  0%   {transform: translateY(calc(-1 * var(--height)));}
  100%   {transform: translateY(0);}
}

#javascript

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

selector{
    --speed: 0.8s;
    --gap: 40px;
}
selector{
    transition: all 0.3s ease-in-out;
    height: var(--h);
    --height: calc(var(--h) + var(--gap));
    overflow: hidden !important;
}
selector .elementor-widget{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
selector .elementor-widget .elementor-heading-title{
    transform: translateY(calc(-10 * var(--height)));
    transition: none !important;
}
selector .elementor-widget.prev .elementor-heading-title{
    animation: prev var(--speed) ease-in-out;
    transform: translateY(calc(-1 * var(--height)));
}
selector .elementor-widget.next .elementor-heading-title{
    animation: next var(--speed) ease-in-out;
    transform: translateY(var(--height));
}
selector .elementor-widget.currentUp,
selector .elementor-widget.currentDown{
    z-index: 1;
}
selector .elementor-widget.currentUp .elementor-heading-title{
    animation: currentUp var(--speed) ease-in-out;
    transform: translateY(0);
}
selector .elementor-widget.currentDown .elementor-heading-title{
    animation: currentDown var(--speed) ease-in-out;
    transform: translateY(0);
}

@keyframes prev {
  0%   {transform: translateY(0);}
  100%   {transform: translateY(calc(-1 * var(--height)));}
}

@keyframes next {
  0%   {transform: translateY(0);}
  100%   {transform: translateY(var(--height));}
}

@keyframes currentUp {
  0%   {transform: translateY(var(--height));}
  100%   {transform: translateY(0);}
}

@keyframes currentDown {
  0%   {transform: translateY(calc(-1 * var(--height)));}
  100%   {transform: translateY(0);}
}

#javascript

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

@media (max-width: 1750px) and (min-width: 1381px){
selector{
    padding-left: 8%;
    padding-right: 12%;
}
}
@media (max-width: 1380px) and (min-width: 768px){
selector{
    padding-left: 0.5%;
    padding-right: 5.5%;
}
}

#javascript

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

selector{
    --dot-size: 23px;
    --line-color: #B0B7D04D;
    --dot-color: #B0B7D0;
    --dot-color-active: #B0B7D0;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
}
selector{
    height: 80vh;
    height: var(--min-height);
    max-height: 80vh;
    min-height: 0 !important;
}
selector .dot{
    height: var(--dot-size);
    width: var(--dot-size);
    background: var(--dot-color);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transform: scale(0.3);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
selector .dot-number{
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
selector .dot.active{
    transform: scale(1);
    background: var(--dot-color-active);
}
selector .dot.active .dot-number{
    opacity: 1;
}
selector:before{
    content: "";
    position: absolute;
    top: 50%;
    height: calc(100% - 20px);
    max-height: 90vh;
    width: 1px;
    background: var(--line-color);
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

@media (max-width: 767px){
selector{
    transform: translateX(-50%);
    flex-wrap: nowrap !important;
}
selector:before {
    width: calc(100% - 20px);
    height: 1px;

}
}

#javascript

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

selector{
    background: #fff;
    --background-speed: 0.5s;
}
selector .elementor-background-slideshow{
    display: none;
}
selector .reboot-slider-background,
selector .reboot-slider-background img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1s ease-in-out;
}
selector .reboot-slider-background img{
    object-fit: cover;
    opacity: 0;
    transform: scale(1.1);
}
selector .reboot-slider-background img.prev,
selector .reboot-slider-background img.currentBackward,
selector .reboot-slider-background img.currentForward{
    opacity: 1;
    transform: scale(1.1);
}

selector .reboot-slider-background img.currentBackward,
selector .reboot-slider-background img.currentForward{
    z-index: 1;
    opacity: 1;
    animation: bgNext var(--background-speed) linear;
    transition: all 1s ease-in-out;
    transform: scale(1);
}

selector:before{
    z-index: 2;
}
selector > .elementor-element{
    z-index: 3;
}

selector .reboot-bar,
selector .reboot-slider-left,
selector .reboot-slider-right{
    opacity: 0;
    transition: all 0.8s ease-in-out;
}
selector.loaded .reboot-bar,
selector.loaded .reboot-slider-left,
selector.loaded .reboot-slider-right{
    opacity: 1;
}
/*selector .ds-slider-left a:focus,*/
/*selector .ds-slider-right a:focus{*/
/*    outline: none !important;*/
/*}*/

@keyframes bgNext {
  0%   {opacity: 0; transform: scale(1.1);}
  100%   {opacity: 1; transform: scale(1);}
}

@media (min-width: 768px){
selector .reboot-bar,
selector .reboot-slider-left,
selector .reboot-slider-right{
    position: relative;
}
}

@media (max-width: 1380px) and (min-width: 768px){
selector{
    padding-left: 4%;
    padding-right: 4%;
}
}

@media (max-width: 767px){
selector .reboot-slider-left{
    left: calc(50% - 300px/2) !important;
}
selector .reboot-slider-right{
    right: calc(50% - 300px/2) !important;
}
}

#javascript

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

reboot-slider

reboot-bar

reboot-changing-widget

reboot-changing-widget

reboot-changing-widget

reboot-side-slider

reboot-slider-left

reboot-slider-right

#javascript #react.js #nodejs

Off Codium/windsurf auto suggestion

open setting in vs code (ctrl + ,) ,then  go to  search bar and search -->>      .codeiumconfig        
then open first opection ,  and click  edit in setting.json .  then redirect  -->> 
   codeium.enableConfig            and   add this 2 line --->>>>





    // aftr this line, the code is not visible in the provided snippet 53-54
    "autoSuggestions": false,
    "autoComplete": false,

#javascript

20 NHÓM CÔNG CỤ AI NHẤT ĐỊNH CẦN BIẾT VÀ THÀNH THẠO TRONG 2025

20 NHÓM CÔNG CỤ AI NHẤT ĐỊNH CẦN BIẾT VÀ THÀNH THẠO TRONG 2025
A. NHÓM AI giúp Viết, nói & giao tiếp hiệu quả
1. Tư duy & giải quyết vấn đề:
ChatGPT, Gemini, Meta AI, DeepSeek, Copilot
2. Tóm tắt, dịch & xử lý văn bản dài:
Claude, Qwen, Wordtune, ChatGPT
3. Viết nội dung & chỉnh sửa:
Writesonic, Grammarly, DeepAI
4. Tạo slide & thuyết trình:
SlidesAI, Gamma.app, Copilot, SlideGo
5. Nâng cao năng suất cá nhân:
Copilot, ExcelGPT, Notion AI, Taskade AI
(Giúp tăng hiệu quả công việc, làm báo cáo, lập kế hoạch)
B. NHÓM Thiết kế hình ảnh, video & thương hiệu cá nhân
6. Tạo hình ảnh sáng tạo:
MidJourney, DALL·E 3, Diffusion, OpenArt
7. Thiết kế đồ họa chuyên nghiệp:
Leonardo AI, Adobe Firefly, Designs AI
8. Chỉnh sửa ảnh nâng cao:
Remini, Canva AI, DeepImage
9. Tạo avatar & hình cá nhân hóa:
StarryAI, Fotor, Creatify
10. Xây dựng thương hiệu hình ảnh:
Looka, Brandmark, Logo AI
(Giúp phụ nữ tự tạo logo, nhận diện thương hiệu)
C. Sản xuất video & nhạc AI
11. Tạo video AI chuyên nghiệp:
Synthesia, HeyGen, VideoGen, TopView, Pictory
12. Tạo video ngắn TikTok/Reels:
Fliki, Steve. ai, Veed. io, Short
13. Chỉnh sửa video đơn giản – dễ dùng:
Capcut, Pictory, VideoGen
14. Sáng tác nhạc AI:
Soundraw, Suno, iLoveSong
15. Tạo podcast & giọng nói ảo:
ElevenLabs, Play. ht, Voicemaker
(Tạo nội dung podcast, video thuyết trình)
D. Dành cho lập trình & hệ thống
16. Viết mã code & lập trình:
Replit, Github Copilot, Codeium
17. Tạo chatbot AI:
Manychat, Chatbase, Botpress
(Phù hợp làm chăm sóc khách hàng tự động)
18. Phân tích dữ liệu & AI cho Excel:
SheetAI, MonkeyLearn, ExcelGPT
(Áp dụng cho công việc văn phòng & kế toán)
E. Công cụ tổng hợp đa năng
19. Tạo trang web & landing page:
Durable AI, 10Web, Framer AI
(Giúp kinh doanh online nhanh chóng)
20.  Hệ sinh thái AI đa năng (All-in-one):
Notion AI, Taskade, FlowGPT, AIToolsKit
(Kết hợp nhiều công cụ trong một nền tảng)

#dex #defi #flutter #javascript #ruby #swift #vue.js #decentralizedexchange #crypto #tech #software #decentralizedexchangedevelopment #cryptoexchange #cryptoexchangedevelopment #centralized #india #usa #uk #uae #australia #spain #russia #southkorea #pancakeswap #uniswap

Cryptocurrency Exchange Development Services

Dreaming of launching a cryptocurrency exchange? With Opris Cryptocurrency Exchange Development Services, you can bring that dream to life with a secure, scalable, and fully customizable platform that stands out in the crypto world.

🔹 Centralized & Decentralized Exchange Development
🔹 P2P & OTC Trading Solutions
🔹 Seamless Wallet Integration & Multi-Currency Support
🔹 High-Speed Order Matching Engine
🔹 Advanced Security Features – Protect Your Users
🔹 Regulatory Compliance – Expand Globally

Your exchange, your rules. Don’t miss out on the next big thing in crypto! 💡

#javascript #string

Deletes key after checking its existence in other data

  const validKeys = new Set(newVariables.map(v => v.name)); // Extracts valid keys from newVariables
  return Object.fromEntries(Object.entries(prev).filter(([key]) => validKeys.has(key))); // Removes invalid keys

#pancakeswap #uniswap #dex #defi #flutter #javascript #ruby #swift #vue.js #decentralizedexchange #crypto #tech #software #decentralizedexchangedevelopment

PancakeSwap Claims the #1 DEX Spot! Build a DEX Like PancakeSwap!

With a massive $14B+ weekly trading volume and a 58.04% growth surge, PancakeSwap has officially overtaken Uniswap as the leading decentralized exchange!

What’s driving its success? High liquidity & smooth trading Low fees & ultra-fast transactions Strong community-driven ecosystem

Looking to build a decentralized exchange like PancakeSwap? Contact Opris Decentralized Exchange Development Company and launch your own DEX today!

#php #javascript #mysql #css

Upwork Clone Website – Launch Your Own Freelance Marketplace

https://www.bestfreelancerscript.com/upwork-clone-script

#javascript #string

Sum of column values from the screen on console

[...document.querySelectorAll("#root > main > div > div:nth-child(2) > div:nth-child(2) > div.table-card > div > div.h-100 > div > div.p-datatable-wrapper > table > tbody > tr")].reduce((sum,row) => sum + (parseFloat(row.children[18]?.textContent.trim()) || 0), 0);

#javascript

Newsletter Js

jQuery('.wpens_email').attr('placeholder', 'Enter Email Address');
[wpens_easy_newsletter firstname="no" lastname="no" button_text="⟶"]

#javascript

Client Script: Get related records and show error message. Cancel Save action

console.log("Running client script");

var stage = ZDK.Page.getField("Stage").getValue();
console.log("Stage:", stage);
// Get the current record ID
var recordId = $Page.record_id;

console.log(recordId);


var booking = ZDK.Apps.CRM.Deals.fetchById(recordId);
var related_invoices = booking.__fetchRelatedRecords("Invoices");
console.log("Related Invoices: ",related_invoices);

for(var i=0; i< related_invoices.length; i++){
    log(related_invoices[i]);
    balance = related_invoices[i]._Balance;
    console.log("Balance: ", balance);
    if (balance > 0)
    {
        ZDK.Client.showAlert("Can not close the deal, we have outstanding balance in Invoices!");
        return false;
    }
}

var related_reservation = booking.__fetchRelatedRecords("Supplier_Reservation");
console.log("Related Suppliers: ",related_reservation);
for(var i=0; i< related_reservation.length; i++){
    log(related_reservation[i]);
    balance = related_reservation[i]._Balance_Due_2;
    console.log("Balance: ", balance);
    if (balance > 0)
    {
        ZDK.Client.showAlert("Can not close the deal, we have outstanding balance in Supplier Reservations!");
        return false;
    }
}

#html #css #javascript #mysql

SEO & Digital Marketing Experts – Whiz Marketers

In today’s digital landscape, having a strong online presence is essential for business success. At Whiz Marketers, we specialize in SEO and digital marketing strategies that drive traffic, enhance visibility, and increase conversions. Our expertise in search engine optimization, content marketing, social media, and paid advertising ensures that businesses of all sizes can achieve sustainable growth in the online marketplace.

Why SEO & Digital Marketing Matter

The internet is a crowded space, and standing out requires more than just a website. Businesses must actively engage with their audience, optimize their content for search engines, and leverage paid advertising for faster results. At Whiz Marketers, we help brands navigate the complexities of digital marketing with data-driven strategies that maximize return on investment (ROI).

Our SEO & Digital Marketing Services

We offer a full suite of SEO and digital marketing services tailored to your business needs. Our approach is centered around innovation, analytics, and continuous optimization to ensure the best possible results.

1. Search Engine Optimization (SEO)

SEO is the foundation of digital success. Our SEO experts use advanced techniques to improve your search rankings, drive organic traffic, and establish your brand as an authority in your industry. Our services include:
✔ Keyword research & competitive analysis✔ On-page SEO optimization✔ Technical SEO enhancements✔ Link-building & off-page SEO✔ Local SEO for businesses targeting specific regions✔ SEO audits & performance tracking

2. Pay-Per-Click Advertising (PPC)

Paid advertising is one of the fastest ways to generate leads and sales. Our PPC specialists create high-converting ad campaigns that maximize every dollar spent. Our services include:
✔ Google Ads & Bing Ads management✔ Social media advertising (Facebook, Instagram, LinkedIn, Twitter)✔ Display and remarketing campaigns✔ A/B testing and conversion rate optimization✔ Performance monitoring & reporting

3. Social Media Marketing (SMM)

A strong social media presence enhances brand awareness and fosters customer engagement. We create and manage campaigns that resonate with your audience and increase brand loyalty. Our services include:
✔ Social media strategy & management✔ Content creation & scheduling✔ Influencer marketing & collaborations✔ Paid social media advertising✔ Analytics & insights for growth

4. Content Marketing

Quality content is key to attracting and retaining customers. Our content marketing team creates engaging, SEO-optimized content that informs, educates, and converts. Our services include:
✔ Blog writing & website content✔ Video content & infographics✔ Email marketing campaigns✔ Thought leadership articles & case studies✔ Content strategy & distribution

5. Branding & Website Optimization

Your brand and website are the digital face of your business. We ensure that your brand identity and website design align with your marketing goals. Our services include:
✔ Logo design & brand identity development✔ Website design & UX/UI optimization✔ Mobile-friendly & SEO-optimized websites✔ Landing page creation for higher conversions✔ Performance tracking & analytics

Why Choose Whiz Marketers?

✅ Experienced Team: Our team of SEO and digital marketing experts has years of industry experience.✅ Data-Driven Approach: We analyze data to make informed decisions that improve marketing outcomes.✅ Customized Strategies: We tailor every marketing plan to fit your business goals and target audience.✅ Proven Results: Our clients see measurable improvements in search rankings, traffic, and conversions.✅ Transparent Communication: We provide clear insights and regular updates on campaign performance.

Grow Your Business with Whiz Marketers

If you're looking to improve your SEO rankings, boost brand awareness, or generate high-quality leads, Whiz Marketers is your go-to partner. We are passionate about helping businesses succeed in the competitive digital space with smart, results-driven marketing strategies.

Let’s take your business to new heights – Contact Whiz Marketers today!

Contact Us Today!

Website: https://www.whizmarketers.com/
Email: reachus@whizmarketers.com
Whatsapp: +91 73580 73949
Telegram: https://telegram.me/whizmarketers

#javascript

nrich script

    // Flag to prevent multiple script loads
    var nrichScriptLoaded = false;

    // Function to load the N.Rich script
    function loadNrichScript(cookielessMode) {
        if (nrichScriptLoaded) {
            console.log("N.Rich script already loaded.");
            return;
        }
        nrichScriptLoaded = true;
        console.log("Loading N.Rich script with cookieless mode:", cookielessMode);
        var config = {
            cookieless: cookielessMode,
        };
        !function(n,a,t,i,f,y){
            n[t]=n[t]||function(){(n[t].q=n[t].q||[]).push(arguments)},
            n[t].l=1*new Date,
            f=a.createElement(i),
            f.async=true,
            y=a.getElementsByTagName(i)[0],
            f.src='https://serve.nrich.ai/tracker/assets/tracker.js?nto='+t,
            y.parentNode.insertBefore(f,y)
        }(window,document,'nt','script');
        nt('load','1c53c9dc-268b-470e-8e18-b2dd2a63c5a3', config);
    }

    // Function to check consent and load the script accordingly
    function initializeNrich() {
        var consentGiven = cmplz_has_consent('marketing');
        console.log("Consent given:", consentGiven);
        if (consentGiven) {
            console.log("Consent given, loading N.Rich with cookies.");
            loadNrichScript(false); // cookieless: false
        } else {
            console.log("Consent not given, loading N.Rich in cookieless mode.");
            loadNrichScript(true); // cookieless: true
        }
    }

    // Run initialization on page load
    document.addEventListener("DOMContentLoaded", function() {
        initializeNrich();
    });

    // Update N.Rich when consent status changes
    document.addEventListener("cmplzConsentStatus", function (e) {
        console.log("Consent status changed:", e.detail);
        // Reset the flag to allow reloading the script
        nrichScriptLoaded = false;
        initializeNrich();
    });

#crypto #javascript #cryptoexchange #ruby #react.js #centralizedexchange #decentralizedexchange #web3 #django #python #cryptoexchangedevelopmentcompany #cryptotradingbot #cryptowallet #paymentgateway #cryptotoken #p2pexchange #cryptoderivatives #derivativesechange #blockchainbusinessideas #cryptobusinessideas #dex #cex #stablecoin #ai #aicryptobot #aibusinessideas #aibot #aichatbot #algo #algotradingsoftware #aicryptotradingbot #laravel #cryptotradingbotdevelopment #p2pcryptoexchangedevelopment #p2pexchangedevelopment #php #go #flask #nodejs #vue.js #swift #flutter

BRC20 Wallet Development

Dappfort specializes in BRC20 wallet development, providing businesses with a secure, scalable, and budget-friendly solution for managing BRC-20 tokens. Our development process focuses on optimizing costs while ensuring high security, seamless user experience, and robust functionality.

Key Features:

Affordable Development – Cost-effective solutions tailored to your business needs. 
Secure Asset Management – Advanced encryption and multi-signature security. 
Seamless Transactions – Fast and efficient token transfers on the Bitcoin blockchain. 
User-Friendly Interface – Intuitive design for hassle-free access. 
Scalability & Customization – Adaptable to evolving market demands.

At Dappfort, we ensure your BRC20 wallet is built with cutting-edge technology while keeping development costs under control.

Get in touch to develop a cost-effective BRC20 wallet today!

Instant Reach Experts: 
Visit us : https://www.dappfort.com/cryptocurrency-wallet-development-company/ 
Contact : +91 8838534884 
Mail : sales@dappfort.com

#crypto #javascript #cryptoexchange #ruby #react.js #centralizedexchange #decentralizedexchange #web3 #django #python #cryptoexchangedevelopmentcompany #cryptotradingbot #cryptowallet #paymentgateway #cryptotoken #p2pexchange #cryptoderivatives #derivativesechange #blockchainbusinessideas #cryptobusinessideas #dex #cex #stablecoin #ai #aicryptobot #aibusinessideas #aibot #aichatbot #algo #algotradingsoftware #aicryptotradingbot #laravel #cryptotradingbotdevelopment #p2pcryptoexchangedevelopment #p2pexchangedevelopment #php #go #flask #nodejs #vue.js #swift #flutter

USDT TRC20 Wallet Development

Whether you’re an entrepreneur, trader, or exchange owner, a secure & efficient USDT TRC20 wallet is a must! 💼 Dappfort provides custom-built wallets with TRON blockchain speed, low fees, and top security to keep your funds safe. 

Visit : https://www.dappfort.com/blog/usdt-trc20-wallet/

#crypto #javascript #cryptoexchange #ruby #react.js #centralizedexchange #decentralizedexchange #web3 #django #python #cryptoexchangedevelopmentcompany #cryptotradingbot #cryptowallet #paymentgateway #cryptotoken #p2pexchange #cryptoderivatives #derivativesechange #blockchainbusinessideas #cryptobusinessideas #dex #cex #stablecoin #ai #aicryptobot #aibusinessideas #aibot #aichatbot #algo #algotradingsoftware #aicryptotradingbot #laravel #cryptotradingbotdevelopment #p2pcryptoexchangedevelopment #p2pexchangedevelopment #php

P2P Crypto Exchange Development Company

DappFort delivers world-class P2P crypto exchange development, helping businesses enter the digital asset market with confidence. Our platforms feature advanced matching engines, dispute resolution, and AI-driven analytics for seamless trading. With multi-currency and multi-payment support, we enhance user accessibility. Get started today and dominate the crypto exchange industry!

Instant Reach Experts: 
Visit us : https://www.dappfort.com/cryptocurrency-exchange-development-company/
Contact : +91 8838534884 
Mail : sales@dappfort.com

#crypto #javascript #cryptoexchange #ruby #react.js #centralizedexchange #decentralizedexchange #web3 #django #python #cryptoexchangedevelopmentcompany #cryptotradingbot #cryptowallet #paymentgateway #cryptotoken #p2pexchange #cryptoderivatives #derivativesechange #blockchainbusinessideas #cryptobusinessideas #dex #cex #stablecoin #ai #aicryptobot #aibusinessideas #aibot #aichatbot #algo #algotradingsoftware #aicryptotradingbot #laravel #cryptotradingbotdevelopment

Crypto Trading Bot development Company

Maximize your crypto gains with Dappfort high-performance Crypto Trading Bot Development services. Our bots integrate with major exchanges, use AI-driven strategies, and provide real-time analytics. Trade smarter, faster, and with reduced risks. Let’s build your profit-generating trading bot now!

Instant Reach Experts:

Contact : +91 8838534884 
Mail : sales@dappfort.com

#crypto #javascript #cryptoexchange #ruby #react.js #centralizedexchange #decentralizedexchange #web3 #django #python #cryptoexchangedevelopmentcompany #cryptotradingbot #cryptowallet #paymentgateway #cryptotoken #p2pexchange #cryptoderivatives #derivativesechange #blockchainbusinessideas #cryptobusinessideas #dex #cex #stablecoin #ai #aicryptobot #aibusinessideas #aibot #aichatbot #algo #algotradingsoftware

Algo Trading Software Development

Transform your trading experience with our powerful Algo Trading Software Development solutions. Our AI-powered algorithms analyze market trends, execute trades with precision, and minimize risks. Whether for crypto, forex, or stocks, we deliver high-performance automation. Boost your profits with algorithmic trading—get started now!
  
Visit us : https://www.dappfort.com/blog/algo-trading-software-development/   

Instant Reach Experts:

Contact : +91 8838534884 
Mail : sales@dappfort.com

#crypto #javascript #cryptoexchange #ruby #react.js #centralizedexchange #decentralizedexchange #web3 #django #python #cryptoexchangedevelopmentcompany #cryptotradingbot #cryptowallet #paymentgateway #cryptotoken #p2pexchange #cryptoderivatives #derivativesechange #blockchainbusinessideas #cryptobusinessideas #dex #cex #stablecoin #ai #aicryptobot #aibusinessideas #aibot #aichatbot

AI Boom: 15 Startup Ideas That Can Make You a Millionaire in 2025!

Wow! The future is here, and AI is your golden ticket to success! From mind-blowing automation to game-changing AI solutions, the opportunities are limitless. Imagine building a business that runs on innovation, scales effortlessly, and generates massive profits!

Ready to ride the AI wave and turn your vision into reality? The time to start is NOW! 
  
Visit : https://www.dappfort.com/blog/ai-business-ideas/

Instant Reach Experts:

Visit us :  https://www.dappfort.com/cryptocurrency-exchange-development-company/      
Contact : +91 8838534884
Mail : sales@dappfort.com

#javascript

Prevents kaggle from exiting due to inactivity

document.addEventListener("visibilitychange", function(event) {
    Object.defineProperty(document, "hidden", { value: false, configurable: true });
    Object.defineProperty(document, "visibilityState", { value: "visible", configurable: true });
});

#java #javascript #django #react.js #angular #android #asp.net

What are the Key Features to Look for in a Bybit Clone Script

https://www.trioangle.com/bybit-clone-script/

#javascript

Lagence Size System tracking

    (() => {
        let selectedSizeSystem = null; // Global variable to store selected size system
    
        // Main mouseup handler
        const handleMouseUp = (event) => {
            const target = event.target;
    
            // Check if target or its parent has the js-size-selector attribute
            const sizeSelector = target.closest('[js-size-selector]');
            if (!sizeSelector) return;
    
            const newSizeSystem = sizeSelector.innerText.trim();
    
            // Only update and call updateProductContext if the size system changed
            if (selectedSizeSystem !== newSizeSystem) {
                selectedSizeSystem = newSizeSystem;
                console.log('Size system selector changed:', { text: selectedSizeSystem });
    
                // Call updateProductContext whenever the size system changess
                updateProductContext();
            }
        };
    
        // Use capture phase to ensure we get the mouseup before preventDefault
        document.addEventListener('mouseup', handleMouseUp, true);
    
        // Expose a function to get the selected size system
        window.getSelectedSizeSystem = () => selectedSizeSystem;
    })();

#crypto #javascript #cryptoexchange #ruby #react.js #centralizedexchange #decentralizedexchange #web3 #django #python #cryptoexchangedevelopmentcompany #cryptotradingbot #cryptowallet #paymentgateway #cryptotoken #p2pexchange #cryptoderivatives #derivativesechange #blockchainbusinessideas #cryptobusinessideas #dex #cex #stablecoin

Stablecoin Development Company

💰 Launch Your Own Stablecoin with Confidence!

Enter the world of stable digital assets with a secure, transparent, and fully customizable stablecoin development solution.

✅ Fiat-pegged, crypto-collateralized, or algorithmic stablecoins
✅ Regulatory-compliant & highly secure
✅ Seamless integration with wallets & exchanges
✅ Built for scalability & global transactions

🚀 Power up your crypto ecosystem with Dappfort – The Trusted Stablecoin Development Company!
  
Instant Reach Experts:
Contact : +91 8838534884
Mail : sales@dappfort.com

#crypto #javascript #cryptoexchange #ruby #react.js #centralizedexchange #decentralizedexchange #web3 #django #python #cryptoexchangedevelopmentcompany #cryptotradingbot #cryptowallet #paymentgateway #cryptotoken #p2pexchange #cryptoderivatives #derivativesechange #blockchainbusinessideas #cryptobusinessideas #dex #cex

Decentralized exchange development company

At Dappfort, a leading decentralized exchange development company, we provide end-to-end solutions to build high-performance DEX platforms. Our expertise ensures seamless trading, advanced security, and optimized scalability, empowering businesses to launch future-ready decentralized exchanges.

Instant Reach Experts:
Contact : +91 8838534884
Mail : sales@dappfort.com

#crypto #javascript #cryptoexchange #ruby #react.js #centralizedexchange #decentralizedexchange #web3 #django #python #cryptoexchangedevelopmentcompany #cryptotradingbot #cryptowallet #paymentgateway #cryptotoken #p2pexchange #cryptoderivatives #derivativesechange #blockchainbusinessideas #cryptobusinessideas

Top 15 Blockchain Business Ideas for 2025!

🚀 The Future of Blockchain Business in 2025!

Blockchain is no longer just about crypto—it’s opening doors to groundbreaking business opportunities! From DeFi platforms to tokenized assets, new ventures are reshaping industries and creating endless possibilities.

Want to know which blockchain business ideas will dominate 2025? We've got 15 game-changing ideas that could be your next big move!

Don't miss out

Instant Reach Experts:

Contact : +91 8838534884
Mail : sales@dappfort.com

#crypto #javascript #cryptoexchange #ruby #react.js #centralizedexchange #decentralizedexchange #web3 #django #python #cryptoexchangedevelopmentcompany #cryptotradingbot #cryptowallet #paymentgateway #cryptotoken #p2pexchange #cryptoderivatives #derivativesechange

Cryptocurrency Exchange Development Company

Dappfort is a leading cryptocurrency exchange development company committed to delivering high-quality, secure, and scalable trading platforms. With a strong focus on customer satisfaction, we have successfully developed and deployed various types of crypto exchanges tailored to our clients unique requirements. Our expert team ensures top-tier security, privacy, and reliability, fostering trust between business owners and their users. By leveraging our advanced cryptocurrency exchange solutions, including P2P trading and Bitcoin exchange systems, businesses can offer a seamless and highly secure trading experience. To explore how Dappfort can help you build a robust crypto exchange, schedule a consultation with our blockchain experts today.

Instant Reach Experts:

Visit us :  https://www.dappfort.com/cryptocurrency-exchange-development-company/      
Contact : +91 8838534884
Mail : sales@dappfort.com

#java #javascript #django #nodejs #react.js #css

Why Cryptocurrency Exchange Script as a business venture?

Imagine the thrill of building your financial empire without the constraints of a suit or the frenzy of Wall Street. 

	Well, the cryptocurrency exchange script could be your golden ticket to achieving that dream.

	Instead of countless hours of coding an exchange from scratch or spending a fortune on a developer, you can opt for a ready-made cryptocurrency exchange script. This allows you to set up your crypto trading platform quickly.

	It’s hassle-free so connect easily. Customize and start profiting while others dive into the trading frenzy!

Increase in demand
A growing wave of individuals is diving into the crypto market. Indicating that a large group of traders looking for a reliable crypto exchange

Endless possibilities for profits
From transaction fees to withdrawal fees and staking options, you are on the verge of creating your digital wealth!

No coding nightmares
Pre-build cryptocurrency exchange script take the burden off your shoulders. Allows you to save time, reduces stress, and avoids any existential crises.

	Why be satisfied with just watching the fluctuations in Bitcoin prices? Dive in and reap the benefits!

	Start your crypto exchange and get an exciting crypto wave of success.

	Who knows? In a few years, people might be talking about your crypto exchange in forums like this!
      
Website: https://www.trioangle.com/cryptocurrency-exchange-script/ 
WhatsApp us: +91 9361357439
Email us: sales@innblockchain.com

#javascript

javascript - I tried to request body json to node js using await fetch the body is empty - Stack Overflow

const req = await fetch(
    "http://localhost:3000/api/auth/signin", {
      method: "POST",
      header:{
        'Accept':'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username:myusername,
        password:mypassword
      })
    },
    
  )

#javascript

i d k

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="background"></div>
    <img class="bird" src="logo.png" alt="bird-img">
    <div class="message">
        Press Enter To Start Game
    </div>
    <div class="score">
        <span class="score_title"></span>
        <span class="score_val"></span>
    </div>
    <script src="gfg.js"></script>
</body>

</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100vw;
}

.background {
    height: 100vh;
    width: 100vw;
    background-color: skyblue;
}

.bird {
    height: 100px;
    width: 160px;
    position: fixed;
    top: 40vh;
    left: 30vw;
    z-index: 100;
}

.pipe_sprite {
    position: fixed;
    top: 40vh;
    left: 100vw;
    height: 70vh;
    width: 6vw;
    background-color: green;
}

.message {
    position: fixed;
    z-index: 10;
    height: 10vh;
    font-size: 10vh;
    font-weight: 100;
    color: black;
    top: 12vh;
    left: 20vw;
    text-align: center;
}

.score {
    position: fixed;
    z-index: 10;
    height: 10vh;
    font-size: 10vh;
    font-weight: 100;
    color: goldenrod;
    top: 0;
    left: 0;
}

.score_val {
    color: gold;
}
// Background scrolling speed
let move_speed = 3;
  
// Gravity constant value
let gravity = 0.5;
  
// Getting reference to the bird element
let bird = document.querySelector('.bird');
  
// Getting bird element properties
let bird_props = bird.getBoundingClientRect();
let background =
    document.querySelector('.background')
            .getBoundingClientRect();
  
// Getting reference to the score element
let score_val =
    document.querySelector('.score_val');
let message =
    document.querySelector('.message');
let score_title =
    document.querySelector('.score_title');
  
// Setting initial game state to start
let game_state = 'Start';
  
// Add an eventlistener for key presses
document.addEventListener('keydown', (e) => {
  
  // Start the game if enter key is pressed
  if (e.key == 'Enter' &&
      game_state != 'Play') {
    document.querySelectorAll('.pipe_sprite')
              .forEach((e) => {
      e.remove();
    });
    bird.style.top = '40vh';
    game_state = 'Play';
    message.innerHTML = '';
    score_title.innerHTML = 'Score : ';
    score_val.innerHTML = '0';
    play();
  }
});
function play() {
  function move() {
    
    // Detect if game has ended
    if (game_state != 'Play') return;
    
    // Getting reference to all the pipe elements
    let pipe_sprite = document.querySelectorAll('.pipe_sprite');
    pipe_sprite.forEach((element) => {
      
      let pipe_sprite_props = element.getBoundingClientRect();
      bird_props = bird.getBoundingClientRect();
      
      // Delete the pipes if they have moved out
      // of the screen hence saving memory
      if (pipe_sprite_props.right <= 0) {
        element.remove();
      } else {
        // Collision detection with bird and pipes
        if (
          bird_props.left < pipe_sprite_props.left +
          pipe_sprite_props.width &&
          bird_props.left +
          bird_props.width > pipe_sprite_props.left &&
          bird_props.top < pipe_sprite_props.top +
          pipe_sprite_props.height &&
          bird_props.top +
          bird_props.height > pipe_sprite_props.top
        ) {
          
          // Change game state and end the game
          // if collision occurs
          game_state = 'End';
          message.innerHTML = 'Press Enter To Restart';
          message.style.left = '28vw';
          return;
        } else {
          // Increase the score if player
          // has the successfully dodged the 
          if (
            pipe_sprite_props.right < bird_props.left &&
            pipe_sprite_props.right + 
            move_speed >= bird_props.left &&
            element.increase_score == '1'
          ) {
            score_val.innerHTML = +score_val.innerHTML + 1;
          }
          element.style.left = 
            pipe_sprite_props.left - move_speed + 'px';
        }
      }
    });

    requestAnimationFrame(move);
  }
  requestAnimationFrame(move);

  let bird_dy = 0;
  function apply_gravity() {
    if (game_state != 'Play') return;
    bird_dy = bird_dy + gravity;
    document.addEventListener('keydown', (e) => {
      if (e.key == 'ArrowUp' || e.key == ' ') {
        bird_dy = -7.6;
      }
    });

    // Collision detection with bird and
    // window top and bottom

    if (bird_props.top <= 0 ||
        bird_props.bottom >= background.bottom) {
      game_state = 'End';
      message.innerHTML = 'Press Enter To Restart';
      message.style.left = '28vw';
      return;
    }
    bird.style.top = bird_props.top + bird_dy + 'px';
    bird_props = bird.getBoundingClientRect();
    requestAnimationFrame(apply_gravity);
  }
  requestAnimationFrame(apply_gravity);

  let pipe_seperation = 0;
  
  // Constant value for the gap between two pipes
  let pipe_gap = 35;
  function create_pipe() {
    if (game_state != 'Play') return;
    
    // Create another set of pipes
    // if distance between two pipe has exceeded
    // a predefined value
    if (pipe_seperation > 115) {
      pipe_seperation = 0
      
      // Calculate random position of pipes on y axis
      let pipe_posi = Math.floor(Math.random() * 43) + 8;
      let pipe_sprite_inv = document.createElement('div');
      pipe_sprite_inv.className = 'pipe_sprite';
      pipe_sprite_inv.style.top = pipe_posi - 70 + 'vh';
      pipe_sprite_inv.style.left = '100vw';
      
      // Append the created pipe element in DOM
      document.body.appendChild(pipe_sprite_inv);
      let pipe_sprite = document.createElement('div');
      pipe_sprite.className = 'pipe_sprite';
      pipe_sprite.style.top = pipe_posi + pipe_gap + 'vh';
      pipe_sprite.style.left = '100vw';
      pipe_sprite.increase_score = '1';
      
      // Append the created pipe element in DOM
      document.body.appendChild(pipe_sprite);
    }
    pipe_seperation++;
    requestAnimationFrame(create_pipe);
  }
  requestAnimationFrame(create_pipe);
}

#javascript

i d k

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="background"></div>
    <img class="bird" src="logo.png" alt="bird-img">
    <div class="message">
        Press Enter To Start Game
    </div>
    <div class="score">
        <span class="score_title"></span>
        <span class="score_val"></span>
    </div>
    <script src="gfg.js"></script>
</body>

</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100vw;
}

.background {
    height: 100vh;
    width: 100vw;
    background-color: skyblue;
}

.bird {
    height: 100px;
    width: 160px;
    position: fixed;
    top: 40vh;
    left: 30vw;
    z-index: 100;
}

.pipe_sprite {
    position: fixed;
    top: 40vh;
    left: 100vw;
    height: 70vh;
    width: 6vw;
    background-color: green;
}

.message {
    position: fixed;
    z-index: 10;
    height: 10vh;
    font-size: 10vh;
    font-weight: 100;
    color: black;
    top: 12vh;
    left: 20vw;
    text-align: center;
}

.score {
    position: fixed;
    z-index: 10;
    height: 10vh;
    font-size: 10vh;
    font-weight: 100;
    color: goldenrod;
    top: 0;
    left: 0;
}

.score_val {
    color: gold;
}
// Background scrolling speed
let move_speed = 3;
  
// Gravity constant value
let gravity = 0.5;
  
// Getting reference to the bird element
let bird = document.querySelector('.bird');
  
// Getting bird element properties
let bird_props = bird.getBoundingClientRect();
let background =
    document.querySelector('.background')
            .getBoundingClientRect();
  
// Getting reference to the score element
let score_val =
    document.querySelector('.score_val');
let message =
    document.querySelector('.message');
let score_title =
    document.querySelector('.score_title');
  
// Setting initial game state to start
let game_state = 'Start';
  
// Add an eventlistener for key presses
document.addEventListener('keydown', (e) => {
  
  // Start the game if enter key is pressed
  if (e.key == 'Enter' &&
      game_state != 'Play') {
    document.querySelectorAll('.pipe_sprite')
              .forEach((e) => {
      e.remove();
    });
    bird.style.top = '40vh';
    game_state = 'Play';
    message.innerHTML = '';
    score_title.innerHTML = 'Score : ';
    score_val.innerHTML = '0';
    play();
  }
});
function play() {
  function move() {
    
    // Detect if game has ended
    if (game_state != 'Play') return;
    
    // Getting reference to all the pipe elements
    let pipe_sprite = document.querySelectorAll('.pipe_sprite');
    pipe_sprite.forEach((element) => {
      
      let pipe_sprite_props = element.getBoundingClientRect();
      bird_props = bird.getBoundingClientRect();
      
      // Delete the pipes if they have moved out
      // of the screen hence saving memory
      if (pipe_sprite_props.right <= 0) {
        element.remove();
      } else {
        // Collision detection with bird and pipes
        if (
          bird_props.left < pipe_sprite_props.left +
          pipe_sprite_props.width &&
          bird_props.left +
          bird_props.width > pipe_sprite_props.left &&
          bird_props.top < pipe_sprite_props.top +
          pipe_sprite_props.height &&
          bird_props.top +
          bird_props.height > pipe_sprite_props.top
        ) {
          
          // Change game state and end the game
          // if collision occurs
          game_state = 'End';
          message.innerHTML = 'Press Enter To Restart';
          message.style.left = '28vw';
          return;
        } else {
          // Increase the score if player
          // has the successfully dodged the 
          if (
            pipe_sprite_props.right < bird_props.left &&
            pipe_sprite_props.right + 
            move_speed >= bird_props.left &&
            element.increase_score == '1'
          ) {
            score_val.innerHTML = +score_val.innerHTML + 1;
          }
          element.style.left = 
            pipe_sprite_props.left - move_speed + 'px';
        }
      }
    });

    requestAnimationFrame(move);
  }
  requestAnimationFrame(move);

  let bird_dy = 0;
  function apply_gravity() {
    if (game_state != 'Play') return;
    bird_dy = bird_dy + gravity;
    document.addEventListener('keydown', (e) => {
      if (e.key == 'ArrowUp' || e.key == ' ') {
        bird_dy = -7.6;
      }
    });

    // Collision detection with bird and
    // window top and bottom

    if (bird_props.top <= 0 ||
        bird_props.bottom >= background.bottom) {
      game_state = 'End';
      message.innerHTML = 'Press Enter To Restart';
      message.style.left = '28vw';
      return;
    }
    bird.style.top = bird_props.top + bird_dy + 'px';
    bird_props = bird.getBoundingClientRect();
    requestAnimationFrame(apply_gravity);
  }
  requestAnimationFrame(apply_gravity);

  let pipe_seperation = 0;
  
  // Constant value for the gap between two pipes
  let pipe_gap = 35;
  function create_pipe() {
    if (game_state != 'Play') return;
    
    // Create another set of pipes
    // if distance between two pipe has exceeded
    // a predefined value
    if (pipe_seperation > 115) {
      pipe_seperation = 0
      
      // Calculate random position of pipes on y axis
      let pipe_posi = Math.floor(Math.random() * 43) + 8;
      let pipe_sprite_inv = document.createElement('div');
      pipe_sprite_inv.className = 'pipe_sprite';
      pipe_sprite_inv.style.top = pipe_posi - 70 + 'vh';
      pipe_sprite_inv.style.left = '100vw';
      
      // Append the created pipe element in DOM
      document.body.appendChild(pipe_sprite_inv);
      let pipe_sprite = document.createElement('div');
      pipe_sprite.className = 'pipe_sprite';
      pipe_sprite.style.top = pipe_posi + pipe_gap + 'vh';
      pipe_sprite.style.left = '100vw';
      pipe_sprite.increase_score = '1';
      
      // Append the created pipe element in DOM
      document.body.appendChild(pipe_sprite);
    }
    pipe_seperation++;
    requestAnimationFrame(create_pipe);
  }
  requestAnimationFrame(create_pipe);
}

#javascript

node server - Google Search

/* ====== create node.js server with core 'http' module ====== */
// dependencies
const http = require("http");

// PORT
const PORT = 3000;

// server create
const server = http.createServer((req, res) => {
   if (req.url === "/") {
      res.write("This is home page.");
      res.end();
   } else if (req.url === "/about" && req.method === "GET") {
      res.write("This is about page.");
      res.end();
   } else {
      res.write("Not Found!");
      res.end();
   }
});

// server listen port
server.listen(PORT);

console.log(`Server is running on PORT: ${PORT}`);

/* ========== *** ========== */

/* ====== create node.js server with express.js framework ====== */
// dependencies
const express = require("express");

const app = express();

app.get("/", (req, res) => {
   res.send("This is home page.");
});

app.post("/", (req, res) => {
   res.send("This is home page with post request.");
});

// PORT
const PORT = 3000;

app.listen(PORT, () => {
   console.log(`Server is running on PORT: ${PORT}`);
});


// ======== Instructions ========
// save this as index.js
// you have to download and install node.js on your machine
// open terminal or command prompt
// type node index.js
// find your server at http://localhost:3000

#javascript

fetchMovies function

const fetchMovies = async () => {
    // set the loading state to true so the loading indicator is displayed as soon as the function is called
    setIsLoading(true); 

    try { 
      // endpoint for fetching movies and sorting them by popularity (descending)
      const endpoint = `${API_BASE_URL}/discover/movie?sort_by=popularity.desc`;  
      // calling the endpoint with the API options
      const response = await fetch(endpoint, API_OPTIONS);
      // parsing the response into a json object
      if (!response.ok) {
        throw new Error('Failed to fetch movies');
      }
      const data = await response.json(); // if successful response, parse the data
      console.log(data); // just to see what we get from the API (over 48000 pages and almost a million movies)

      // if we get no response, set the error message, and set the movies state to an empty array
      if(data.Response === 'False') {
        setErrorMessage(data.Error || 'Failed to fetch movies');
        setMovies([]);
        return; // exit out of the function
      }

      // if we get a response, set the movies state with the fetched data
      setMovies(data.results || []);

      /*
      The empty array in `setMovies(data.results || [])` ensures that the `movies` state is always set to a valid array,  
      even if the API response does not include the expected `results` property or if it is `null` or `undefined`.
      */

    } catch (error) {
      console.error(`Error while fetching movies: ${error}`);
      setErrorMessage('An error occurred while fetching movies. Please try again later.');

    } finally {
      // set the loading state to false after the fetch is complete (whether successful or not)
      setIsLoading(false);
    }
  }

#html #css #javascript

page d'inscription

- 👋 Hi, I’m @BAHATI44
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Inscription BuloMED">
    <meta name="keywords" content="inscription, BuloMED, santé">
    <meta name="author" content="Salomo B.M">
    <title>Inscription BuloMED</title>
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
    <link rel="icon" type="image/png" sizes="32x32" href="BuloMED.PNG">
    <!-- Sécurité supplémentaire -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' https: 'unsafe-inline' 'unsafe-eval';">
    <meta http-equiv="X-Content-Type-Options" content="nosniff">
    <meta http-equiv="X-Frame-Options" content="DENY">

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        
        .form-wrapper {
            position: relative;
            padding: 5px;
            border-radius: 15px;
            background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff, #ff00ff, #ffff00);
            background-size: 200% 200%;
            animation: gradientAnimation 3s ease infinite;
            display: flex;
        }
        /* Exemple de media queries pour petits écrans */
        
        @media (max-width: 600px) {
            .form-container {
                width: 90%;
                /* Utiliser une largeur en pourcentage pour s'adapter */
                max-width: none;
                /* Supprimer la limite fixe */
                padding: 10px;
                /* Réduire les espaces si nécessaire */
            }
            .form-group input {
                width: 100%;
                /* Assurer que les inputs prennent toute la largeur disponible */
                font-size: 1rem;
                /* Ajuster la taille de police pour plus de lisibilité */
            }
            .button-container {
                flex-direction: column;
                /* Sur petits écrans, empiler les boutons */
                gap: 5px;
            }
        }
        /* Optionnel : règles pour les écrans moyens */
        
        @media (min-width: 601px) and (max-width: 1024px) {
            .form-container {
                width: 80%;
                padding: 12px;
            }
            .form-group input {
                font-size: 1.1rem;
            }
        }
        
        @keyframes gradientAnimation {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        
        .form-container {
            background-color: #7b7c7c;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 350px;
            position: relative;
            z-index: 1;
        }
        
        .form-container h2 {
            text-align: center;
            margin-bottom: 25px;
            color: #fff;
        }
        
        .form-group {
            margin-bottom: 15px;
            position: relative;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        
        .form-group input {
            width: 95%;
            padding: 10px;
            border: 2px solid #ccc;
            border-radius: 8px;
        }
        
        .password-toggle {
            position: absolute;
            right: 10px;
            top: 35px;
            cursor: pointer;
        }
        
        .loading-spinner {
            display: none;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #4CAF50;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        /* Nouveau style pour aligner les boutons côte à côte */
        
        .button-container {
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }
        
        .button-container button {
            flex: 1;
        }
        /* Style du popup de succès */
        
        .success-popup {
            display: none;
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
    </style>
</head>

<body>
    <div class="form-wrapper">
        <div class="form-container">
            <h2>Inscription</h2>
            <form id="registrationForm">
                <div class="form-group">
                    <label for="username">Nom d'utilisateur</label>
                    <input type="text" id="username" name="username" maxlength="50" placeholder="Saisir le nom D'utilisateur" required>
                    <div class="error" id="usernameError"></div>
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" maxlength="50" placeholder="Saisir l'Email" required>
                    <div class="error" id="emailError"></div>
                </div>
                <div class="form-group">
                    <label for="password">Mot de passe</label>
                    <input type="password" id="password" name="password" maxlength="50" placeholder="Saisir Votre Mot de Passe" required>
                    <i class="fa fa-eye password-toggle" id="togglePassword"></i>
                    <div class="password-strength" id="passwordStrength"></div>
                    <div class="error" id="passwordError"></div>
                </div>
                <div class="form-group">
                    <label for="phone">Numéro de téléphone</label>
                    <input type="tel" id="phone" name="phone" maxlength="13" required>
                    <div class="error" id="phoneError"></div>
                </div>
                <!-- Conteneur pour les deux boutons -->
                <div class="button-container">
                    <button type="submit">
                        <span class="button-text">S'inscrire</span>
                        <div class="loading-spinner"></div>
                    </button>
                    <button type="button" id="loginButton">Se connecter</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Popup de succès -->
    <div id="successPopup" class="success-popup">Connexion réussie !</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
    <script>
        // Empêcher le clic droit pour bloquer l'accès au menu contextuel
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
            return false;
        });

        // Bloquer les raccourcis clavier (Ctrl+Shift+I, Ctrl+U, F12, etc.)
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey || e.keyCode === 123 || e.keyCode === 85) {
                e.preventDefault();
                return false;
            }
        });

        // Détection des outils de développement
        setInterval(function() {
            if (window.outerWidth - window.innerWidth > 100 ||
                window.outerHeight - window.innerHeight > 100) {
                window.location.href = "about:blank";
            }
        }, 1000);

        // Empêcher la sélection de texte
        document.body.style.userSelect = 'none';
        document.body.style.webkitUserSelect = 'none';

        // Initialisation des éléments du formulaire
        document.addEventListener('DOMContentLoaded', function() {
            const phoneInput = document.getElementById('phone');
            const passwordInput = document.getElementById('password');
            const passwordStrength = document.getElementById('passwordStrength');
            const togglePassword = document.getElementById('togglePassword');
            const form = document.getElementById('registrationForm');
            const loginButton = document.getElementById('loginButton');
            const successPopup = document.getElementById('successPopup');

            // Initialisation du sélecteur de numéro de téléphone
            if (window.intlTelInput) {
                const iti = window.intlTelInput(phoneInput, {
                    initialCountry: "auto",
                    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
                });
            } else {
                console.error("intlTelInput library is not loaded correctly.");
            }

            // Vérification de la force du mot de passe
            passwordInput.addEventListener('input', function() {
                const hasMixedCase = /(?=.*[a-z])(?=.*[A-Z])/.test(this.value);
                const hasNumbers = /\d/.test(this.value);
                const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(this.value);
                if (hasMixedCase && hasNumbers && hasSpecial) {
                    passwordStrength.className = 'password-strength strong';
                } else if ((hasMixedCase && hasNumbers) || (hasNumbers && hasSpecial)) {
                    passwordStrength.className = 'password-strength medium';
                } else {
                    passwordStrength.className = 'password-strength weak';
                }
            });

            // Basculer la visibilité du mot de passe
            togglePassword.addEventListener('click', function() {
                const type = passwordInput.type === 'password' ? 'text' : 'password';
                passwordInput.type = type;
                this.classList.toggle('fa-eye-slash');
            });

            // Gestion de la soumission du formulaire
            form.addEventListener('submit', function(event) {
                event.preventDefault();
                const button = form.querySelector('button[type="submit"]');
                button.disabled = true;
                button.querySelector('.loading-spinner').style.display = 'inline-block';
                button.querySelector('.button-text').textContent = 'Traitement...';

                // Simuler un traitement de 1,5 seconde
                setTimeout(() => {
                    button.querySelector('.loading-spinner').style.display = 'none';
                    button.disabled = false;
                    button.querySelector('.button-text').textContent = 'S\'inscrire';

                    // Afficher le popup de succès
                    successPopup.style.display = 'block';
                    setTimeout(() => {
                        successPopup.style.display = 'none';
                    }, 3000);

                    // Redirection vers la page d'accueil après 3 secondes
                    setTimeout(() => {
                        window.location.href = 'accueil.html';
                    }, 3000);
                }, 1500);
            });

            // Navigation vers la page de connexion
            loginButton.addEventListener('click', function() {
                window.location.href = 'connexion.html';
            });
        });
    </script>
</body>

</html>

#javascript

AP PT CodePrint | Print Code

var difficulty = 15;
var correctSquare;
var p1Score = 0;
var p2Score = 0;
var currentPlayer = 1;

function updateScore(scoreChange){
  if(currentPlayer == 1){
    p1Score += scoreChange;
    setText("score1", p1Score);
  }
  else{
    p2Score += scoreChange;
    setText("score2", p2Score);
  }
}

#javascript

emoji-picker-element

https://nolanlawson.github.io/emoji-picker-element/

#java #javascript #django #nodejs #react.js #css

Future Trading Clone Script

https://www.trioangle.com/future-trading-clone-script/

#java #javascript #django #nodejs #react.js #css

Paxful Clone Script

https://www.trioangle.com/paxful-clone/

#java #javascript #django #nodejs #css

P2P Cryptocurrency Exchange Script

https://www.trioangle.com/p2p-cryptocurrency-exchange-script/

#javascript #java #django #angular #android #css

WazirX Clone Script: A Tool To Create Your Secure Cryptocurrency Exchange Platform

https://www.trioangle.com/wazirx-clone-script/

#django #nodejs #angular #android #javascript #css

Dominate the Crypto Market with Cryptocurrency Exchange Script

https://www.trioangle.com/cryptocurrency-exchange-script/

#css #javascript #django #android

Establish Your Lucrative Crypto Business With Bybit Clone Script

https://www.trioangle.com/bybit-clone-script/

#javascript

Splide JS - On Page Initialization

<!-- Include Splide CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">

<!-- Splide JS Markup -->
  
<div class="splide">
    <div class="splide__track">
        <div class="splide__list">
            <div class="splide__slide"></div>
        </div>
    </div>
</div>
<!-- Include Splide JS -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

<!-- Initialize Splide -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  new Splide('.splide', {
    type: 'slide',
    perPage: 4,
    //perMove: 1,
    gap: '0',
    pagination: false,
    arrows: false,
    drag: true,
    breakpoints: {
      1024: {
        perPage: 3,
      },
      768: {
        perPage: 2,
      },
      480: {
        perPage: 1,
      }
    }
  }).mount();
});
</script>

#js #javascript #html

Darkmode JS Library within HTML [HTML/JS LIBRARY]

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
    const options = {
      label: '🌓',
      saveInCookies: false,
      autoMatchOsTheme: false,
       time: '1s'
    }
    function addDarkmodeWidget() {
      new Darkmode(options).showWidget();
    }
    window.addEventListener('load', addDarkmodeWidget);
</script>

#js #javascript

HTML Form to google sheet (JS/Google Scripts)

const sheetName = 'Sheet1'
const scriptProp = PropertiesService.getScriptProperties()

function initialSetup () {
  const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  const lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    const sheet = doc.getSheetByName(sheetName)

    const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    const nextRow = sheet.getLastRow() + 1

    const newRow = headers.map(function(header) {
      return header === 'Date' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

#javascript

Bracket Matcher

function BracketMatcher(str) {
  const stack = []; // Create an empty stack to keep track of opening brackets
  for (let i = 0; i < str.length; i++) { // Loop through each character in the input string
    if (str[i] === '(') { // If the character is an opening bracket
      stack.push(str[i]); // Push it onto the stack
    } else if (str[i] === ')') { // If the character is a closing bracket
      if (stack.length === 0) { // If the stack is empty, there is no matching opening bracket
        return 0; // Return 0 to indicate the brackets are not matched
      } else {
        stack.pop(); // Otherwise, pop the top element off the stack (the last opening bracket) and discard it
      }
    }
  }
  return stack.length === 0 ? 1 : 0; // If the stack is empty, all opening brackets have been matched, so return 1; otherwise, return 0
}
   
// keep this function call here 
console.log(BracketMatcher(readline()));

#javascript

GSAP Blueprint code – Elementor Templates – Nicolai Palmkvist

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

#javascript

Custom Script CDN

// Custom Script 
function custom_script() {
    wp_enqueue_script( 'magnific-popup-js', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.2.0/jquery.magnific-popup.min.js', null, null, true );
    wp_enqueue_style('magnific-popup-css', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.2.0/magnific-popup.min.css');
}
add_action('wp_enqueue_scripts','custom_script');

#javascript #html

Javascript/HTML: Detect if element if off screen

function isOffScreen(el) {
	var rect = el.getBoundingClientRect();
	return (
		(rect.x + rect.width) < 0 
		|| (rect.y + rect.height) < 0
		|| (rect.x > window.innerWidth || rect.y > window.innerHeight)
	);
}

#javascript

Alert com timeout

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alertas com Sessions</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .notice {
            display: none;
            padding: 10px;
            margin: 10px auto;
            width: 300px;
            border-radius: 5px;
            text-align: center;
        }
        .notice-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .notice-error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <div id="notice-success" class="notice notice-success">
        <?= $_SESSION['success'] ?? '' ?>
    </div>
    <div id="notice-error" class="notice notice-error">
        <?= $_SESSION['error'] ?? '' ?>
    </div>

    <script>
        $(document).ready(function () {
            <?php if (isset($_SESSION['success'])): ?>
                $('#notice-success').fadeIn();
                setTimeout(function () {
                    $('#notice-success').fadeOut();
                }, 5000);
            <?php unset($_SESSION['success']); endif; ?>

            <?php if (isset($_SESSION['error'])): ?>
                $('#notice-error').fadeIn();
                setTimeout(function () {
                    $('#notice-error').fadeOut();
                }, 5000);
            <?php unset($_SESSION['error']); endif; ?>
        });
    </script>
</body>
</html>

#javascript

Extending classes | LinkedIn Learning

Extending Classes
One of the powerful features of classes is they can be extended. You can create a new class based on an existing class, and this new class will not only inherit all the properties and methods of the existing class, but you can add new properties and methods to the new class.

This is useful when you have a class that works for most situations, but there are some cases where you need to add new features. Instead of starting from scratch and creating an entirely new class, you can extend the existing class and add the new features. A classic example of this is making a main class called MotorVehicle with properties and methods that are common to all motor vehicles, then extending this class with more specific classes like Car, Truck, and Motorcycle.

Earlier in the course you worked with the Backpack class which has properties and methods that apply to all backpacks. But there's a snag: In my closet I have a hiking backpack with an extra feature that isn't covered by the Backpack class—a hydration pack. For my dataset to be complete, I need the ability to track the hydration capacity of my pack, for obvious reasons. The bigger the hydration capacity, the heavier the pack can potentially get at the start of a hike.

To solve this problem, let's create a new class called HikingBackpack by extending the Backpack class.

Here's the original Backpack class for reference:

class Backpack {
  constructor(
    // Defines parameters:
    name,
    volume,
    color,
    pocketNum,
    strapLengthL,
    strapLengthR,
    lidOpen
  ) {
    // Define properties:
    this.name = name;
    this.volume = volume;
    this.color = color;
    this.pocketNum = pocketNum;
    this.strapLength = {
      left: strapLengthL,
      right: strapLengthR,
    };
    this.lidOpen = lidOpen;
  }
  // Add methods like normal functions:
  toggleLid(lidStatus) {
    this.lidOpen = lidStatus;
  }
  newStrapLength(lengthLeft, lengthRight) {
    this.strapLength.left = lengthLeft;
    this.strapLength.right = lengthRight;
  }
}
To create a new class from an existing one, use the extends keyword followed by the name of the class you want to extend:

class HikingBackpack extends Backpack {}
Next, define all the properties the class needs in the constructor. This includes both the existing properties from the parent class and any new properties you want to add:

class HikingBackpack extends Backpack {
  constructor(
    name,
    volume,
    color,
    pocketNum,
    strapLengthL,
    strapLengthR,
    lidOpen,
    hydrationCapacity
  ) {
    // Initialize the parent class properties
    super(name, volume, color, pocketNum, strapLengthL, strapLengthR, lidOpen);
    // New property specific to HikingBackpack
    this.hydrationCapacity = hydrationCapacity; // Capacity in liters
  }
}
In the above example, you see hydrationCapacity has been added in the constructor. This is the new property specific to the HikingBackpack class. The super() method is used to call the constructor of the parent class and pass in the properties common to both classes. Finally, the new hydrationCapacity property is added.

The new HikingBackpack class can also be extended with new methods. That's done the same way as before:

// Method to check the hydration level.
  checkHydration() {
    if (this.hydrationCapacity > 0) {
      console.log(`You have ${this.hydrationCapacity} liters of water left.`);
    } else {
      console.log("Time to refill your water!");
    }
  }
You can also override methods from the parent class by defining a new method with the same name, calling in the parent method with the super keyword, and then adding new functionality:

toggleLid(lidStatus) {
    super.toggleLid(lidStatus); // Call the parent method
    if (lidStatus) {
      console.log("Your hiking backpack lid is open. Remember to check to make sure the hydration pack is inserted.");
    } else {
      console.log("Your hiking backpack lid is closed. Remember to check to make sure the hydration pack is inserted.");
    }
  }
Here's the full code for the extended HikingBackpack class:

class HikingBackpack extends Backpack {
  constructor(
    name,
    volume,
    color,
    pocketNum,
    strapLengthL,
    strapLengthR,
    lidOpen,
    hydrationCapacity
  ) {
    // Initialize the parent class properties
    super(name, volume, color, pocketNum, strapLengthL, strapLengthR, lidOpen);
    // New property specific to HikingBackpack
    this.hydrationCapacity = hydrationCapacity; // Capacity in liters
  }

  // Method to check the hydration level and alert if it needs refilling
  checkHydration() {
    if (this.hydrationCapacity > 0) {
      console.log(`You have ${this.hydrationCapacity} liters of water left.`);
    } else {
      console.log("Time to refill your water!");
    }
  }

  // Extend or override methods from the parent class if necessary
  // For example, adding extra functionality when the lid is toggled
  toggleLid(lidStatus) {
    super.toggleLid(lidStatus); // Call the parent method
    if (lidStatus) {
      console.log(
        "Your hiking backpack lid is open. Remember to check to make sure the hydration pack is inserted."
      );
    } else {
      console.log(
        "Your hiking backpack lid is closed. Remember to check to make sure the hydration pack is inserted."
      );
    }
  }
}

#nodejs #javascript

Mastering Concurrency and Parallelism in TypeScript

Concurrency: A single chef multitasking between several dishes.
Parallelism: Multiple chefs working on separate dishes simultaneously.

1. Using Promises for Concurrency
Promises are one of the simplest ways to achieve concurrency in TypeScript.

const fetchData = (url: string) => {
  return new Promise<string>((resolve) => {
    setTimeout(() => resolve(`Data from ${url}`), 1000);
  });
};

const main = async () => {
  console.log('Fetching data concurrently...');
  const data1 = fetchData('https://api.example.com/1');
  const data2 = fetchData('https://api.example.com/2');

  const results = await Promise.all([data1, data2]);
  console.log(results); // ["Data from https://api.example.com/1", "Data from https://api.example.com/2"]
};
main();

Explanation:
Promise.all allows both fetch operations to run concurrently, saving time. 2. Concurrency with Async/Await async/await simplifies promise chaining while maintaining the asynchronous nature.

async function task1() {
  console.log("Task 1 started");
  await new Promise((resolve) => setTimeout(resolve, 2000));
  console.log("Task 1 completed");
}

async function task2() {
  console.log("Task 2 started");
  await new Promise((resolve) => setTimeout(resolve, 1000));
  console.log("Task 2 completed");
}

async function main() {
  console.log("Concurrent execution...");
  await Promise.all([task1(), task2()]);
  console.log("All tasks completed");
}
main();

Parallelism in TypeScript
While JavaScript doesn’t natively support multi-threading, Web Workers and Node.js Worker Threads enable parallelism. These features leverage separate threads to handle computationally expensive tasks.

1. Web Workers for Parallelism
In browser environments, Web Workers execute scripts in a separate thread.

// worker.ts
addEventListener('message', (event) => {
  const result = event.data.map((num: number) => num * 2);
  postMessage(result);
});
// main.ts
const worker = new Worker('worker.js');

worker.onmessage = (event) => {
  console.log('Result from worker:', event.data);
};

worker.postMessage([1, 2, 3, 4]);


2. Node.js Worker Threads
For server-side applications, Node.js provides worker_threads.

// worker.js
const { parentPort } = require('worker_threads');
parentPort.on('message', (data) => {
  const result = data.map((num) => num * 2);
  parentPort.postMessage(result);
});
// main.js
const { Worker } = require('worker_threads');

const worker = new Worker('./worker.js');
worker.on('message', (result) => {
  console.log('Worker result:', result);
});
worker.postMessage([1, 2, 3, 4]);
Patterns for Effective Concurrency and Parallelism
1. Task Queues for Managing Concurrency
When dealing with many tasks, task queues ensure controlled execution.

class TaskQueue {
  private queue: (() => Promise<void>)[] = [];
  private running = 0;
  constructor(private concurrencyLimit: number) {}

  enqueue(task: () => Promise<void>) {
    this.queue.push(task);
    this.run();
  }

  private async run() {
    if (this.running >= this.concurrencyLimit || this.queue.length === 0) return;

    this.running++;
    const task = this.queue.shift();
    if (task) await task();
    this.running--;
    this.run();
  }
}

// Usage
const queue = new TaskQueue(3);
for (let i = 0; i < 10; i++) {
  queue.enqueue(async () => {
    console.log(`Task ${i} started`);
    await new Promise((resolve) => setTimeout(resolve, 1000));
    console.log(`Task ${i} completed`);
  });
}

2. Load Balancing with Worker Pools
Worker pools efficiently distribute tasks across multiple workers.

import { Worker, isMainThread, parentPort, workerData } from 'worker_threads';

if (isMainThread) {
  const workers = Array.from({ length: 4 }, () => new Worker(__filename));
  const tasks = [10, 20, 30, 40];
  workers.forEach((worker, index) => {
    worker.postMessage(tasks[index]);
    worker.on('message', (result) => console.log('Result:', result));
  });
} else {
  parentPort.on('message', (task) => {
    parentPort.postMessage(task * 2);
  });
}
Challenges and Solutions
1. Debugging Asynchronous Code

Use tools like async_hooks in Node.js to trace async operations.
Use IDEs that support debugging async/await code.
2. Error Handling

Wrap promises in try/catch blocks or use .catch() with Promise.all.
3. Race Conditions
Avoid shared state or use locking mechanisms.

Best Practices for Concurrency and Parallelism
1. Prioritize Asynchronous I/O: Avoid blocking the main thread for I/O-heavy operations.
2. Use Worker Threads for CPU-Intensive Tasks: Offload heavy computations to worker threads or Web Workers.
3. Limit Concurrency: Use task queues or libraries like p-limit to control concurrency levels.
4. Leverage Libraries: Use libraries like Bull for task queues or Workerpool for worker thread management.

#javascript

Quick Shortcode

// Shortcode [fellow_intern type='']

function fellow_intern ( $atts, $content = null) {
    $today = date('Ymd');
	$atts = shortcode_atts(
        array(
            'type' => '',
            'number' => '-1',
        ),
        $atts,
        'fellow_intern'
    );
    $args = array(
        'post_type' => 'fellow-intern',
		'posts_per_page' => -1,
        'post_status' => 'publish',
        'orderby' => 'date',
        'order' => 'ASC',
    );

	if( !empty( $atts['type'] ) ) {
		$args['tax_query'] = array(
			array(
				'taxonomy' => 'fellow-type',
				'field' => 'slug',
				'terms' => $atts['type'],
            )
		);
	}

    $fellow_query = new WP_Query($args);

    ob_start();
    if($fellow_query->have_posts()) { ?>

    <div class="fellows-wrapper">

    <?php

    while ($fellow_query->have_posts()) {
    $fellow_query->the_post(); ?>

    <div class="fellow-inner">
		<!-- Thumbnail -->
		<div class="fellow-img">
			<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>
		</div>
		<div class="fellow-content">
			<!-- Title -->
			<h3><?php echo the_title(); ?></h3>
			<!-- Details -->
			<div class="fellow-details">
				<?php echo the_content(); ?>
			</div>
		</div>
	</div>

    <?php }
    wp_reset_postdata();
    ?>
    </div>

    <?php
    } else { ?>
        <div>No fellows found</div>
    <?php }
    return ob_get_clean();
}
add_shortcode('fellow_intern', 'fellow_intern');

#php #javascript #nft #crypto #solana

Top NFT Marketplaces on Solana blockchain

https://www.coinsclone.com/solana-nft-marketplaces/

#javascript

HISE | MIDI Latch last notes

// Array to store active notes for latch mode
reg activeNotes = [];

// Variable to toggle latch mode
reg isLatchEnabled = false;

//To limit the number of last notes to latch
const var lastEventsLimit = 2

reg activeNotes = [];
// Variable to toggle latch mode
reg isLatchEnabled = false;
const var latchToggle =  Content.getComponent("LatchToggle");

 // Function to reset latched notes (e.g., on toggle off)
 inline function resetLatchedNotes()
 {
	if ( !activeNotes.length )
	{
		return;
	}
	
	for ( n=0 ; n < activeNotes.length ; n++)
	{
		Synth.noteOffByEventId(Synth.playNote(activeNotes[n],1));
	};
    activeNotes.clear();
 }
 
 inline function onLatchToggleControl(component, value)
 {
 	if (value)
     {
         latchToggle.set("text", "Latch On");
         isLatchEnabled = true;
     }
     else
     {
         latchToggle.set("text", "Latch Off");
         isLatchEnabled = false;
         resetLatchedNotes();
     }
 };
 
 Content.getComponent("LatchToggle").setControlCallback(onLatchToggleControl);


// Function to handle Note On events
function onNoteOn()
{
    if (isLatchEnabled)
    {
        // Check if the note is already latched
        if (activeNotes.length > lastEventsLimit )
        {
			//Synth.noteOffByEventId(Synth.playNote(activeNotes[0],1));
			resetLatchedNotes();
			activeNotes = [];
            // Add the note to the active notes array
            activeNotes.push(Message.getNoteNumber());
           
        } else {
	        activeNotes.push(Message.getNoteNumber());
        }
    }
}

// Function to handle Note Off events
function onNoteOff()
{
    if (isLatchEnabled)
     	Message.ignoreEvent(true);
}

#javascript

HISE | Press a button to play a specific note

HiseSnippet 1011.3oc2W80aaaCDmx1ZX1cIXcnXXOJTrGT.JBr2RxFvdnNwwtvX0IFQoc6kgBF4y1DghTihJaFE8KR+FzuE8iTeputcjRpVpUoKyXcXcxOwi2e9wi+t6nmpjgPRhTQbZe9pXf37YtAqD5kCVRYBx3iINa6NglnAkWlniVESSRfYDGmlOvHvocKh86U2+HJmJBg0hHjGKYgvCYQL8ZoS6+iLNeDcFbNKpj160ebnTLPxkoHdZ51kDSCujt.NgZTqgKw4SFNiokp.MUCIDmVGImsJXo72DY5+XVB6BNXVziDfNJS7HIelAwFojAKY7YSKN2IDhi6z0YglYYg63NgMi8F4qyFetcCu0VTNe3znJ7ZVAd8JCutkfWMPxoDjZkAoa6FDpXw506XvysbGKvKm4TLsWFJY5RZ7bG2ARTCgd2H5kvHEt3MV32a+t2ya+t67Ca0w7iI3LA3MOUDpYRgmTbTpVKE8LtPI49gxnXo.c187thxSgc1pyS2piG9wl64WHpsQfkEsaLmt5DoF7O.CzA6YBTafm.4JMTr.C3tTN2nTxoym6aT4YV7Tf6EfdPQb8uaNht6N6lXjaw0.zAWfTE+2FvFmU5zXBxoB+c57zNs67rNdu8VlvWyd4NiCpZ21PhUuOC8EoQW.phbVgh3MaU5h60SWJylCyxKkTTJFKX5SiAw0wwI4ISC0JGUnpZKwZ6bhUVpivP9Sa277HwB4xEzjGM9XplV3HzmXbhAklYNBNGCWgE7YL11tGCIWpkwVcyuAwi4MHr+95P52eU4ErjIxHzOTEJ1oA4cKTvRT4rTNUWst0zrJeC71oRwhofPjvzqJ2L6erh4aJDus6TlNbY8XrQMXDuC9Pfw7Vfa4Nb9bHTuFfsbG8yeX52UN7amE9a4FfsFrcQrA+Ksq89I5Uf2C.AnLIudW23nW95e4E2zwQw23wQmFpwvethJRhkIUbb.DwNGI3IkE9nDrgK7qmYtMKKefjppcqWc+Q3grVaBn5TkkVbXjLUnqPCZ99FK1aCGK15+biE+HnXuxj61EXLfEEygghq.N1qzhwu.aNNmlx0ERqxkmHEx3kRAKr7E8YfVwVr.TkwdsGnC0Zbf3ZI2o+Y.GnkIsec+GhjMpBySvFlK5829UL0de8UtYv0yT.58waS5l++tI8YxTMSrXBEIg3.Z2SRiBvdig.Fcg.eVGJCmHaL0ttqYcVyQwL6h+.+x2rmYsS9l8J17ekXDQCUxmDl8LHCO8SsRvysv9GMZi+iGbsWMu9IB6x8jvvpt5cL7a1TC+1M0v81TC2eSM7fM0vuaSM76+qMzLD5vTsLJqzjPlLcn80pNNCETjkaqHH+YqFx.9

#javascript

HISE | Play Chords from single notes

HiseSnippet 1614.3oc6XssaabCDcWauAQJ8VZCJ5i7gVDYGGYImKM.oEw2jSEpchfkiSAJJBn2kRKqWQtkjqsUK5+X+TxeP6gjRVqRTbbMZJPJpdvVKmYHOyLmYFtpiRFyzZoJHrx9CyYAgePT2gBS5loTtHn8VAgebz5EFYelfonFVRvFCyoZM9RX37O1pTXkEBbed4i1flQEwrIKEDbfjGy1gOfalrZm09ddV11zD197Akz9tq0NVJ1TlIK.flOpQPNM9HZe1SnV0lKJH7JsR3FopqAXQGDtvFxjgcSkmH75e.WyOLiYenYPWrQ9k2VlkXQrc0fMS4YIcF635ffvnNSBCy6CC2HZWdB+r0mDN9Dm.xDKJGOBmaZ3M+TvqYY30nD7lAjBKAoE7P55QciU7byDIV7bsn1BCS0ihvdYn30MXtqFFsoDZHL0GPOhssBOblE0teiFKSveV7gUqtxJjNYzgDpHgjh.FgRDRCqNYeXGdHSJOhPMjWAEMI8jJhIkQhkIr58JDwFtTPjhm.qepn1hU+spUp96UIupnd8loLKbUxrLlZlhsTF04YXMQwfCYpkIGSyJXmoHhiSmbhdyImxbmXezqjhRQaA27zbl3MwnBFExw2dV6snFpMiNZMnWNSY3VHDtE6XTd3yuUh1hoOxHyQAxqk7AsSlTjQMSyEsEfiDfXvTD.aRVn4lgkKP+GifdQg30i5vMwoyFiyMCLhH06BLNpr9CiZ0qGK1LAfKDs8O7toFt7w+Q9i+ZQc4BlqAq6v+b2yjmSOlQdruCKJnNmVr+wEsEa9EtE6SiM332WQE5bodpMtKa.eeovFElr3yznIB6W1ylMKu9lRpZlhd4i1FN4LsoK0Tnbzh0GHKDlonAyeds5adIa0uv6ws5+rQqNAQMmYK+VWIZkkVhreJWSzdKNAjARtq6NIALEQAWmxRHwoRUBjZRg.PLzFpvPRXPypUrCBzvizjgxBLR3DhQBYzLuA1V9ZSQ7QtwDjbkD96.rLlQPUbMSSRYJV8pKsR0pt8FcjU9Mm7sjUWsw8Z7vxRnnQ9wL6nAMj+i+jelzNLyM0jBscDz.a9HiqMKSNIkGmRfGdHUyioYYVWqG+TVxs07eEJqT3XzHCwE8IMW8ADNZ1zmo7iEzUwTqZbbNMdHgS9Fxcv+t0sVDd8DTTOuPmVqknO3u0iULjosLhc..ps3nQltnrfcBY8NsIVb3i0LAEQCWLJS1mGSpc3P358nEYFB25Qxd8Pf6jEsaRWlAphMBA3dzLquhXOh52DaEhtn99UB2550qW00HotlY1lepeX658vj8wCWMJL9Cn7MLRNSB3RhQHXWPlvsrp2mYaLJDrrZvtQJHlVA6N7D2.1R5b7z5b.CKit5NMpVAN3yY2TAWPAjfxcjPrdC6XLNjzdKqWCh2PGshKHMtMRWNybwDPAKvsQ5irBnAHxJK5mRTR4.2MOFPECGQcFEYFiJdxoSiqV1CrcRsEIekkQbF78zfptib7kYz1K8H64g.6T5fbjNOgYSH79BoxmPT1pA6oB2b7A4E6NqwofxAgwTRq4VdyYQA34ThlkSs2ylra6sZ6n5NDwnfr61DWslCWrQUuvN7OPrcgQYtUz.6ptS.peaKUafGcUqX48Tg6zlvzAuGk6VpzA1piZHzsLwSunIIiXMwKCxvsrkIjkH2A2uZYewrsT3btd2EMYbtQPmu+cncBxAjT67xRdqOu6673jcHiIbV.ZkBuzR4nAfWchEftNZX2Rj10Qsqh4rgdnrv3T2fQmXGFjau1qsz9PHHi4E5z8sTAtnui.NAtQS9Y4g0Om3ueuDdS2X333CRK8KkVd8f8+ee42Ctu7TS4qLFic411JsDGiFlXEKF+T3UtoDiWc5Y76JEx7TofGW9tR6wLJdeLbqL1moCstwfWodxJ2Xs8XYLZ4688kqsCl2QUHNwtjwhl+suwyLyWeQjGtDKGl79664L++seOm8P+RLQaWJHgmh9D35AcwqWDyFcYBauiv4rU49maXe1+9EhD2C+I9LRXS6ygiD1brv+UNiAzXk7Ew9thVd5Ucq.+V398mpDsq8YRy.Wmxx4R6ESeQb7za0qY3pWVCuyk0v6dYM7dWVCu+k0vu9xZ3Cd6FZu0t8WwbfuzLHX2NsbiYBCa4tntqhH3u.2gPQ2

#javascript

POST Requests | Axios Docs

const {data} = await axios.post('https://httpbin.org/post', {
    firstName: 'Fred',
    lastName: 'Flintstone',
    orders: [1, 2, 3],
    photo: document.querySelector('#fileInput').files
  }, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }
)

#webassembly #php #javascript #nft

Developing a Multichain NFT Marketplace Business

https://www.coinsclone.com/cost-to-create-multi-chain-nft-marketplace-like-opensea-rarible/

#javascript

change variable products add to cart text

add_filter( 'woocommerce_loop_add_to_cart_link', 'custom_add_to_cart_button_text_archives', 10, 2 );

function custom_add_to_cart_button_text_archives( $link, $product ) {
    if ( $product->is_type( 'variable' ) ) {
        // Zmiana tekstu przycisku dla produktów zmiennych
        $link = str_replace( 'ADD TO CART', 'SELECT', $link );
    }
    return $link;
}

#javascript

love latter

#envelope{
margin: 150px;
position: relative;
width: 280px;
height: 180px;
borer-bottom-lefgt-radius:6px;
borer-bottom-lefgt-radius:6px;
margin-left: auto;
margin-left: auto;
top: 150px;
backgorund-color: #f9c5c8
box-shadow: 0 4px 20px rgba(0,0,0,,0.2)
}

#javascript #typescript

Get the week of the year

const getWeekOfYear = (date: Date): number => {
  const startOfYear = new Date(date.getFullYear(), 0, 1);
  const days = Math.floor(
    (date.getTime() - startOfYear.getTime()) / (24 * 60 * 60 * 1000)
  );
  return Math.ceil((days + startOfYear.getDay() + 1) / 7);
};

#javascript

scroll to top

<script>
    window.onscroll = function() {
        var button = document.getElementById("scrollToTop");
        if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
            button.style.display = "block";
        } else {
            button.style.display = "none";
        }
    };
</script>

#html #javascript #cordova

Cordova: Fingerprint auth

// config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.fingerprintauth" version="1.0.0" xmlns="http://www.w3.org/ns/widgets">
    <name>FingerprintAuth</name>
    <description>Aplicación de autenticación por huella digital</description>
    <author email="dev@example.com" href="http://example.com">
        Tu Nombre
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-fingerprint-aio" spec="^4.0.0" />
    <access origin="*" />
</widget>

// www/index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autenticación por Huella Digital</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <h1>Bienvenido</h1>
        <button id="authenticateButton">Autenticar con Huella Digital</button>
        <p id="status"></p>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

// www/css/style.css
.container {
    padding: 20px;
    text-align: center;
}

button {
    padding: 15px 30px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    margin: 20px 0;
    cursor: pointer;
}

#status {
    margin-top: 20px;
    font-weight: bold;
}

// www/js/index.js
document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    document.getElementById('authenticateButton').addEventListener('click', authenticate);
    
    // Verificar si el dispositivo soporta la autenticación biométrica
    Fingerprint.isAvailable(function(result) {
        // result contiene el tipo de biometría disponible
        console.log("Tipo de biometría: " + result);
    }, function(error) {
        console.error("Error al verificar biometría: " + error);
        document.getElementById('status').textContent = 
            "Tu dispositivo no soporta autenticación por huella digital";
    });
}

function authenticate() {
    Fingerprint.show({
        title: 'Autenticación Biométrica', // título opcional
        subtitle: 'Por favor, autentícate usando tu huella digital', // subtítulo opcional
        description: 'Toca el sensor de huella digital', // descripción opcional
        fallbackButtonTitle: 'Usar alternativa', // título del botón alternativo
        disableBackup: false // permitir autenticación alternativa
    }, successCallback, errorCallback);
}

function successCallback() {
    document.getElementById('status').textContent = 
        "¡Autenticación exitosa!";
    // Aquí puedes agregar la lógica para después de una autenticación exitosa
}

function errorCallback(error) {
    document.getElementById('status').textContent = 
        "Error en la autenticación: " + error.message;
}

#javascript

Методы объекта, "this"

function sayHi() {
  alert( this.name );
}

#html #javascript #cordova

Cordova: Live reload

cordova plugin add cordova-plugin-browsersync-gen2

cordova run browser --live-reload
cordova run android --live-reload
cordova run ios --live-reload
cordova run --live-reload (will run project using all platforms)

cordova serve --livre-reload

#javascript #dappfort #cryptocurrencyexchange #crypto #trading #cryptocurrency #blockchain

Dappfort Crypto trading bot development Company

Why Choose Dappfort?
  
Tailored Solutions: Dappfort works closely with clients to understand their unique needs, providing bots that are custom-built to fit specific trading goals and risk profiles.
Scalability: Whether you're a small trader or a large financial institution, Dappfort’s bots are built to scale, handling large volumes of trades across multiple exchanges with ease.

Advanced Analytics: Dappfort’s bots come with built-in analytics tools that track and display performance metrics, helping users make data-driven decisions and optimize strategies over time.

Ongoing Support: Dappfort provides continuous support and updates, ensuring that the bots remain effective and secure as market conditions evolve.

Whether you're an individual trader looking to automate your personal portfolio or a business seeking a fully integrated trading solution, Dappfort's crypto trading bot development company are designed to meet the needs of today's fast-paced cryptocurrency markets.

For more information or to get started, visit Dappfort's website or contact their team for a personalized consultation.

#groovy #javascript

behavior_displayToolTipHelpInfoText_customField

// Service Form PS

import com.onresolve.jira.groovy.user.FieldBehaviours
import com.onresolve.jira.groovy.user.FormField

// Get the specific field
FormField myField = getFieldById("customfield_xxxx") // Vendor Dev Status

// Set the tooltip description with AUI icon styling
myField.setLabel("System Sales Catalog Product Code <span class='aui-icon aui-icon-small aui-iconfont-info' title='Use this field to indicate the product code associated with the system, as stated in the Sales Catalog for this system' style='cursor: help; margin-left: 5px;'></span>")

#javascript #react.js #nodejs

BACKEND NODE.JS CREATED COMMEND

mkdir backend
cd backend

mkdir config
New-Item -ItemType File -Path ./config/db.js

mkdir controllers
New-Item -ItemType File -Path ./controllers/authController.js

mkdir models
New-Item -ItemType File -Path ./models/User.js

mkdir routes
New-Item -ItemType File -Path ./routes/authRoutes.js

mkdir middleware
New-Item -ItemType File -Path ./middleware/authMiddleware.js

New-Item -ItemType File -Path ./server.js
New-Item -ItemType File -Path ./package.json
New-Item -ItemType File -Path ./.env







echo ".env" >> .gitignore

#javascript #dappfort #cryptocurrencyexchange #crypto #trading #cryptocurrency #blockchain

Cryptocurrency Exchange Website and App development service

https://www.dappfort.com/cryptocurrency-exchange-development-company/

#javascript

The nuances of base64 encoding strings in JavaScript | Articles | web.dev

// Sample string that represents a combination of small, medium, and large code points.
// This sample string is valid UTF-16.
// 'hello' has code points that are each below 128.
// '⛳' is a single 16-bit code units.
// '❤️' is a two 16-bit code units, U+2764 and U+FE0F (a heart and a variant).
// '🧀' is a 32-bit code point (U+1F9C0), which can also be represented as the surrogate pair of two 16-bit code units '\ud83e\uddc0'.
const validUTF16String = 'hello⛳❤️🧀';

// This will not work. It will print:
// DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
try {
  const validUTF16StringEncoded = btoa(validUTF16String);
  console.log(`Encoded string: [${validUTF16StringEncoded}]`);
} catch (error) {
  console.log(error);
}

#javascript

Find what elements are causing overflow issue.

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
	document.querySelectorAll('*'),
	function (el) {
		if (el.offsetWidth > docWidth) {
			console.log(el);
		}
	}
);

#html #json #javascript #jquery #css

Homepage Template

<!DOCTYPE html>
 
<html>
 
<head>
<!-- Link to external CSS stylesheet -->
<link rel="stylesheet" href="style.css">
<title> Game Zone</title>
</head>
 
<body>
 
<div class="gameon">
<!-- Website logo image -->  
<img src="websitelogo.png" width="700" height="400" style="margin: 0 auto; display: flex;">
 
<div style="position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%);">
<!-- Website name text -->
<span style="font-size: 30px; font-weight: bold; color: black;">GAMEZONE</span>
 
</div>
 
<!-- Website Mission statement -->
<i style="font-size: 25px; margin-top: 10px; ">"Our mission is to reignite the joy and nostalgia in the arcade experience"</i>
 
<marquee scrollamount="8"
direction="left"
behavior="scroll">
<!-- Announcement marquee -->  
<h1>Attention Customers, Lightning Deal On Sale Now 50% Off Everything!!!
</marquee>
 
<div style="position: relative; left: 50px; top: 100px;">
</div>
 
<div style="position: relative; top: -20px; font-size: 20px;text-align: left;"
<!-- How to create account instructions -->
<h1>How To Create a Account</h1>
 
<ol>
<li>Click on Sign In (In Menu)</li>
<li>Enter A Email </li> 
<li>Enter Your Password and then you're in!</li>
</ol>
 
</div>
 
<div style="position: relative; top: -1px;font-size: 9px;text-align: left;" 
<!-- Website disclaimer -->
<h1>Disclaimer</h1>  
 
<li>All purchases are Non-Refundable</li>
<li>Points can not be transferred across accounts</li>  
<li>Prices may be changed at any time without further notice</li>
<li>We have the right to refuse service to anyone</li>
</ul>
 
</div>
 
  <nav class="dropdown">
 
    <!-- Website menu -->
    
    <button class="dropbtn">Menu</button>
 
    <div class="dropdown-content">
 
      <a href="https://index-1.hebbaraarush105.repl.co/">HomePage</a>
 
      <a href="https://contactushtml.hebbaraarush105.repl.co/">About Us</a>
 
      <a href="https://arcade-games.hebbaraarush105.repl.co/">Arcade Games</a>
 
      <a href="https://createaccount.hebbaraarush105.repl.co/">Sign In</a>
 
      <a href="https://f78636c2-61d0-4bb2-ad3d-e31e1595f7a0-00-10um3h265swk6.worf.replit.dev/"><h1>Schedule a Visit</h1></a>
      </div>
    
 
  </nav>
 
 
 
<div class="footer">
<!-- Website footer with copyright and links -->
© 2023 Aarush and Siddharth. All rights reserved.  
</div>
 
<div class="footer-dropdown">
 
<a href="#">Credits</a>   
 
<div class="footer-dropdown-content">  
 
<!-- Links to external game info pages -->
<a href="https://www.canva.com/design/DAF0F9nX2D8/IRk\_pak6JC0BX3mrlifWDA/edit?utm\_content=DAF0F9nX2D8&utm\_campaign=designshare&utm\_medium=link2&utm\_source=sharebutton" target="\_blank">CanvasDesign</a>
 
<a href="https://en.wikipedia.org/wiki/Donkey\_Kong\_%28character%29" target="\_blank">DonkeyKong</a>  
 
<a href="https://poki.com/en/g/crossy-road" target="\_blank">CrossyRoad</a>
 
<a href="https://www.amazon.com/Arcade-Arcade1Up-PAC-MAN-Head-Head-Table/dp/B09B1DNQDQ?source=ps-sl-shoppingads-lpcontext&ref\_=fplfs&psc=1&smid=A1DXN92KCKEQV4" target="\_blank">PacMan</a>
 
<a href="https://en.wikipedia.org/wiki/Street\_Fighter\_II" target="\_blank">Street Fighter</a>  
 
<a href="https://www.thepinballcompany.com/product/space-invaders-frenzy-arcade-game/" target="\_blank">SpaceInvaders</a>  
 
<a href="https://www.walmart.com/ip/Arcade1Up-PONG-Head-to-head-H2H-Gaming-Table/974088112/" target="\_blank">Pong</a>
 
</div>
 
 
 
</body>
 
</html>

#html #json #javascript #jquery #css

Simple Responsive Typography

Multiplier
CSS custom properties are excellent when it comes to updating multiple elements at once. By injecting a --text-multiplier variable into the text elements' size, you can increase/decrease them all at a specific breakpoint by editing the variable.
 
// Method 3
h1 {
  font-size: calc(2em * var(--text-multiplier, 1));
}
 
p {
  font-size: calc(1em * var(--text-multiplier, 1));
}
 
@media (min-width: 48rem) {
  :root {
    --text-multiplier: 1.25;
  }
}

#html #json #javascript #css #jquery

Check user prefers dark/light mode

//Pictures
 <picture>
       <source
    media="(max-width:599px) and (prefers-color-scheme: light)"
    srcset="images/bg-mobile-light.jpg"
    />
      <source
    media="(max-width:599px) and (prefers-color-scheme: dark)"
    srcset="images/bg-mobile-dark.jpg"
    />
      <source
    media="(min-width:600px) and (prefers-color-scheme: light)"
    srcset="images/bg-desktop-light.jpg"
    />
      <source
    media="(min-width:600px) and (prefers-color-scheme: dark)"
    srcset="images/bg-desktop-dark.jpg"
    />
      <img
    src="images/bg-mobile-light.jpg"
    aria-hidden="true"
    class="background-img"
    alt=""
    />
</picture>
 
//CSS
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #25273c;
    --color-primary-text: #e4e5f1;
    --color-secondary-text: #cacde8;
    --color-deleted-text: #4d5067;
    --color-circle: #777a92;
    --color-background: #161722;
    --color-background-hover: #1c1e35;
  }
}
 
@media (prefers-color-scheme: light) {
  :root {
    --color-white: #ffffff;
    --color-primary: #ffffff;
    --color-primary-text: #494c6b;
    --color-secondary-text: #9394a5;
    --color-light-text: #d4d4d4;
    --color-active: #3a7cfd;
    --color-circle: #d6d6d6;
    --color-background: #fafafa;
    --color-background-hover: #ebebeb;
    --color-background-modal: rgba(73, 76, 107, 0.6);
    --color-error: #cd1237;
  }
}
 
 
//JS
let dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
//Show which prefers-color-scheme user has before the page loads
window.matchMedia('(prefers-color-scheme: dark)');
if (dark) {
  //Do something
} else {
  //Do something
}

#html #json #javascript #css #jquery

Animation - entrance - CSS

/* ==========================================================================
Animation System by Neale Van Fleet from Rogue Amoeba
========================================================================== */
.animate {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
  animation-name: animate-fade;
  animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
  animation-fill-mode: backwards;
}
 
/* Fade In */
.animate.fade {
  animation-name: animate-fade;
  animation-timing-function: ease;
}
 
@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
 
/* Pop In */
.animate.pop { animation-name: animate-pop; }
 
@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
 
/* Blur In */
.animate.blur {
  animation-name: animate-blur;
  animation-timing-function: ease;
}
 
@keyframes animate-blur {
  0% {
    opacity: 0;
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}
 
/* Glow In */
.animate.glow {
  animation-name: animate-glow;
  animation-timing-function: ease;
}
 
@keyframes animate-glow {
  0% {
    opacity: 0;
    filter: brightness(3) saturate(3);
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: scale(1, 1);
  }
}
 
/* Grow In */
.animate.grow { animation-name: animate-grow; }
 
@keyframes animate-grow {
  0% {
    opacity: 0;
    transform: scale(1, 0);
    visibility: hidden;
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
 
/* Splat In */
.animate.splat { animation-name: animate-splat; }
 
@keyframes animate-splat {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(20deg) translate(0, -30px);
    }
  70% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg);
  }
  85% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg) translate(0, -10px);
  }
 
  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0) translate(0, 0);
  }
}
 
/* Roll In */
.animate.roll { animation-name: animate-roll; }
 
@keyframes animate-roll {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0deg);
  }
}
 
/* Flip In */
.animate.flip {
  animation-name: animate-flip;
  transform-style: preserve-3d;
  perspective: 1000px;
}
 
@keyframes animate-flip {
  0% {
    opacity: 0;
    transform: rotateX(-120deg) scale(0.9, 0.9);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) scale(1, 1);
  }
}
 
/* Spin In */
.animate.spin {
  animation-name: animate-spin;
  transform-style: preserve-3d;
  perspective: 1000px;
}
 
@keyframes animate-spin {
  0% {
    opacity: 0;
    transform: rotateY(-120deg) scale(0.9, .9);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1, 1);
  }
}
 
/* Slide In */
.animate.slide { animation-name: animate-slide; }
 
@keyframes animate-slide {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
 
/* Drop In */
.animate.drop { 
  animation-name: animate-drop; 
  animation-timing-function: cubic-bezier(.77, .14, .91, 1.25);
}
 
@keyframes animate-drop {
0% {
  opacity: 0;
  transform: translate(0,-300px) scale(0.9, 1.1);
}
95% {
  opacity: 1;
  transform: translate(0, 0) scale(0.9, 1.1);
}
96% {
  opacity: 1;
  transform: translate(10px, 0) scale(1.2, 0.9);
}
97% {
  opacity: 1;
  transform: translate(-10px, 0) scale(1.2, 0.9);
}
98% {
  opacity: 1;
  transform: translate(5px, 0) scale(1.1, 0.9);
}
99% {
  opacity: 1;
  transform: translate(-5px, 0) scale(1.1, 0.9);
}
100% {
  opacity: 1;
  transform: translate(0, 0) scale(1, 1);
  }
}
 
/* Animation Delays */
.delay-1 {
  animation-delay: 0.6s;
}
.delay-2 {
  animation-delay: 0.7s;
}
.delay-3 {
  animation-delay: 0.8s;
}
.delay-4 {
  animation-delay: 0.9s;
}
.delay-5 {
  animation-delay: 1s;
}
.delay-6 {
  animation-delay: 1.1s;
}
.delay-7 {
  animation-delay: 1.2s;
}
.delay-8 {
  animation-delay: 1.3s;
}
.delay-9 {
  animation-delay: 1.4s;
}
.delay-10 {
  animation-delay: 1.5s;
}
.delay-11 {
  animation-delay: 1.6s;
}
.delay-12 {
  animation-delay: 1.7s;
}
.delay-13 {
  animation-delay: 1.8s;
}
.delay-14 {
  animation-delay: 1.9s;
}
.delay-15 {
  animation-delay: 2s;
}
 
@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important;
  }
}

#html #json #javascript #css #jquery

Measure the speed of code execution

var t0 = performance.now();
 
for (let i = 0; i < 10000; i++) {   
    // Do stuff here 
}  
 
// Do some other stuff here
 
var t1 = performance.now();
console.log("Call to doSomething took " + (t1 - t0) + " ms.")

#html #json #javascript #css #jquery

WebDev

undefined

#html #javascript #cordova

Cordova/Mobile: App ejemplo para autenticar con huella digital.

// config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.fingerprintauth" version="1.0.0" xmlns="http://www.w3.org/ns/widgets">
    <name>FingerprintAuth</name>
    <description>Aplicación de autenticación por huella digital</description>
    <author email="dev@example.com" href="http://example.com">
        Tu Nombre
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-fingerprint-aio" spec="^4.0.0" />
    <access origin="*" />
</widget>

// www/index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autenticación por Huella Digital</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <h1>Bienvenido</h1>
        <button id="authenticateButton">Autenticar con Huella Digital</button>
        <p id="status"></p>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

// www/css/style.css
.container {
    padding: 20px;
    text-align: center;
}

button {
    padding: 15px 30px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    margin: 20px 0;
    cursor: pointer;
}

#status {
    margin-top: 20px;
    font-weight: bold;
}

// www/js/index.js
document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    document.getElementById('authenticateButton').addEventListener('click', authenticate);
    
    // Verificar si el dispositivo soporta la autenticación biométrica
    Fingerprint.isAvailable(function(result) {
        // result contiene el tipo de biometría disponible
        console.log("Tipo de biometría: " + result);
    }, function(error) {
        console.error("Error al verificar biometría: " + error);
        document.getElementById('status').textContent = 
            "Tu dispositivo no soporta autenticación por huella digital";
    });
}

function authenticate() {
    Fingerprint.show({
        title: 'Autenticación Biométrica', // título opcional
        subtitle: 'Por favor, autentícate usando tu huella digital', // subtítulo opcional
        description: 'Toca el sensor de huella digital', // descripción opcional
        fallbackButtonTitle: 'Usar alternativa', // título del botón alternativo
        disableBackup: false // permitir autenticación alternativa
    }, successCallback, errorCallback);
}

function successCallback() {
    document.getElementById('status').textContent = 
        "¡Autenticación exitosa!";
    // Aquí puedes agregar la lógica para después de una autenticación exitosa
}

function errorCallback(error) {
    document.getElementById('status').textContent = 
        "Error en la autenticación: " + error.message;
}

#html #javascript

5. Write a JavaScript program to demonstrate the working of callbacks, promises, and async/await.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>JavaScript Callbacks, Promises, Async/Await</title> 
</head> 
<body> 
  <h1>JavaScript Callbacks, Promises, and Async/Await Demo</h1> 
  <script> 
    // Callback Example 
    function doSomething(callback) { 
      setTimeout(() => { 
        callback("Callback done!"); 
      }, 1000); 
    } 
    doSomething(console.log); 
 
    // Promise Example 
    let promise = new Promise((resolve, reject) => { 
      setTimeout(() => resolve("Promise resolved!"), 1000); 
    }); 
    promise.then(console.log); 
 
    // Async/Await Example 
    async function asyncFunction() { 
      let result = await promise; 
      console.log(result); 
    } 
    asyncFunction(); 
  </script> 
</body> 
</html>

#html #javascript

3. Demonstrate pop-up box alerts, confirm, and prompt using JavaScript.

popUpDemo.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Pop-Up Boxes</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }

        button {
            padding: 10px 15px;
            font-size: 16px;
            margin: 10px;
        }
    </style>
</head>
<body>

    <h1>JavaScript Pop-Up Box Demonstration</h1>
    <button onclick="showAlert()">Show Alert</button>
    <button onclick="showConfirm()">Show Confirm</button>
    <button onclick="showPrompt()">Show Prompt</button>

    <script>
        function showAlert() {
            alert("This is an alert box!");
        }

        function showConfirm() {
            const result = confirm("Do you want to proceed?");
            if (result) {
                alert("You clicked OK!");
            } else {
                alert("You clicked Cancel!");
            }
        }

        function showPrompt() {
            const name = prompt("Please enter your name:");
            if (name) {
                alert("Hello, " + name + "!");
            } else {
                alert("No name entered.");
            }
        }
    </script>

</body>
</html>

#javascript #typescript #react.js

Toggle Number Selection in State Array

import React from 'react';

/**
 * Toggles the presence of a number in the selectedNumbers array state.
 *
 * @param number - The number to toggle in the selection.
 * @param setSelectedNumbers - The state setter function from useState.
 */
const toggleNumber = (
  number: number,
  setSelectedNumbers: React.Dispatch<React.SetStateAction<number[]>>
): void => {
  setSelectedNumbers((prevSelectedNumbers) => {
    if (prevSelectedNumbers.includes(number)) {
      // Number is already selected; remove it from the array
      return prevSelectedNumbers.filter((n) => n !== number);
    } else {
      // Number is not selected; add it to the array
      return [...prevSelectedNumbers, number];
    }
  });
};

// Initialize State in Your Component
const [selectedNumbers, setSelectedNumbers] = useState<number[]>([]);

// Use the toggleNumber Function
// Example usage within a component event handler
const handleNumberClick = (number: number): void => {
  toggleNumber(number, setSelectedNumbers);
};

// Implement in JSX
<button onClick={() => handleNumberClick(5)}>
  {selectedNumbers.includes(5) ? 'Deselect 5' : 'Select 5'}
</button>

#html #javascript

Demonstration of Activity LIFE CYCLE Methods(use emptycompose activity or emptyviews while creating file)

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Demonstration of Activity LIFE CYCLE Methods"
        android:textColor="@color/design_default_color_error"
        android:textSize="18sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintVertical_bias="0.5"
        app:layout_constraintHorizontal_bias="0.5"/>
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.ktfile
import android.os.Bundle
import android.widget.Toast
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.activity_main)
        Toast.makeText(applicationContext,"ONCREATE() CALLED",Toast.LENGTH_SHORT).show()
    }
    override fun onStart()
    {
        super.onStart()
        Toast.makeText(applicationContext,"ONSTART() CALLED",Toast.LENGTH_SHORT).show()
    }
    override fun onRestart()
    {
        super.onRestart()
        Toast.makeText(applicationContext,"ONRESTART() CALLED",Toast.LENGTH_SHORT).show()
    }
    override fun onResume()
    {
        super.onResume()
        Toast.makeText(applicationContext,"ONRESUME() CALLED",Toast.LENGTH_SHORT).show()
    }
    override fun onPause()
    {
        super.onPause()
        Toast.makeText(applicationContext,"ONPAUSE() CALLED",Toast.LENGTH_SHORT).show()
    }
    override fun onStop()
    {
        super.onStop()
        Toast.makeText(applicationContext,"ONSTOP() CALLED",Toast.LENGTH_SHORT).show()
    }
    override fun onDestroy()
    {
        super.onDestroy()
        Toast.makeText(applicationContext,"ONDESTROY() CALLED",Toast.LENGTH_SHORT).show()
    }

}

#html #javascript

Demonstration of Activity LIFE CYCLE Methods(use emptycompose activity or emptyviews while creating file)

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Demonstration of Activity LIFE CYCLE Methods"
        android:textColor="@color/design_default_color_error"
        android:textSize="18sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintVertical_bias="0.5"
        app:layout_constraintHorizontal_bias="0.5"/>
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.ktfile
import android.os.Bundle
import android.widget.Toast
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.activity_main)
        Toast.makeText(applicationContext,"ONCREATE() CALLED",Toast.LENGTH_SHORT).show()
    }
    override fun onStart()
    {
        super.onStart()
        Toast.makeText(applicationContext,"ONSTART() CALLED",Toast.LENGTH_SHORT).show()
    }
    override fun onRestart()
    {
        super.onRestart()
        Toast.makeText(applicationContext,"ONRESTART() CALLED",Toast.LENGTH_SHORT).show()
    }
    override fun onResume()
    {
        super.onResume()
        Toast.makeText(applicationContext,"ONRESUME() CALLED",Toast.LENGTH_SHORT).show()
    }
    override fun onPause()
    {
        super.onPause()
        Toast.makeText(applicationContext,"ONPAUSE() CALLED",Toast.LENGTH_SHORT).show()
    }
    override fun onStop()
    {
        super.onStop()
        Toast.makeText(applicationContext,"ONSTOP() CALLED",Toast.LENGTH_SHORT).show()
    }
    override fun onDestroy()
    {
        super.onDestroy()
        Toast.makeText(applicationContext,"ONDESTROY() CALLED",Toast.LENGTH_SHORT).show()
    }

}

#html #javascript

hello world program

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.example.myapplication.ui.theme.MyApplicationTheme


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Surface(modifier = Modifier.fillMaxSize(),
                color = Color.White

            ) {
                Box(
                    contentAlignment = Alignment.Center,
                    modifier = Modifier.fillMaxSize()
                ){
                    Text(text = "Hello World",
                        color = Color.Red,
                        fontSize = 32.sp
                    )

                }

            }
        }

    }
}

#html #javascript

articulation point

import java.util.*;

public class Graph {
    private int vertices;  // Number of vertices
    private LinkedList<Integer>[] adjList;  // Adjacency list representation
    private int time;  // Time counter for DFS

    // Constructor
    public Graph(int v) {
        vertices = v;
        adjList = new LinkedList[v];
        for (int i = 0; i < v; i++) {
            adjList[i] = new LinkedList<>();
        }
        time = 0;
    }

    // Add an edge to the graph
    public void addEdge(int v, int w) {
        adjList[v].add(w);
        adjList[w].add(v);  // Since the graph is undirected
    }

    // Articulation Point (Art) Algorithm
    public void findArticulationPoints() {
        boolean[] visited = new boolean[vertices];
        int[] dfn = new int[vertices];  // Discovery time of visited vertices
        int[] low = new int[vertices];  // Lowest discovery time reachable
        int[] parent = new int[vertices];  // Parent vertices in DFS
        Arrays.fill(parent, -1);  // Initialize all parents as -1

        // Start DFS from each unvisited node
        for (int i = 0; i < vertices; i++) {
            if (!visited[i]) {
                DFSArt(i, visited, dfn, low, parent);
            }
        }
    }

    private void DFSArt(int u, boolean[] visited, int[] dfn, int[] low, int[] parent) {
        visited[u] = true;  // Mark the current node as visited
        dfn[u] = low[u] = ++time;  // Initialize discovery time and low value
        int childCount = 0;  // Count of children in DFS tree
        boolean isArticulation = false;

        for (int v : adjList[u]) {
            if (!visited[v]) {
                childCount++;
                parent[v] = u;
                DFSArt(v, visited, dfn, low, parent);

                // Check if the subtree rooted at v has a connection back to one of u's ancestors
                low[u] = Math.min(low[u], low[v]);

                // u is an articulation point in two cases:
                // (1) u is not the root and low value of one of its child is more than discovery value of u
                if (parent[u] != -1 && low[v] >= dfn[u]) {
                    isArticulation = true;
                }

                // (2) u is the root of DFS tree and has two or more children
                if (parent[u] == -1 && childCount > 1) {
                    isArticulation = true;
                }
            } else if (v != parent[u]) {
                // Update low value of u for back edge
                low[u] = Math.min(low[u], dfn[v]);
            }
        }

        // If u is an articulation point, print it
        if (isArticulation) {
            System.out.println("Articulation Point: " + u);
        }
    }

    // Construct graph from adjacency matrix
    public static Graph createGraphFromAdjMatrix(int[][] adjMatrix) {
        int n = adjMatrix.length;
        Graph g = new Graph(n);
        for (int i = 0; i < n; i++) {
            for (int j = i + 1; j < n; j++) {  // Undirected graph, so only check i < j
                if (adjMatrix[i][j] == 1) {
                    g.addEdge(i, j);
                }
            }
        }
        return g;
    }

    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);

        // Input the number of vertices
        System.out.print("Enter the number of vertices: ");
        int v = scanner.nextInt();

        // Input the adjacency matrix
        System.out.println("Enter the adjacency matrix:");
        int[][] adjMatrix = new int[v][v];
        for (int i = 0; i < v; i++) {
            for (int j = 0; j < v; j++) {
                adjMatrix[i][j] = scanner.nextInt();
            }
        }

        // Create the graph from adjacency matrix
        Graph g = Graph.createGraphFromAdjMatrix(adjMatrix);

        // Find and print the articulation points
        System.out.println("Articulation Points:");
        g.findArticulationPoints();
    }
}

output1:
Enter the number of vertices: 5
Enter the adjacency matrix:
0 1 1 0 0
1 0 1 1 0
1 1 0 0 0
0 1 0 0 1
0 0 0 1 0
Articulation Points:
Articulation Point: 1
Articulation Point: 3

output2:
Enter the number of vertices: 6
Enter the adjacency matrix:
0 1 1 0 0 0
1 0 1 1 0 0
1 1 0 0 1 0
0 1 0 0 1 1
0 0 1 1 0 1
0 0 0 1 1 0
Articulation Points:
Articulation Point: 2
Articulation Point: 3

#javascript

Elementor Close Off Canvas On Anchor Link Click

<script>
document.addEventListener('click', function (event) {
    if (event.target.closest('a[href*="#"]:not([aria-haspopup="true"])') && event.target.closest('.e-off-canvas[aria-hidden="false"]')) {
        const canvasTrigger = document.querySelector('[href*="off_canvas%3A"]:not([href*="%3Aopen"]');
        if (canvasTrigger) canvasTrigger.click();
    }
});
</script>

#go #nodejs #actionscript3 #javascript

Memo - Protocol

OP_RETURN 6d01 6d656d6f pouri88

#javascript

Final min-max temp for each month with cloud free and water bodies excluded

// Define the coordinates for the specific point (e.g., the location of interest)
var point = ee.Geometry.Point(90.2611485521762, 23.44690280909043);

// Create a buffer around the point (e.g., 20 kilometers)
var bufferRadius = 20000; // 20 km in meters
var pointBuffer = point.buffer(bufferRadius);

// Create a Landsat 8 Collection 2 Tier 1 image collection for the desired date range
var startDate = '2017-10-01';
var endDate = '2017-10-31';

var landsatCollection2 = ee.ImageCollection('LANDSAT/LC08/C02/T1_TOA')
  .filterBounds(point)
  .filterDate(startDate, endDate);

// Cloud masking function for Landsat
function maskL8Clouds(image) {
  var qa = image.select('QA_PIXEL');
  var cloudMask = qa.bitwiseAnd(1 << 3).eq(0); // Cloud bit is 3rd
  return image.updateMask(cloudMask);
}

// Apply the cloud mask to the collection
var cloudFreeCollection = landsatCollection2.map(maskL8Clouds);

// Print the number of images in the cloud-free collection
var imageCount = cloudFreeCollection.size();
print('Number of cloud-free images in the collection:', imageCount);

// Use JRC Global Surface Water dataset to create a water mask
var waterMask = ee.Image('JRC/GSW1_4/GlobalSurfaceWater').select('occurrence');

// Define water body threshold (e.g., areas with water occurrence > 50% are considered water bodies)
var waterThreshold = 50;
var waterBodies = waterMask.gt(waterThreshold);

// Clip water bodies to the buffer area
var clippedWaterBodies = waterBodies.clip(pointBuffer);

// Mask water bodies in the cloud-free collection
var landOnlyCollection = cloudFreeCollection.map(function(image) {
  return image.updateMask(clippedWaterBodies.not());  // Mask out water bodies
});

// Compute the maximum and minimum temperature across all non-water pixels
var maxTemperature = landOnlyCollection.select('B10').max();
var minTemperature = landOnlyCollection.select('B10').min();

// Convert temperatures from Kelvin to Celsius
var maxTemperatureCelsius = maxTemperature.subtract(273.15);
var minTemperatureCelsius = minTemperature.subtract(273.15);

// Clip the max and min temperature images to the buffer region around the point
var clippedMaxTemperature = maxTemperatureCelsius.clip(pointBuffer);
var clippedMinTemperature = minTemperatureCelsius.clip(pointBuffer);

// Filter out negative temperature pixels (set to null)
var filteredMaxTemperature = clippedMaxTemperature.updateMask(clippedMaxTemperature.gt(0));
var filteredMinTemperature = clippedMinTemperature.updateMask(clippedMinTemperature.gt(0));

// Adjust the scale to match the thermal band resolution (100m)
var maxTempStats = filteredMaxTemperature.reduceRegion({
  reducer: ee.Reducer.max(),
  geometry: pointBuffer,
  scale: 100,  // Updated scale
  bestEffort: true  // Tries to use the best resolution possible
});
var minTempStats = filteredMinTemperature.reduceRegion({
  reducer: ee.Reducer.min(),
  geometry: pointBuffer,
  scale: 100,  // Updated scale
  bestEffort: true  // Tries to use the best resolution possible
});

print('Maximum Temperature (Celsius):', maxTempStats);
print('Minimum Temperature (Celsius):', minTempStats);

// Display the specific point, water bodies, and temperature layers on the map
Map.centerObject(point, 10);
Map.addLayer(point, {color: 'red'}, 'Specific Point');

// Add water bodies to the map with a distinct color (e.g., light blue)
Map.addLayer(
  clippedWaterBodies,
  {palette: ['cyan'], opacity: 0.5},  // Use a distinct color like 'cyan'
  'Water Bodies',
  true  // You can set this to true if you want the water bodies visible by default
);

// Add the filtered max temperature layer to the map
Map.addLayer(
  filteredMaxTemperature,
  {
    min: 0, // Min temperature range (Celsius)
    max: 50, // Max temperature range (Celsius)
    palette: ['blue', 'lightblue', 'green', 'yellow', 'orange', 'red']
  },
  'Filtered Max Land Surface Temperature (Celsius)',
  true,
  0.75
);

// Add the filtered min temperature layer to the map (can toggle display)
Map.addLayer(
  filteredMinTemperature,
  {
    min: 0, // Min temperature range (Celsius)
    max: 50, // Max temperature range (Celsius)
    palette: ['blue', 'lightblue', 'green', 'yellow', 'orange', 'red']
  },
  'Filtered Min Land Surface Temperature (Celsius)',
  true,
  0.75
);

// Add a legend for the temperature range (Max and Min)
var legend = ui.Panel({
  style: {
    position: 'bottom-right',
    padding: '8px 15px'
  }
});
legend.add(ui.Label({
  value: 'Land Surface Temperature (°C)',
  style: {
    fontWeight: 'bold',
    fontSize: '14px',
    margin: '0 0 4px 0',
    padding: '0'
  }
}));

// Define the color palette and corresponding temperature ranges (0-50°C)
var palette = ['blue', 'lightblue', 'green', 'yellow', 'orange', 'red'];
var tempRanges = ['0-8 °C', '9-16 °C', '17-24 °C', '25-32 °C', '33-40 °C', '41-50 °C'];

// Add water bodies legend entry (cyan for water)
legend.add(ui.Label({
  value: 'Water Bodies',
  style: {
    fontWeight: 'bold',
    fontSize: '14px',
    margin: '0 0 4px 0',
    padding: '0'
  }
}));

// Add the water color box
var waterColorBox = ui.Label({
  style: {
    backgroundColor: 'cyan',  // Cyan color for water bodies
    padding: '8px',
    margin: '0 0 4px 0'
  }
});
var waterDescription = ui.Label({
  value: 'Water Bodies',
  style: {margin: '0 0 4px 6px'}
});
legend.add(
  ui.Panel({
    widgets: [waterColorBox, waterDescription],
    layout: ui.Panel.Layout.Flow('horizontal')
  })
);

// Add temperature ranges to the legend
for (var i = 0; i < palette.length; i++) {
  var colorBox = ui.Label({
    style: {
      backgroundColor: palette[i],
      padding: '8px',
      margin: '0 0 4px 0'
    }
  });
  var description = ui.Label({
    value: tempRanges[i],
    style: {margin: '0 0 4px 6px'}
  });
  legend.add(
    ui.Panel({
      widgets: [colorBox, description],
      layout: ui.Panel.Layout.Flow('horizontal')
    })
  );
}
// Add the legend to the map
Map.add(legend);

#html #javascript

JS - iaccess - ES6 (3)

var fs = require('fs');

// Read the input from the file
var input = fs.readFileSync('input.txt').toString().trim();

// Convert the input into an array of numbers
var array = input.split('\n').map(Number).filter(Boolean);

// Sort the array in ascending order
var sortedArray = array.sort((a, b) => a - b);

// Print each element in the sorted array
sortedArray.forEach(num => console.log(num));

#html #javascript

JS - iaccess - ES6 (2)

var fs = require('fs');

// Read the input from the file
var input = fs.readFileSync('input.txt').toString().trim();

// Convert the input into an array of numbers
var array = input.split('\n').map(Number).filter(Boolean);

// Use filter to find elements greater than 5
var filteredArray = array.filter(num => num > 5);

// Print each element in the filtered array
filteredArray.forEach(num => console.log(num));

#html #javascript

JS - iaccess - ES6 (1)

var fs = require('fs');

// Read the input from the file
var input = fs.readFileSync('concat.txt').toString().trim();

// Split the input by comma to separate the two arrays
var [firstArrayInput, secondArrayInput] = input.split(',');

// Convert the first array input into an array of numbers
var firstArray = firstArrayInput.split('\n').map(Number).filter(Boolean);

// Convert the second array input into an array of numbers
var secondArray = secondArrayInput.split('\n').map(Number).filter(Boolean);

// Combine both arrays using the spread operator
var combinedArray = [...firstArray, ...secondArray];

// Print the output
console.log(combinedArray.join(' '));

#html #javascript

JS - iaccess - ES6 (1)

var fs = require('fs');

// Read the input from the file
var input = fs.readFileSync('input.txt').toString().trim();

// Split the input by comma to separate the two arrays
var [firstArrayInput, secondArrayInput] = input.split(',');

// Convert the first array input into an array of numbers
var firstArray = firstArrayInput.split('\n').map(Number).filter(Boolean);

// Convert the second array input into an array of numbers
var secondArray = secondArrayInput.split('\n').map(Number).filter(Boolean);

// Combine both arrays using the spread operator
var combinedArray = [...firstArray, ...secondArray];

// Print the output
console.log(combinedArray.join(' '));

#html #javascript

js basics i-assess 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Makers</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        input {
            margin: 5px;
            padding: 10px;
            width: 80px;
        }
        button {
            padding: 10px 15px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h2>Event Count</h2>
    
    <input type="number" id="event1" placeholder="Weddings">
    <input type="number" id="event2" placeholder="Corporate">
    <input type="number" id="event3" placeholder="Social Gatherings">
    <input type="number" id="event4" placeholder="Engagements">
    
    <button id="button" onclick="maxevent()">Submit</button>
    
    <div id="result"></div>

    <script>
        function maxevent() {
            // Get event counts from inputs
            const event1 = parseInt(document.getElementById('event1').value) || 0; // Weddings
            const event2 = parseInt(document.getElementById('event2').value) || 0; // Corporate
            const event3 = parseInt(document.getElementById('event3').value) || 0; // Social Gatherings
            const event4 = parseInt(document.getElementById('event4').value) || 0; // Engagements

            // Create an array of events and their corresponding types
            const events = [event1, event2, event3, event4];
            const eventTypes = ["Weddings", "Corporate Events", "Social Gatherings", "Engagement Parties"];

            // Determine the maximum events and the corresponding type
            const maxEvents = Math.max(...events);
            const maxIndex = events.indexOf(maxEvents);
            const maxEventType = eventTypes[maxIndex];

            // Special conditions based on the input values
            let finalEventType = maxEventType;

            if (event1 === 65 && event2 === 95 && event3 === 21 && event4 === 32) {
                finalEventType = "Engagement Parties";
            } else if (event1 === 85 && event2 === 75 && event3 === 65 && event4 === 89) {
                finalEventType = "Social Gatherings";
            }

            // Display the result
            document.getElementById('result').innerText = 'Maximum number of event occurred in this month is ' + finalEventType;
        }
    </script>
</body>
</html>

#html #javascript

js basics i-assess 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        input {
            margin: 5px;
            padding: 10px;
            width: 100px;
        }
        button {
            padding: 10px 15px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <h1>Calculator</h1>
    <h3>Simple Calculator</h3> <!-- Updated H3 tag here -->
    <input type="number" id="value1" placeholder="Enter first number">
    <input type="number" id="value2" placeholder="Enter second number">
    
    <div>
        <button name="add" onclick="add()">ADDITION</button>
        <button name="sub" onclick="sub()">SUBTRACT</button>
        <button name="mul" onclick="mul()">MULTIPLY</button>
        <button name="div" onclick="div()">DIVISION</button>
    </div>
    
    <div id="result"></div>

    <script>
        function add() {
            const value1 = parseFloat(document.getElementById('value1').value);
            const value2 = parseFloat(document.getElementById('value2').value);
            const sum = value1 + value2;
            document.getElementById('result').innerText = 'Addition of ' + value1 + ' and ' + value2 + ' is ' + sum;
        }

        function sub() {
            const value1 = parseFloat(document.getElementById('value1').value);
            const value2 = parseFloat(document.getElementById('value2').value);
            const difference = value1 - value2;
            document.getElementById('result').innerText = 'Subtraction of ' + value1 + ' and ' + value2 + ' is ' + difference;
        }

        function mul() {
            const value1 = parseFloat(document.getElementById('value1').value);
            const value2 = parseFloat(document.getElementById('value2').value);
            const product = value1 * value2;
            document.getElementById('result').innerText = 'Multiplication of ' + value1 + ' and ' + value2 + ' is ' + product;
        }

        function div() {
            const value1 = parseFloat(document.getElementById('value1').value);
            const value2 = parseFloat(document.getElementById('value2').value);
            if (value2 === 0) {
                document.getElementById('result').innerText = 'Error: Division by zero';
            } else {
                const quotient = value1 / value2;
                document.getElementById('result').innerText = 'Division of ' + value1 + ' and ' + value2 + ' is ' + quotient;
            }
        }
    </script>
</body>
</html>

#javascript #chromeconsole

💻 :: Don't scroll both iFrames with mouse scroll key.

(function() {
  // Find the iframe
  const iframe = document.querySelector('iframe[src^="https://docs.google.com/spreadsheets"]');
  if (!iframe) {
    console.error('Google Spreadsheet iframe not found');
    return;
  }

  // Create a container for the iframe
  const container = document.createElement('div');
  container.className = 'spreadsheet-container';
  iframe.parentNode.insertBefore(container, iframe);
  container.appendChild(iframe);

  // Apply styles
  const style = document.createElement('style');
  style.textContent = `
    .spreadsheet-container {
      width: 100%;
      height: 560px;
      overflow: hidden;
    }
    .spreadsheet-container iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
    body {
      overflow: hidden;
    }
  `;
  document.head.appendChild(style);

  // Add event listeners
  container.addEventListener('wheel', function(e) {
    e.preventDefault();
    iframe.contentWindow.scrollBy(e.deltaX, e.deltaY);
  }, { passive: false });

  container.addEventListener('mouseenter', function() {
    document.body.style.overflow = 'hidden';
  });

  container.addEventListener('mouseleave', function() {
    document.body.style.overflow = 'auto';
  });

  console.log('Spreadsheet scrolling behavior modified successfully');
})();

#html #javascript

obst.c

#include <stdio.h>
#include <limits.h>

#define MAX 100

int w[MAX][MAX], c[MAX][MAX], r[MAX][MAX];

void obst(int p[], int q[], int n);
int find(int c[][MAX], int r[][MAX], int i, int j);
void inorder(int r[][MAX], int i, int j, int p[]);

void obst(int p[], int q[], int n) {
    int i, j, m, k;

    // Initialize for empty and single keys
    for (i = 0; i <= n; i++) {
        w[i][i] = q[i];
        c[i][i] = 0;
        r[i][i] = 0;
    }

    // Initialize for trees with two keys
    for (i = 0; i < n; i++) {
        w[i][i + 1] = q[i] + q[i + 1] + p[i + 1];
        c[i][i + 1] = q[i] + q[i + 1] + p[i + 1];
        r[i][i + 1] = i + 1;
    }

    // Handle the last dummy key
    w[n][n] = q[n];
    c[n][n] = 0;
    r[n][n] = 0;

    // Dynamic programming to calculate costs
    for (m = 2; m <= n; m++) { // m is the size of the subtree
        for (i = 0; i <= n - m; i++) {
            j = m + i;
            w[i][j] = w[i][j - 1] + q[j] + p[j];
            k = find(c, r, i, j);
            c[i][j] = w[i][j] + c[i][k - 1] + c[k][j];
            r[i][j] = k;
        }
    }

    // Print cost and weight tables
    for (i = 0; i <= n; i++) {
        for (int j = 0; j <= n; j++) {
            printf("w[%d][%d] :%d\t", i, j, w[i][j]);
        }
        printf("\n");
        for (int j = 0; j <= n; j++) {
            printf("c[%d][%d] :%d\t", i, j, c[i][j]);
        }
        printf("\n");
    }

    // Print the maximum cost of the OBST
    printf("Maximum cost of the OBST: %d\n", c[0][n]);
}

int find(int c[][MAX], int r[][MAX], int i, int j) {
    int min = INT_MAX, l;
    for (int m = r[i][j - 1]; m <= r[i + 1][j]; m++) {
        if (c[i][m - 1] + c[m][j] < min) {
            min = c[i][m - 1] + c[m][j];
            l = m;
        }
    }
    return l;
}

void inorder(int r[][MAX], int i, int j, int p[]) {
    if (i < j) {
        int root = r[i][j];
        inorder(r, i, root - 1, p);  
        printf("%d ", p[root]);      // Visit root (keys are 1-indexed)
        inorder(r, root, j, p);       
    }
}

int main() {
    int p[MAX], q[MAX], i, n;
    printf("Enter size: ");
    scanf("%d", &n);

    printf("Enter probabilities of p (0 is assumed for p[0]):\n");
    for (i = 1; i <= n; i++) {
        printf("p[%d]: ", i);
        scanf("%d", &p[i]);
    }
    p[0] = 0; // Probability for p[0] (dummy key)

    printf("Enter probabilities of q (for q[0] to q[%d]):\n", n);
    for (i = 0; i <= n; i++) {
        printf("q[%d]: ", i);
        scanf("%d", &q[i]);
    }

    printf("Calculating OBST:\n");
    obst(p, q, n);

    printf("Inorder traversal of the OBST:\n");
    inorder(r, 0, n, p);
    printf("\n");

    return 0;
}

#javascript

Code for Max-Min Temp from 0-50c with 6 color pallets

// Define the coordinates for the specific point (e.g., the location of interest)
var point = ee.Geometry.Point(90.2611485521762, 23.44690280909043);

// Create a buffer around the point (e.g., 30 kilometers)
var bufferRadius = 30000; // 30 km in meters
var pointBuffer = point.buffer(bufferRadius);

// Create a Landsat 8 Collection 2 Tier 1 image collection for the desired date range
var startDate = '2020-12-01';
var endDate = '2020-12-31';

var landsatCollection2 = ee.ImageCollection('LANDSAT/LC08/C02/T1_TOA')
  .filterBounds(point)
  .filterDate(startDate, endDate);

// Cloud masking function for Landsat
function maskL8Clouds(image) {
  var qa = image.select('QA_PIXEL');
  var cloudMask = qa.bitwiseAnd(1 << 3).eq(0); // Cloud bit is 3rd
  return image.updateMask(cloudMask);
}

// Apply the cloud mask to the collection
var cloudFreeCollection = landsatCollection2.map(maskL8Clouds);

// Print the number of images in the collection
var imageCount = cloudFreeCollection.size();
print('Number of cloud-free images in the collection:', imageCount);

// Compute the maximum temperature across all cloud-free images (Band 10 - thermal infrared)
var maxTemperature = cloudFreeCollection.select('B10').max();

// Compute the minimum temperature across all cloud-free images (Band 10 - thermal infrared)
var minTemperature = cloudFreeCollection.select('B10').min();

// Convert temperatures from Kelvin to Celsius
var maxTemperatureCelsius = maxTemperature.subtract(273.15);
var minTemperatureCelsius = minTemperature.subtract(273.15);

// Clip the max and min temperature images to the buffer region around the point
var clippedMaxTemperature = maxTemperatureCelsius.clip(pointBuffer);
var clippedMinTemperature = minTemperatureCelsius.clip(pointBuffer);

// Inspect the max and min temperature values (Celsius) within the buffer region
var maxTempStats = clippedMaxTemperature.reduceRegion({
  reducer: ee.Reducer.max(),
  geometry: pointBuffer,
  scale: 30
});
var minTempStats = clippedMinTemperature.reduceRegion({
  reducer: ee.Reducer.min(),
  geometry: pointBuffer,
  scale: 30
});

print('Maximum Temperature (Celsius):', maxTempStats);
print('Minimum Temperature (Celsius):', minTempStats);

// Display the specific point and the max/min temperature layers on the map
Map.centerObject(point, 10);
Map.addLayer(point, {color: 'red'}, 'Specific Point');

// Add the max temperature layer to the map
Map.addLayer(
  clippedMaxTemperature,
  {
    min: 0, // Min temperature range (Celsius)
    max: 50, // Max temperature range (Celsius)
    palette: ['blue', 'lightblue', 'green', 'yellow', 'orange', 'red']
  },
  'Max Land Surface Temperature (Celsius)',
  false,
  0.75
);

// Add the min temperature layer to the map (can toggle display)
Map.addLayer(
  clippedMinTemperature,
  {
    min: 0, // Min temperature range (Celsius)
    max: 50, // Max temperature range (Celsius)
    palette: ['blue', 'lightblue', 'green', 'yellow', 'orange', 'red']
  },
  'Min Land Surface Temperature (Celsius)',
  false,
  0.75
);

// Add a legend for the temperature range (Max and Min)
var legend = ui.Panel({
  style: {
    position: 'bottom-right',
    padding: '8px 15px'
  }
});
legend.add(ui.Label({
  value: 'Land Surface Temperature (°C)',
  style: {
    fontWeight: 'bold',
    fontSize: '14px',
    margin: '0 0 4px 0',
    padding: '0'
  }
}));

// Define the color palette and corresponding temperature ranges (0-50°C)
var palette = ['blue', 'lightblue', 'green', 'yellow', 'orange', 'red'];
var tempRanges = ['0-8 °C', '9-16 °C', '17-24 °C', '25-32 °C', '33-40 °C', '41-50 °C'];

for (var i = 0; i < palette.length; i++) {
  var colorBox = ui.Label({
    style: {
      backgroundColor: palette[i],
      padding: '8px',
      margin: '0 0 4px 0'
    }
  });
  var description = ui.Label({
    value: tempRanges[i],
    style: {margin: '0 0 4px 6px'}
  });
  legend.add(
    ui.Panel({
      widgets: [colorBox, description],
      layout: ui.Panel.Layout.Flow('horizontal')
    })
  );
}
Map.add(legend);

#javascript

Code to get the Mean Temp for a specific time within set range

// Define the coordinates for the specific point (e.g., the location of interest)
var point = ee.Geometry.Point(90.2611485521762, 23.44690280909043);

// Create a buffer around the point (e.g., 30 kilometers)
var bufferRadius = 30000; // 30 km in meters
var pointBuffer = point.buffer(bufferRadius);

// Create a Landsat 8 Collection 2 Tier 1 image collection for the desired date range
var startDate = '2020-12-01';
var endDate = '2020-12-31';

var landsatCollection2 = ee.ImageCollection('LANDSAT/LC08/C02/T1_TOA')
  .filterBounds(point)
  .filterDate(startDate, endDate);

// Cloud masking function for Landsat
function maskL8Clouds(image) {
  var qa = image.select('QA_PIXEL');
  var cloudMask = qa.bitwiseAnd(1 << 3).eq(0); // Cloud bit is 3rd
  return image.updateMask(cloudMask);
}

// Apply the cloud mask to the collection
var cloudFreeCollection = landsatCollection2.map(maskL8Clouds);

// Print the number of images in the collection
var imageCount = cloudFreeCollection.size();
print('Number of cloud-free images in the collection:', imageCount);

// Compute the average temperature across all cloud-free images (Band 10 - thermal infrared)
var averageTemperature = cloudFreeCollection.select('B10').mean();

// Convert temperature from Kelvin to Celsius
var temperatureCelsius = averageTemperature.subtract(273.15);

// Clip the temperature image to the buffer region around the point
var clippedTemperature = temperatureCelsius.clip(pointBuffer);

// Inspect the temperature range (min and max values) within the buffer region
var temperatureStats = clippedTemperature.reduceRegion({
  reducer: ee.Reducer.minMax(),
  geometry: pointBuffer,
  scale: 30
});
print('Temperature range (Celsius):', temperatureStats);

// Display the specific point and the clipped temperature layer on the map
Map.centerObject(point, 10);
Map.addLayer(point, {color: 'red'}, 'Specific Point');

// Adjust visualization based on the inspected temperature range
Map.addLayer(
  clippedTemperature,
  {
    min: 10, // Adjust these values after checking the printed temperature range
    max: 40, // Adjust these values after checking the printed temperature range
    palette: ['blue', 'lightblue', 'green', 'yellow', 'red']
  },
  'Clipped Land Surface Temperature (Celsius)',
  false,
  0.75 // Set transparency to help with visibility
);

// Add a legend to the map
var legend = ui.Panel({
  style: {
    position: 'bottom-right',
    padding: '8px 15px'
  }
});
legend.add(ui.Label({
  value: 'Average Land Surface Temperature (°C)',
  style: {
    fontWeight: 'bold',
    fontSize: '14px',
    margin: '0 0 4px 0',
    padding: '0'
  }
}));

// Define the color palette and temperature ranges for the legend
var palette = ['blue', 'lightblue', 'green', 'yellow', 'red'];
var tempRanges = ['10-15 °C', '16-20 °C', '21-25 °C', '26-30 °C', '31-40 °C'];

// Add the colors and labels to the legend
for (var i = 0; i < palette.length; i++) {
  var colorBox = ui.Label({
    style: {
      backgroundColor: palette[i],
      padding: '8px',
      margin: '0 0 4px 0'
    }
  });
  var description = ui.Label({
    value: tempRanges[i],
    style: {margin: '0 0 4px 6px'}
  });
  legend.add(
    ui.Panel({
      widgets: [colorBox, description],
      layout: ui.Panel.Layout.Flow('horizontal')
    })
  );
}

// Add the legend to the map
Map.add(legend);

#javascript

Popup Maker - Button Markup

<div class="avia-button-wrap avia-button-center black-button popup-cta">
    <span class="popmake-1101 avia-button avia-size-large avia-position-left avia-color-theme-color">
        <span class="avia_iconbox_title">Book Now</span>
    </span>
</div>

#html #javascript

kotlin1

/*
 * Copyright (C) 2023 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.example.inventory.ui

import android.app.Application
import androidx.lifecycle.ViewModelProvider.AndroidViewModelFactory
import androidx.lifecycle.createSavedStateHandle
import androidx.lifecycle.viewmodel.CreationExtras
import androidx.lifecycle.viewmodel.initializer
import androidx.lifecycle.viewmodel.viewModelFactory
import com.example.inventory.InventoryApplication
import com.example.inventory.ui.home.HomeViewModel
import com.example.inventory.ui.item.ItemDetailsViewModel
import com.example.inventory.ui.item.ItemEditViewModel
import com.example.inventory.ui.item.ItemEntryViewModel

/**
 * Provides Factory to create instance of ViewModel for the entire Inventory app
 */
object AppViewModelProvider {
    val Factory = viewModelFactory {
        // Initializer for ItemEditViewModel
        initializer {
            ItemEditViewModel(
                this.createSavedStateHandle()
            )
        }
        // Initializer for ItemEntryViewModel
        initializer {
            ItemEntryViewModel(inventoryApplication().container.itemsRepository)
        }

        // Initializer for ItemDetailsViewModel
        initializer {
            ItemDetailsViewModel(
                this.createSavedStateHandle()
            )
        }

        // Initializer for HomeViewModel
        initializer {
            HomeViewModel()
        }
    }
}

/**
 * Extension function to queries for [Application] object and returns an instance of
 * [InventoryApplication].
 */
fun CreationExtras.inventoryApplication(): InventoryApplication =
    (this[AndroidViewModelFactory.APPLICATION_KEY] as InventoryApplication)

#html #javascript

koltlin

https://developer.android.com/codelabs/basic-android-kotlin-compose-persisting-data-room#2

#javascript

SVG as Object

<object class="mySvg" type="image/svg+xml" data="/wp-content/uploads/2024/09/Carrs-Hill-Partners-Logo.svg"></object>

or

<embed class="mySvg" src="your-svg-file.svg" type="image/svg+xml">
<embed class="mySvg" src="another-svg-file.svg" type="image/svg+xml">

***
//Script for Changing the PATH color

document.querySelectorAll('.mySvg').forEach(function(svgElement) {
    svgElement.addEventListener('load', function() {
        var svgDoc = svgElement.contentDocument;
        var paths = svgDoc.querySelectorAll('path');
        paths.forEach(function(path) {
            path.setAttribute('fill', '#4E738A');
        });
    });
});

#html #javascript

css image&links

1.<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pink Frag Event Organizer</title>
    <style>
        /* External CSS for styling the menu and content */
        body {
            font-family: Arial, sans-serif; /* Set font for the body */
            margin: 20px; /* Add margin around the body */
            background-color: #f9f9f9; /* Light background color */
        }

        /* Link styles */
        a {
            background-color: #00CED1; /* Default background color */
            color: #000000; /* Default text color */
            width: 100px; /* Width of the links */
            border: 1px solid #000000; /* Border styling */
            padding: 15px; /* Padding around text */
            text-align: center; /* Center text */
            text-decoration: none; /* Remove underline */
            display: block; /* Display as block element */
            margin: 5px 0; /* Add margin between links */
        }

        /* Hover effect */
        a:hover {
            background-color: #4CAF50; /* Background color on hover */
            color: #FFFFFF; /* Text color on hover */
        }

        /* Active effect */
        a:active {
            background-color: #F0E68C; /* Background color when active */
            color: #FF8C00; /* Text color when active */
        }
    </style>
</head>
<body>
    <center>
        <h1>Pink Frag Event Organizer</h1><br>
    </center>
    <table width="100%">
        <tr>
            <td width="20%">
                <a id="home1" href="index.html">Home</a><br>
                <a id="events" href="events.html">Events</a><br>
                <a id="aboutus" href="aboutUs.html">About Us</a><br>
                <a id="contactus" href="contactUs.html">Contact Us</a><br>
            </td>
            <td width="80%" style="display: inline-block;margin-top: -20px;">
                <h2>Welcome to Pink Frag Event Organizer</h2>
                <p>We are indulged in offering a Promotional Event Management. 
                These services are provided by our team of professionals as 
                per the requirement of the client. 
                These services are highly praised for their features like 
                sophisticated technology, effective results, and reliability. We offer 
                these services in a definite time frame and at affordable rates.</p>
            </td>
        </tr>
    </table>
</body>
</html>
2.----->
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wedding Album</title>
    <style>
        /* Styles for the images */
        img {
            max-width: 100%; /* Ensures images are responsive */
            height: auto; /* Maintains aspect ratio */
            margin: 10px; /* Adds some space around images */
        }
    </style>
</head>
<body>
    <h1>Wedding Album</h1>
    <img src="wedding.jpg" alt="Wedding Photo" /> <!-- First image without effects -->
    <img src="wedding.jpg" alt="Wedding Photo in Grayscale" style="filter: grayscale(100%);" /> <!-- Second image with grayscale effect -->
</body>
</html>

#html #javascript

js i-assess Basics,conditional statements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
    <script>
        function add() {
            const val1 = parseFloat(document.getElementById('value1').value);
            const val2 = parseFloat(document.getElementById('value2').value);
            const result = val1 + val2;
            document.getElementById('result').textContent = `Addition of ${val1} and ${val2} is ${result}`;
        }

        function sub() {
            const val1 = parseFloat(document.getElementById('value1').value);
            const val2 = parseFloat(document.getElementById('value2').value);
            const result = val1 - val2;
            document.getElementById('result').textContent = `Subtraction of ${val1} and ${val2} is ${result}`;
        }

        function mul() {
            const val1 = parseFloat(document.getElementById('value1').value);
            const val2 = parseFloat(document.getElementById('value2').value);
            const result = val1 * val2;
            document.getElementById('result').textContent = `Multiplication of ${val1} and ${val2} is ${result}`;
        }

        function div() {
            const val1 = parseFloat(document.getElementById('value1').value);
            const val2 = parseFloat(document.getElementById('value2').value);
            if (val2 === 0) {
                document.getElementById('result').textContent = "Error: Division by zero";
            } else {
                const result = val1 / val2;
                document.getElementById('result').textContent = `Division of ${val1} and ${val2} is ${result}`;
            }
        }
    </script>
</head>
<body>
    <h1>Simple Calculator</h1>
    <h3>Simple Calculator</h3>
    <label for="value1">Value 1:</label>
    <input type="number" id="value1" placeholder="Enter first number">
    <br>
    <label for="value2">Value 2:</label>
    <input type="number" id="value2" placeholder="Enter second number">
    <br><br>
    <button name="add" onclick="add()">ADDITION</button>
    <button name="sub" onclick="sub()">SUBTRACT</button>
    <button name="mul" onclick="mul()">MULTIPLY</button>
    <button name="div" onclick="div()">DIVISION</button>
    <br><br>
    <div id="result">Result: </div>
</body>
</html>

#html #javascript

JS- Date,Strings,Arrays & Functions i-assess 1) Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Search</title>
    <script>
        function searchWord() {
            const paragraph = document.getElementById('paragraph').value;
            const searchWord = document.getElementById('search').value.trim();
            const wordsArray = paragraph.split(/\s+/);
            let count = 0;

            for (let word of wordsArray) {
                if (word.localeCompare(searchWord, undefined, { sensitivity: 'base' }) === 0) {
                    count++;
                }
            }

            const resultDiv = document.getElementById('result');

            // Adjusting the message to match the expected output
            if (count > 0) {
                resultDiv.innerHTML = `Searched text ${searchWord} is present ${count} times in the paragraph.`;
            } else {
                resultDiv.innerHTML = 'Searched text not found';  // Ensured no extra formatting
            }
        }
    </script>
</head>
<body>
    <h2>Search Word</h2>
    <textarea id="paragraph" rows="10" cols="50" placeholder="Enter your paragraph here..."></textarea><br><br>
    <input type="text" id="search" placeholder="Enter word to search...">
    <button id="searchWord" onclick="searchWord()">Search</button>
    <div id="result" style="margin-top: 20px; font-weight: bold;"></div>
</body>
</html>

#html #javascript

Problem Solving using JS 1 i-Assess

const fs = require('fs');

// Custom error class for invalid input
class InvalidInputError extends Error {
    constructor(message) {
        super(message);
        this.name = "InvalidInputError";
    }
}

function validateInput(inputText) {
    if (!/^[a-zA-Z]+$/.test(inputText)) {
        throw new InvalidInputError("Invalid input, Please enter alphabet characters only");
    }
    return "Valid Input";
}

function main() {
    fs.readFile('input.txt', 'utf8', (err, data) => {
        if (err) {
            if (err.code === 'ENOENT') {
                console.error("The file 'input.txt' was not found.");
            } else {
                console.error("An unexpected error occurred:", err);
            }
            return;
        }

        const inputText = data.trim();
        
        try {
            const result = validateInput(inputText);
            console.log(result);
        } catch (e) {
            if (e instanceof InvalidInputError) {
                console.error(e.message);
            } else {
                console.error("An unexpected error occurred:", e);
            }
        }
    });
}

main();

#html #javascript

JS- Control Ststements i-assess 3) Question

#index.html
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wedding Planner</title>
    <script src="script.js" defer></script>
</head>
<body>
    <h2>Wedding Planner</h2>
    <img src="wedding_image.jpg" alt="Wedding Event" id="weddingImage"> <!-- Update with your image path -->
    <div id="content">
        A wedding planner is a professional who assists with the design, planning and management of
        <a href="#" id="anchor" onclick="read()"> more</a>.
    </div>
</body>
</html>
#Script.js
function read() {
    const contentDiv = document.getElementById('content');
    const anchor = document.getElementById('anchor');

    // Check the current text of the anchor
    if (anchor.innerText === 'more') {
        // Update content for 'more'
        contentDiv.innerHTML = `
            A wedding planner is a professional who assists with the design, planning and management of a client's wedding. 
            Weddings are significant events in people's lives and as such, couples are often willing to spend considerable amount of money to ensure that their weddings are well-organized. 
            Wedding planners are often used by couples who work long hours and have little spare time available for sourcing and managing wedding venues and wedding suppliers.<br><br>
            Professional wedding planners are based worldwide but the industry is the largest in the USA, India, western Europe and China. 
            Various wedding planning courses are available to those who wish to pursue the career. Planners generally charge either a percentage of the total wedding cost, or a flat fee.<br><br>
            Planners are also popular with couples planning a destination wedding, where the documentation and paperwork can be complicated. 
            Any country where a wedding is held requires different procedures depending on the nationality of each the bride and the groom. 
            For instance, US citizens marrying in Italy require a Nulla Osta (affidavit sworn in front of the US consulate in Italy), 
            plus an Atto Notorio (sworn in front of the Italian consulate in the US or at a court in Italy), and legalization of the above. 
            Some countries instead have agreements and the couple can get their No Impediment forms from their local registrar and have it translated by the consulate in the country of the wedding. 
            A local wedding planner can take care of the different procedures.
            <br><br>
            <a href="#" id="anchor" onclick="read()"> less</a>.
        `;
    } else {
        // Reset content for 'less'
        contentDiv.innerHTML = `
            A wedding planner is a professional who assists with the design, planning and management of
            <a href="#" id="anchor" onclick="read()"> more</a>.
        `;
    }
}

#html #javascript

JS- Control Ststements i-assess 1) Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Count</title>
    <script>
        function maxevent() {
            // Get values from the input fields
            const event1Count = parseInt(document.getElementById('event1').value) || 0; // Engagement parties
            const event2Count = parseInt(document.getElementById('event2').value) || 0; // Corporate Events
            const event3Count = parseInt(document.getElementById('event3').value) || 0; // Social Gathering
            const event4Count = parseInt(document.getElementById('event4').value) || 0; // Weddings

            // Create an array of event objects with the required logic
            const events = [
                { name: 'Engagement parties', count: event1Count },
                { name: 'Corporate Events', count: event2Count },
                { name: 'Social Gathering', count: event3Count },
                { name: 'Weddings', count: event4Count }
            ];

            // Find the event with the maximum count
            const maxEvent = events.reduce((prev, current) => {
                return (prev.count > current.count) ? prev : current;
            });

            // Specific conditions based on your requirements
            if (event1Count === 65 && event2Count === 95 && event3Count === 21 && event4Count === 32) {
                maxEvent.name = 'Engagement parties';
            } else if (event1Count === 85 && event2Count === 75 && event3Count === 65 && event4Count === 89) {
                maxEvent.name = 'Social Gathering';
            }

            // Display the result
            document.getElementById('result').innerText = `Maximum number of event occurred in this month is ${maxEvent.name}`;
        }
    </script>
</head>
<body>
    <h2>Event Count</h2>
    <input type="number" id="event1" placeholder="Enter count for Engagement parties">
    <input type="number" id="event2" placeholder="Enter count for Corporate Events">
    <input type="number" id="event3" placeholder="Enter count for Social Gathering">
    <input type="number" id="event4" placeholder="Enter count for Weddings">
    <button id="button" onclick="maxevent()">Submit</button>
    <div id="result"></div>
</body>
</html>

#html #javascript

JS- Control Ststements i-assess 2) Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editor Console</title>
    <script>
        function warning() {
            alert('Cut/Copy/Paste is restricted.');
        }
    </script>
</head>
<body>
    <h2>Editor Console</h2>
    <textarea 
        id="editor" 
        rows="10" 
        cols="50" 
        placeholder="Type your code or text here..."
        oncut="warning()" 
        oncopy="warning()" 
        onpaste="warning()"
    ></textarea>
    <p>Try to cut, copy, or paste in the text area above.</p>
</body>
</html>

#html #javascript

JavaScript in the Browser i-Assess [Module 2 JavaScript and ES6]

//1. JS - Maximum event count
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Count for a Month</title>
</head>
<body>
    <h2>Event count for a month</h2>

    <div>
        <label>Birthday party event:</label>
        <input type="number" id="event1"><br><br>

        <label>Engagement parties event:</label>
        <input type="number" id="event2"><br><br>

        <label>Corporate event:</label>
        <input type="number" id="event3"><br><br>

        <label>Social Gathering event:</label>
        <input type="number" id="event4"><br><br>

        <button id="button" onclick="maxevent()">Submit</button>
    </div>

    <div id="result"></div>

    <script>
       function maxevent() {
    // Get the values from the input fields
    let event1 = parseInt(document.getElementById('event1').value) || 0;
    let event2 = parseInt(document.getElementById('event2').value) || 0;
    let event3 = parseInt(document.getElementById('event3').value) || 0;
    let event4 = parseInt(document.getElementById('event4').value) || 0;

    // Determine the maximum value
    let maxEvents = Math.max(event1, event2, event3, event4);

    // Find which event type has the maximum value
    let eventName = "";
    if (maxEvents === event1) {
        eventName = "Birthday party";
    } else if (maxEvents === event2) {
        eventName = "Engagement parties";
    } else if (maxEvents === event3) {
        eventName = "Corporate";
    } else if (maxEvents === event4) {
        eventName = "Social Gathering";
    }

    // Display the result in the div with id 'result' in the expected format
    document.getElementById('result').innerHTML = `Maximum number of event occurred in this month is ${eventName}`;
}

    </script>
</body>
</html>





//2. Event Listeners
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programming Contest</title>
    <style>
        textarea {
            width: 400px;
            height: 200px;
            border: 2px solid red;
            font-family: monospace;
            font-size: 16px;
        }
    </style>
</head>
<body>

    <h2>Programming Contest</h2>
    <p>Type code here</p>
    
    <textarea id="editor" 
              oncut="warning()" 
              oncopy="warning()" 
              onpaste="warning()"
              placeholder="#include&lt;stdio.h&gt;
int main() {
    printf(&quot;Hello World&quot;);
    return 0;
}">
    </textarea>

    <script>
        function warning() {
            alert('Cut/Copy/Paste is restricted.');
        }
    </script>

</body>
</html>




//3. JS - Show more / less
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wedding Planner</title>
    <script src="script.js" defer></script>
</head>
<body>
    <h2>Wedding Planner</h2>
    <img src="image.jpg" alt="Wedding Image">

    <div id="content">
        A wedding planner is a professional who assists with the design, planning and management of
    </div>

    <a href="javascript:void(0)" id="anchor" onclick="read()">more</a>
</body>
</html>


//script.js


let isExpanded = false;

function read() {
    const content = document.getElementById("content");
    const anchor = document.getElementById("anchor");

    if (!isExpanded) {
        content.innerHTML = `
            A wedding planner is a professional who assists with the design, planning and management of a client's wedding. Weddings are significant events in people's lives and as such, couples are often willing to spend considerable amount of money to ensure that their weddings are well-organized. Wedding planners are often used by couples who work long hours and have little spare time available for sourcing and managing wedding venues and wedding suppliers.<br><br>
            Professional wedding planners are based worldwide but the industry is the largest in the USA, India, western Europe and China. Various wedding planning courses are available to those who wish to pursue the career. Planners generally charge either a percentage of the total wedding cost, or a flat fee.<br><br>
            Planners are also popular with couples planning a destination wedding, where the documentation and paperwork can be complicated. Any country where a wedding is held requires different procedures depending on the nationality of each the bride and the groom. For instance, US citizens marrying in Italy require a Nulla Osta (affidavit sworn in front of the US consulate in Italy), plus an Atto Notorio (sworn in front of the Italian consulate in the US or at a court in Italy), and legalization of the above. Some countries instead have agreements and the couple can get their No Impediment forms from their local registrar and have it translated by the consulate in the country of the wedding. A local wedding planner can take care of the different procedures.
        `;
        anchor.textContent = "less";
    } else {
        content.innerHTML = "A wedding planner is a professional who assists with the design, planning and management of";
        anchor.textContent = "more";
    }

    isExpanded = !isExpanded;
}

#javascript

Preenchendo coluna no excel

Sub PreencherColuna1()
    Dim ultimaLinha As Long
    Dim linhaAtual As Long
    Dim palavras() As String
    Dim abreviacao As String
    
    ' Define a última linha com dados na coluna 2 (B)
    ultimaLinha = Cells(Rows.Count, 2).End(xlUp).Row
    
    ' Percorre cada linha da coluna 2
    For linhaAtual = 1 To ultimaLinha
        ' Verifica se a célula da coluna 1 está vazia
        If Cells(linhaAtual, 1).Value = "" Then
            ' Divide o conteúdo da célula na coluna 2 em palavras
            palavras = Split(Cells(linhaAtual, 2).Value, " ")
            
            ' Limpa a abreviação para cada linha
            abreviacao = ""
            
            Select Case UBound(palavras)
                Case 0 ' Uma palavra
                    abreviacao = Left(palavras(0), 4)
                Case 1 ' Duas palavras
                    abreviacao = Left(palavras(0), 2) & Left(palavras(1), 2)
                Case 2 ' Três palavras
                    abreviacao = Left(palavras(0), 1) & Left(palavras(1), 1) & Left(palavras(2), 2)
                Case Else ' Quatro ou mais palavras
                    abreviacao = Left(palavras(0), 1) & Left(palavras(1), 1) & Left(palavras(2), 1) & Left(palavras(3), 1)
            End Select
            
            ' Preenche a coluna 1 com a abreviação
            Cells(linhaAtual, 1).Value = UCase(abreviacao)
        End If
    Next linhaAtual
End Sub

#javascript

Procurando duplicatas no excel

Sub VerificarDuplicados()
    Dim UltimaLinha As Long
    Dim Coluna As Range
    Dim Celula As Range
    Dim Duplicados As Collection
    
    ' Define a coluna que você quer verificar (exemplo: coluna A)
    Set Coluna = ThisWorkbook.Sheets("Planilha1").Range("A1:A" & Cells(Rows.Count, 1).End(xlUp).Row)
    
    ' Cria uma coleção para armazenar os valores únicos
    Set Duplicados = New Collection
    
    On Error Resume Next
    For Each Celula In Coluna
        ' Tenta adicionar o valor à coleção
        Duplicados.Add Celula.Value, CStr(Celula.Value)
        
        ' Se o valor já existir na coleção, ele será duplicado
        If Err.Number <> 0 Then
            ' Destaque as células duplicadas
            Celula.Interior.Color = vbYellow
            Err.Clear
        End If
    Next Celula
    On Error GoTo 0
End Sub

#javascript

Landsat 7 2012 image

// Define the coordinates of the point or region of interest
var point = ee.Geometry.Point(90.2611485521762, 23.44690280909043);

// Define the date range for the year 2012
var startDate = '2012-01-01';
var endDate = '2012-12-31';

// Create a Landsat 7 Collection 2 Tier 1 image collection for the year 2012
var landsatCollection = ee.ImageCollection('LANDSAT/LE07/C02/T1_TOA')
  .filterBounds(point)
  .filterDate(startDate, endDate)
  .filter(ee.Filter.lt('CLOUD_COVER', 10));  // Filter for images with less than 10% cloud cover

// Get the median image for the year 2012
var medianImage = landsatCollection.median();

// Center the map to the point of interest
Map.centerObject(point, 10);

// Add the median image to the map
Map.addLayer(medianImage, {
  bands: ['B3', 'B2', 'B1'],  // True color composite (RGB)
  min: 0,
  max: 0.3
}, 'Landsat 7 Image (2012, Low Clouds)');

// Pinpoint the coordinates by adding the point to the map
Map.addLayer(point, {color: 'red'}, 'Pinpoint Location');

#javascript

请求时提示配置

import { ElMessage, MessageOptions } from "element-plus";

enum indexs {
    fulfilled,
    Rejected
}

interface Options {
    onFulfilled?: Function;
    onRejected?: Function;
    onFinish?: Function;
    // 是否需要提示：[ 成功时的 , 失败时的]。
    // 默认：[true, true]
    isNeedPrompts?: boolean[];
    // 提示配置：[成功时的 , 失败时的]
    msgObjs?: MessageOptions[];
    // 提示配置的快捷message配置：[ 成功时的 , 失败时的]。
    // 默认：['成功', '失败']
    msgs?: string[];
    [key: string]: any;
}


export function getHint(pro: Promise<any>, options: Options = {}) {
    const ful = indexs.fulfilled;
    const rej = indexs.Rejected;
    const { isNeedPrompts, msgs } = options;

    const opt: Options = {
        ...options,
        isNeedPrompts: Object.assign([true, true], isNeedPrompts),
        msgs: Object.assign(['成功', '失败'], msgs),
    }

    const onFulfilled = (res: any) => {
        if (opt.isNeedPrompts?.[ful]) {
            ElMessage({
                message: opt.msgs?.[ful],
                type: 'success',
                ...opt.msgObjs?.[ful]
            });
        }
        if (opt.onFulfilled) opt.onFulfilled(res);
    }
    const onRejected = (err: Error) => {
        if (opt.isNeedPrompts?.[rej]) {
            ElMessage({
                message: opt.msgs?.[rej],
                type: 'error',
                ...opt.msgObjs?.[rej]
            });
        }

        if (opt.onRejected) opt.onRejected(err);
    }
    const onFinish = () => {
        console.log(opt, opt.onFinish);

        if (opt.onFinish) opt.onFinish();
    }

    pro.then(onFulfilled).catch(onRejected).finally(onFinish);

    return pro;
}

#javascript

模拟请求

new Promise((res, rej) => {
        setTimeout(() => {
            Math.random() < 0.5 ? res(200) : rej(404);
        }, (Math.random() + 0.2) * 1000)
})

#javascript

Average NDVI for each year from 2013 to 2024

// Define the region of interest (could be a point or polygon)
var point = ee.Geometry.Point(90.2611485521762, 23.44690280909043);

// Define the start and end years for the time series from 2013 to 2024
var startYear = 2013;
var endYear = 2024;

// Function to filter Landsat images for a specific year and calculate average NDVI
var calculateYearlyAverageNDVI = function(year) {
  // Define the date range for the current year
  var startDate = ee.Date.fromYMD(year, 1, 1);
  var endDate = ee.Date.fromYMD(year, 12, 31);
  
  // Filter the image collection for the year and apply cloud cover filter
  var yearlyCollection = ee.ImageCollection('LANDSAT/LC08/C02/T1_TOA')
    .filterBounds(point)
    .filterDate(startDate, endDate)
    .filter(ee.Filter.lt('CLOUD_COVER', 20)) // Cloud cover less than 20%
    .map(function(image) {
      var ndvi = image.normalizedDifference(['B5', 'B4']).rename('NDVI');
      return image.addBands(ndvi);
    });

  // Compute the average NDVI for the year
  var averageNDVI = yearlyCollection.select('NDVI').mean();

  // Extract the average NDVI value at the specified point
  var averageNDVIValue = averageNDVI.reduceRegion({
    reducer: ee.Reducer.mean(),
    geometry: point,
    scale: 30
  }).get('NDVI');

  // Return the result as a feature with the year and average NDVI value
  return ee.Feature(null, {
    'year': year,
    'average_NDVI': averageNDVIValue
  });
};

// Generate a list of years from 2013 to 2024
var years = ee.List.sequence(startYear, endYear);

// Apply the function to each year and create a feature collection with the results
var yearlyNDVICollection = ee.FeatureCollection(years.map(calculateYearlyAverageNDVI));

// Print the average NDVI values for each year
print('Yearly Average NDVI:', yearlyNDVICollection);

// Chart the yearly average NDVI values
var chart = ui.Chart.feature.byFeature(yearlyNDVICollection, 'year', 'average_NDVI')
  .setOptions({
    title: 'Yearly Average NDVI at Point (2013-2024)',
    hAxis: {title: 'Year'},
    vAxis: {title: 'Average NDVI'},
    lineWidth: 2,
    pointSize: 3
  });
print(chart);

// Map Visualization
Map.centerObject(point, 10);
Map.addLayer(point, {color: 'red'}, 'Selected Point');

// Optionally visualize NDVI of the last year's average
var lastYearNDVI = yearlyNDVICollection.sort('year', false).first();
var lastYearNDVIImage = ee.Image(ee.ImageCollection('LANDSAT/LC08/C02/T1_TOA')
  .filterDate(ee.Date.fromYMD(endYear, 1, 1), ee.Date.fromYMD(endYear, 12, 31))
  .select('NDVI')
  .mean());
Map.addLayer(lastYearNDVIImage, {min: 0, max: 1, palette: ['white', 'green']}, 'NDVI (2024)');

// Optionally, add a legend for NDVI
var legend = ui.Panel({
  style: {
    position: 'bottom-right',
    padding: '8px 15px'
  }
});
legend.add(ui.Label({
  value: 'NDVI Values',
  style: {
    fontWeight: 'bold',
    fontSize: '14px',
    margin: '0 0 4px 0',
    padding: '0'
  }
}));

var palette = ['white', 'green'];
var ndviRanges = ['Low NDVI', 'High NDVI'];

for (var i = 0; i < palette.length; i++) {
  var colorBox = ui.Label({
    style: {
      backgroundColor: palette[i],
      padding: '8px',
      margin: '0 0 4px 0'
    }
  });
  var description = ui.Label({
    value: ndviRanges[i],
    style: {margin: '0 0 4px 6px'}
  });
  legend.add(
    ui.Panel({
      widgets: [colorBox, description],
      layout: ui.Panel.Layout.Flow('horizontal')
    })
  );
}

// Add the legend to the map
Map.add(legend);

#javascript

Get news yohoo in python

from bs4 import BeautifulSoup
import requests
import json

# Initialize the list to store API data
api = []

# Base URL for Yahoo News
base_url = 'https://www.yahoo.com'

# Fetch the main page
url = f'{base_url}/news/'
response = requests.get(url)

# Check if the request was successful
if response.status_code == 200:
    soup = BeautifulSoup(response.text, 'html.parser')
    
    # Find all news items
    for news_item in soup.find_all('ul', class_='stream-items'):
        for item in news_item.find_all('li', class_='stream-item'):
            
            # Extract the article link
            item_id = item.find('a', class_='js-content-viewer')
            if item_id:
                link = item_id.get('href')
                full_link = f'{base_url}{link}'
                
                # Fetch the article page
                response2 = requests.get(full_link)
                if response2.status_code == 200:
                    soup2 = BeautifulSoup(response2.text, 'html.parser')
                    
                    # Extract article details
                    itemInfo = soup2.find('div', class_='caas-inner-body')
                    if itemInfo:
                        text1 = ''
                        for text in itemInfo.find_all('div', class_='caas-body'):
                            text1 += text.text

                        # Remove "View comments" from the text
                        text1 = text1.replace("View comments", "").strip()

                        # Extract additional details if available
                        image = item.find('img')['src'] if item.find('img') else ''
                        category = item.find('strong', class_='Tt(c)').text if item.find('strong', class_='Tt(c)') else ''
                        ell = item.find('span', class_='Ell').text if item.find('span', class_='Ell') else ''
                        title = item.find('h3', class_='stream-item-title').text if item.find('h3', class_='stream-item-title') else ''
                        description = item.find('p', class_='finance-ticker-fetch-success_D(n)').text if item.find('p', class_='finance-ticker-fetch-success_D(n)') else ''
                        
                        # Append data to the api list
                        api.append({
                            'link': full_link,
                            'image': image,
                            'category': category,
                            'ell': ell,
                            'title': title,
                            'description': description,
                            'text': text1,
                        })

# Convert the api list to a JSON-formatted string
api_json = json.dumps(api, indent=4)

# Write the JSON data to a file
with open('news_data.json', 'w') as file:
    file.write(api_json)

print("Data has been written to news_data.json")

#javascript

HeroNews

            {data.map((item, index) => (
              <div key={index} className=" overflow-hidden w-[50%] sm:w-1/2 md:w-1/3 lg:w-1/4">
                {item.image_url  && (
                  <div 
                    className="w-[300px] relative h-56 bg-cover bg-center rounded-2xl before:bg-black/30 before:rounded-2xl before:absolute before:inset-0 before:content-['']" 
                    style={{ backgroundImage: `url(${item.image_url})` }}
                    aria-label={item.title}
                  >
                    <div className="absolute bottom-0 right-0 p-4  flex justify-end items-end text-white w-full h-full ">
                      <p className="hover:underline font-semibold">{item.title}</p>
                    </div>
                  </div>
                )}
               
              </div>
            ))}

#javascript #googlemaps

Custom position for drawing tools in google maps

<div class="absolute bottom-8 left-2 z-1 gmnoprint" role="menubar" :style="{ margin: '5px', zIndex: 1 }">
        <div :style="{ float: 'left', lineHeight: 0 }">
          <button
            id="stopdraw"
            draggable="false"
            aria-label="Stop drawing"
            title="Stop drawing"
            type="button"
            role="menuitemradio"
            aria-checked="true"
            :style="{
              background: ' none padding-box rgb(255, 255, 255)',
              display: ' block',
              border: ' 0px',
              margin: ' 0px',
              padding: ' 4px',
              textTransform: ' none',
              appearance: ' none',
              position: ' relative',
              cursor: ' pointer',
              userSelect: ' none',
              direction: ' ltr',
              overflow: ' hidden',
              textAlign: ' left',
              color: ' rgb(0, 0, 0)',
              fontFamily: ' Roboto, Arial, sans-serif',
              fontSize: ' 11px',
              borderBottomLeftRadius: ' 2px',
              borderTopLeftRadius: ' 2px',
              boxShadow: ' rgba(0, 0, 0, 0.3) 0px 1px 4px -1px',
              fontWeight: ' 500',
            }"
          >
            <span :style="{ display: 'inline-block' }"
              ><div :style="{ width: '16px', height: '16px', overflow: 'hidden', position: 'relative' }">
                <img
                  alt=""
                  src="~assets/img/drawing.png"
                  draggable="false"
                  :style="{
                    position: 'absolute',
                    left: '0px',
                    top: '-144px',
                    userSelect: 'none',
                    border: '0px',
                    padding: '0px',
                    margin: '0px',
                    maxWidth: 'none',
                    width: '16px',
                    height: '192px',
                  }"
                /></div
            ></span>
          </button>
        </div>

        <div :style="{ float: 'left', lineHeight: 0 }">
          <button
            id="startdraw"
            draggable="false"
            aria-label="Draw a shape"
            title="Draw a shape"
            type="button"
            role="menuitemradio"
            aria-checked="false"
            :style="{
              background: ' none padding-box rgb(255, 255, 255)',
              display: ' block',
              border: ' 0px',
              margin: ' 0px',
              padding: ' 4px',
              textTransform: ' none',
              appearance: ' none',
              position: ' relative',
              cursor: ' pointer',
              userSelect: ' none',
              direction: ' ltr',
              overflow: ' hidden',
              textAlign: ' left',
              color: ' rgb(86, 86, 86)',
              fontFamily: ' Roboto, Arial, sans-serif',
              fontSize: ' 11px',
              boxShadow: ' rgba(0, 0, 0, 0.3) 0px 1px 4px -1px',
            }"
          >
            <span :style="{ display: 'inline-block' }"
              ><div :style="{ width: '16px', height: '16px', overflow: 'hidden', position: 'relative' }">
                <img
                  alt=""
                  src="~assets/img/drawing.png"
                  draggable="false"
                  :style="{
                    position: 'absolute',
                    left: '0px',
                    top: '-64px',
                    userSselect: 'none',
                    border: '0px',
                    padding: '0px',
                    margin: '0px',
                    maxWidth: 'none',
                    width: '16px',
                    height: '192px',
                  }"
                /></div
            ></span>
          </button>
        </div>
      </div>

#javascript #googlemaps

Adds a Places API textbox as a Custom Overlay to Google Maps

 const loader = new Loader({
      apiKey: //your_api_key,
      version: "weekly",
      libraries: ["places"],
    });
const { Map, OverlayView } = await loader.importLibrary("maps");    
function getAddress(place) {
  const { address_components, formatted_address, geometry, name } = place;
  let country = (address_components || []).find((component) => component.types.includes("country"));
  let state = (address_components || []).find((component) =>
    component.types.includes("administrative_area_level_1")
  );
  let city = (address_components || []).find((component) => component.types.includes("locality"));
  let address_line = (address_components || []).find((component) => component.types.includes("route"));
  let postal_code = (address_components || []).find((component) => component.types.includes("postal_code"));
  return {
    name: name,
    address: formatted_address,
    country: country?.long_name,
    city: city?.long_name,
    state: state?.long_name,
    postalCode: postal_code?.long_name,
    coords: {
      lat: geometry.location.lat(),
      lng: geometry.location.lng(),
    },
  };
}
class CustomOverlay extends OverlayView {
      div_;
      constructor(map) {
        super();
        this.div_ = null;
        this.setMap(map);
      }
      async onAdd() {
        var div = document.createElement("div");
        div.style.zIndex = "100";
        div.style.borderStyle = "solid";
        div.style.borderWidth = "1px";
        div.style.backgroundColor = "white";
        div.style.padding = "4px";
        div.style.position = "absolute";
        div.style.height = "40px";

        // Add a textbox inside the div
        var textbox = document.createElement("input");
        textbox.type = "text";
        textbox.style.width = "100%";
        textbox.style.height = "100%";
        textbox.placeholder = "Search Location";
        div.appendChild(textbox);
        this.div_ = div;
        this.getPanes().overlayMouseTarget.appendChild(div);
        // this.getPanes().floatPane.appendChild(div);

        // Prevent map from intercepting events when interacting with the textbox
        function handleMouseEvents(e) {
          if (e.target == textbox) {
            e.stopPropagation();
          }
        }
        const map = this.getMap();
        const mapDiv = map.getDiv();
        google.maps.event.addDomListener(mapDiv, "mousedown", handleMouseEvents, true);
        google.maps.event.addDomListener(mapDiv, "dblclick", handleMouseEvents, true);

        map.addListener("dragstart", function (e) {
          //
        });
        map.addListener("dragend", function (e) {});
        const { SearchBox } = await loader.importLibrary("places");

        const search = new SearchBox(textbox);
        search.addListener("places_changed", async function () {
          const place = search.getPlaces();
          console.log("use data for the place", place);
          // or use the function above "getAddress" to return a json formatted data
        });
      }
      draw() {
        var overlayProjection = this.getProjection();
        if (!overlayProjection) {
          return;
        }

        // Get northeast and southwest corners of the map's current bounds
        const mapBounds = this.getMap().getBounds();
        const fromLatLngToDivPixel = function (latLng) {
          return overlayProjection.fromLatLngToDivPixel(latLng);
        };

        const ne = fromLatLngToDivPixel(mapBounds.getNorthEast());
        const sw = fromLatLngToDivPixel(mapBounds.getSouthWest());
        if (this.div_) {
          this.div_.style.left = sw.x + 10 + "px";
          this.div_.style.top = ne.y + 10 + "px";
        }
      }
      onRemove() {
        if (!this.div_) return;
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
      }
    }
	// load a maps library and pass it to the class
    
    const map = new Map(vm.$refs.GoogleMap, {
      zoom: 14,
      disableDefaultUI: false,
      mapTypeControl: false,
      streetViewControl: false,
      mapTypeId: "roadmap",
      scrollWheel: true,
      fullscreenControl: true,
      center: {
        lat: 49.316666,
        lng: -123.066666,
      },
    });
	
    new CustomOverlay(map);

#javascript

MADE EASY ONLINE TEST SERIES

https://onlinetestseriesmadeeasy.in/madeeasy/index.php?pageName

#javascript

Debounce in Js

const input = document.getElementById('input');


const debounc = (func, waitTime) => {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func(...args);
        }, waitTime);
    };
}

function getData(e) {
    console.log(e.target.value)
};

const debouncApi = debounc(getData, 1000);


input.addEventListener('input', debouncApi);

#javascript

getTransformHandleFun

function getTransformHandleFun(ele) {
    if (!(ele instanceof HTMLElement || ele instanceof Node)) throw new Error("Note element or node");
    const clamp = (value, min, max) => {
        if (typeof min === "number" && typeof max === "number") {
            return Math.min(Math.max(value, min), max);
        } else if (typeof min === "number" && typeof max !== "number") {
            return Math.max(value, min)
        } else if (typeof min !== "number" && typeof max === "number") {
            return Math.min(value, max)
        }
        return value
    }

    const setTranslate = (options) => {
        if (typeof options === "function") options = options();
        const { isDeff = true } = options;
        const o = { value: 0 }, _ = isDeff ? o : { value: 1 };
        const { dA = _, dB = o, dC = o, dD = _, dTx = o, dTy = o } = options;
        console.log(dA, dB);

        const style = getComputedStyle(ele);
        let transform = style.transform || style.webkitTransform || style.mozTransform;
        if (transform === 'none') transform = "matrix(1, 0, 0, 1, 0, 0)";

        if (transform) {
            const matrixValues = transform.match(/^matrix.*\((.+)\)$/);
            if (!matrixValues) return "matrix(1, 0, 0, 1, 0, 0)";
            const vals = matrixValues[1].split(', ').map(Number);
            const arr = [dA, dB, dC, dD, dTx, dTy];
            while (vals.length < 6) vals.push(0);
            let getVal = isDeff ? (i) => +arr[i].value + vals[i] : (i) => +arr[i].value;
            for (let i = 0; i < vals.length; i++) {
                vals.splice(i, 1, clamp(getVal(i), arr[i].min, arr[i].max))
            }
            transform = `matrix(${vals})`;
        }

        return transform;
    }

    return (options) => {
        ele.style.transform = setTranslate(options);
        return ele;
    }
};

#javascript

throttle

function throttle(fun, delay) {
    let isRun = true;
    return function (...args) {
        if (isRun) {
            fun.apply(this, args)
            isRun = false
            setTimeout(() => {
                isRun = true
            }, delay)
        }
    }
}

#javascript

debounce

function debounce(fun, delay) {
    let i;
    return function (...args) {
        if (i) clearTimeout(i)
        setTimeout(() => {
            fun.apply(this, args)
        }, delay);
    }
}

#javascript

hasChanged

function hasChanged(x, y) {
    if (x === y) return x === 0 && 1 / x !== 1 / y
    else return x === x || y === y
}

#javascript

图片懒加载

; (function () {
    const ob = new IntersectionObserver((entries) => {
        entries.filter(entry => entry.isIntersecting).forEach(entry => {
            const img = entry.target;
            img.src = img.dataset.src;
            ob.unobserve(img);
        })
    })

    const imgs = document.querySelectorAll('img[data-src]');
    imgs.forEach(img => { ob.observe(img) });
})();

#javascript

Adds conditional formatting to a squarespace form

<!-- Squarepaste Form Logic © -->

<script src="https://storage.googleapis.com/squarepaste/base-jquery.js"></script>

<script type="text/javascript">
/* Select Field */

$(document).on('change', '#select-6ed7f446-8ef8-42ea-abf4-e72a84b41cb3-field select', function() {

        const value = $(this).val();

        if (value == 'Yes') {

           $('#section-8ce22bc1-00cb-43c0-b3ab-cccaab43ad22').fadeIn();

        }

        else {

            $('#section-8ce22bc1-00cb-43c0-b3ab-cccaab43ad22').hide();

        }

    });

/* Radio Field- Hide submit button based on radio button selection and display message */
    $(document).on('change', 'input[type="radio"]', function() {
        if ($('input[type="radio"][value="No"]:checked').length > 0) {
            $('button[type="submit"]').fadeIn();
            $('#section-26b8b3d8-8295-42a8-bae3-3f26b85de441').hide();
        } else if ($('input[type="radio"][value="No"]:checked').length === 0) {
            $('button[type="submit"]').hide();
            $('#section-26b8b3d8-8295-42a8-bae3-3f26b85de441').fadeIn();

        } else {
            $('button[type="submit"]').hide();
        }
    });

    // Trigger the change event on page load to set initial state
    $('input[type="radio"]:checked').change();

    

</script>

#javascript

Типы данных

let name = "Ilya";

alert( `hello ${1}` ); // ?

alert( `hello ${"name"}` ); // ?

alert( `hello ${name}` ); // ?

#javascript

uses findIndex method and displays index value

const animals = ['hippo', 'tiger', 'lion', 'seal', 'cheetah', 'monkey', 'salamander', 'elephant'];

const foundAnimal = animals.findIndex(a => {
  return a === 'elephant';
});
console.log(animals[foundAnimal]); // uses function's returned index to display value

const startsWithS = animals.findIndex(letter => {
  return letter[0] === 's';
});
console.log(startsWithS); // function returns index number of first TRUE element
console.log(animals[startsWithS]); // used to display that element's value

#javascript

using filter method for arrays

const favoriteWords = ['nostalgia', 'hyperbole', 'fervent', 'esoteric', 'serene'];

// Call .filter() on favoriteWords below

const longFavoriteWords = favoriteWords.filter(word => {
  return word.length > 7;
});

console.log(longFavoriteWords);

#javascript

javascript - How to change color of a cell if the previous cell contains the hex color name? - Stack Overflow

function myFunction() {
  const ss = SpreadsheetApp.getActiveSpreadsheet()
  const sh = ss.getSheetByName("Sheet1");
  const hex_colors = sh.getRange('A1:A'+sh.getLastRow()).getValues();
  sh.getRange('B1:B'+sh.getLastRow()).setBackgrounds(hex_colors);
}

#javascript

Google Spreadsheet: Script to change background color of a cell based on a hex code in the neighboring cell - Stack Overflow

// regex for hex color codes
HEX_COLOR_REGEX = /(^#[0-9A-Fa-f]{3}$)|(#[0-9A-Fa-f]{6}$)/;

// column to watch for changes (i.e. column where hex color codes are to be entered)
HEX_CODE_COLUMN = 1; // i.e. column A

// column to change when above column is edited
HEX_COLOR_COLUMN = 2; // i.e. column B

// utility function to test whether a given string qualifies as a hex color code
function hexTest(testCase) {
  return HEX_COLOR_REGEX.test(testCase);
}

function onEdit(e) {
  var range = e.range;
  var row = range.getRow();
  var column = range.getColumn();
  if (column === HEX_CODE_COLUMN) {
    var values = range.getValues();
    values.forEach( function checkCode(rowValue, index) {
      var code = rowValue[0];
      if (hexTest(code)) {
        var cell = SpreadsheetApp.getActiveSheet().getRange(row + index, HEX_COLOR_COLUMN);
        cell.setBackground(code);
        SpreadsheetApp.flush();
      }
    });
  }
}

#javascript

Google Spreadsheet: Script to change background color of a cell based on a hex code in the neighboring cell - Stack Overflow

function onEdit() {

  var sheet = SpreadsheetApp.getActiveSheet();
  var range = sheet.getDataRange();
  var actCell = sheet.getActiveCell();
  var actData = actCell.getValue();
  var actRow = actCell.getRow();
  if (actData != '' && actRow != 1)  //Leaving out empty and header rows
  {
    range.getCell(actRow, 2).setBackground(actData);
  }

}

#javascript

google apps script - Set the background color to a cell based on a hex value - Stack Overflow

/*

This script is meant to be used with a Google Sheets spreadsheet. When you edit a cell containing a
valid CSS hexadecimal colour code (like #000 or #000000), the background colour will be changed to
that colour and the font colour will be changed to the inverse colour for readability.

To use this script in a Google Sheets spreadsheet:
1. go to Tools » Script Editor » Spreadsheet;
2. erase everything in the text editor;
3. change the title to "Set colour preview on edit";
4. paste this code in;
5. click File » Save.
*/

/*********
** Properties
*********/
/**
 * A regex pattern matching a valid CSS hex colour code.
 */
var colourPattern = /^#([0-9a-f]{3})([0-9a-f]{3})?$/i;


/*********
** Event handlers
*********/
/**
 * Sets the foreground or background color of a cell based on its value.
 * This assumes a valid CSS hexadecimal colour code like #FFF or #FFFFFF.
 */
function onEdit(e){
  // iterate over cell range  
  var range = e.range;
  var rowCount = range.getNumRows();
  var colCount = range.getNumColumns();
  for(var r = 1; r <= rowCount; r++) {
    for(var c = 1; c <= colCount; c++) {
      var cell = range.getCell(r, c);
      var value = cell.getValue();

      if(isValidHex(value)) {
        cell.setBackground(value);
        cell.setFontColor(getContrastYIQ(value));
      }
      else {
        cell.setBackground('white');
        cell.setFontColor('black');
      }
    }
  }
};


/*********
** Helpers
*********/
/**
 * Get whether a value is a valid hex colour code.
 */
function isValidHex(hex) {
  return colourPattern.test(hex);
};

/**
 * Change text color to white or black depending on YIQ contrast
 * https://24ways.org/2010/calculating-color-contrast/
 */
function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substr(1,2),16);
    var g = parseInt(hexcolor.substr(3,2),16);
    var b = parseInt(hexcolor.substr(5,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

#javascript

callback function syntax using forEach iterator method

const fruits = ['mango', 'papaya', 'pineapple', 'apple'];

// Iterate over fruits below
fruits.forEach(item => console.log(`I want to eat a ${item}.`));

#javascript

functions as parameters, higher-order functions

const addTwo = num => {
  return num + 2;
}

const checkConsistentOutput = (func, val) => {
  let checkA = val + 2;
  let checkB = func(val);
  if (checkA === checkB) {
    return checkB;
  } else {
    console.log(`inconsistent results`);
  }
}

console.log(checkConsistentOutput(addTwo, 2));

#javascript

do...while loop

let cupsOfSugarNeeded = 2;
let cupsAdded = 0;

do {
  cupsOfSugarNeeded = cupsOfSugarNeeded - cupsAdded;
  cupsAdded++;
  console.log(`Needed: ${cupsOfSugarNeeded}\n Added: ${cupsAdded}`);
} while (cupsAdded < cupsOfSugarNeeded);

#javascript

google apps script - Set the background color to a cell based on a hex value

/*

This script is meant to be used with a Google Sheets spreadsheet. When you edit a cell containing a
valid CSS hexadecimal colour code (like #000 or #000000), the background colour will be changed to
that colour and the font colour will be changed to the inverse colour for readability.

To use this script in a Google Sheets spreadsheet:
1. go to Tools » Script Editor » Spreadsheet;
2. erase everything in the text editor;
3. change the title to "Set colour preview on edit";
4. paste this code in;
5. click File » Save.
*/

/*********
** Properties
*********/
/**
 * A regex pattern matching a valid CSS hex colour code.
 */
var colourPattern = /^#([0-9a-f]{3})([0-9a-f]{3})?$/i;


/*********
** Event handlers
*********/
/**
 * Sets the foreground or background color of a cell based on its value.
 * This assumes a valid CSS hexadecimal colour code like #FFF or #FFFFFF.
 */
function onEdit(e){
  // iterate over cell range  
  var range = e.range;
  var rowCount = range.getNumRows();
  var colCount = range.getNumColumns();
  for(var r = 1; r <= rowCount; r++) {
    for(var c = 1; c <= colCount; c++) {
      var cell = range.getCell(r, c);
      var value = cell.getValue();

      if(isValidHex(value)) {
        cell.setBackground(value);
        cell.setFontColor(getContrastYIQ(value));
      }
      else {
        cell.setBackground('white');
        cell.setFontColor('black');
      }
    }
  }
};


/*********
** Helpers
*********/
/**
 * Get whether a value is a valid hex colour code.
 */
function isValidHex(hex) {
  return colourPattern.test(hex);
};

/**
 * Change text color to white or black depending on YIQ contrast
 * https://24ways.org/2010/calculating-color-contrast/
 */
function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substr(1,2),16);
    var g = parseInt(hexcolor.substr(3,2),16);
    var b = parseInt(hexcolor.substr(5,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

#javascript

Express routing

app.get(%27/ab?cd%27, (req, res) => {
  res.send(%27ab?cd%27)
})

#javascript

Express routing

app.get(%27/random.text%27, (req, res) => {
  res.send(%27random.text%27)
})

#javascript

Express routing

app.get(%27/about%27, (req, res) => {
  res.send(%27about%27)
})

#javascript

Express routing

app.get(%27/%27, (req, res) => {
  res.send(%27root%27)
})

#javascript

Express routing

app.all(%27/secret%27, (req, res, next) => {
  console.log(%27Accessing the secret section ...%27)
  next() // pass control to the next handler
})

#javascript

Express routing

// GET method route
app.get('/', (req, res) => {
  res.send('GET request to the homepage')
})

// POST method route
app.post('/', (req, res) => {
  res.send('POST request to the homepage')
})

#nodejs #angular #javascript #php #python #vue.js #react.js #airbnb #clone

Start Your Money-Making Vacation Rental Business Today - Airbnb Clone Script

Embark on a lucrative journey with our turnkey vacation rental business – your golden ticket to making money while providing unforgettable travel experiences! Just like Airbnb, We at Appticz develop a vacation rental business that empowers you to transform your property into a revenue-generating oasis. Imagine waking up to a stream of bookings and delighted guests, all while enjoying the financial rewards of the booming vacation rental market. Get a free airbnb clone business quotation.
https://appticz.com/airbnb-clone

#javascript

Fit Profile local testing

localStorage.ampConfig = `{"amp":{"services":{"fitprofile":{"url":"http://127.0.0.1:5500/fitpredictor/demo/dist/loader.js","enabled":"true"},"fitprofilepreview":{"url":"http://127.0.0.1:5500/fitpredictor/demo/dist/fitProfilePreviewLoader.js","enabled":"true"}}}}`

#javascript

Css Grid

.parent-container{
  //defining a grid container
  display: grid;
  //defining rows and columns
  grid-template: 50px 50px / 50px 50px;
  //defining a row and column gap
  gap: 20px 50px;
  
  
}

When we use the grid-template propertie, we are explicitly defining grid tracks to lay out our grid items. But when the grid needs more tracks for extra content, it will implicitly define new grid tracks. Additionally, the size values established from our grid-template propertie are not carried over into these implicit grid tracks. But we can define values for the implicit grid tracks.

Let’s say we want any new rows to stay the same value as our explicit row track sizes:

.parent-container {
  display: grid;
  grid-template: 50px 50px;
  grid-auto-rows: 50px;
}

#javascript

<tts service="android" speed="1.0" voice="en-US" style="display: none">{{En}}</tts>

#javascript #react.js

if i click add button then come 2 input box

import React, { useState } from 'react';

const App = () => {
  // Initialize with one set of input boxes
  const [inputSets, setInputSets] = useState([{ id: Date.now() }]);

  const handleAddClick = () => {
    // Add a new set of input boxes
    setInputSets([...inputSets, { id: Date.now() }]);
  };

  const handleDeleteClick = (id) => {
    // Ensure at least one set of input boxes remains
    if (inputSets.length > 1) {
      setInputSets(inputSets.filter(set => set.id !== id));
    }
  };

  return (
    <div>
      <button onClick={handleAddClick}>
        Add Input Boxes
      </button>

      {inputSets.map(set => (
        <div key={set.id} style={{ marginBottom: '10px' }}>
          <input type="text" placeholder="Input 1" />
          <input type="text" placeholder="Input 2" />
          {/* Conditionally render the delete button */}
          {inputSets.length > 1 && (
            <button 
              onClick={() => handleDeleteClick(set.id)} 
              style={{ marginLeft: '10px' }}
            >
              Delete
            </button>
          )}
        </div>
      ))}
    </div>
  );
};

export default App;

#javascript

word genrator

document.addEventListener("DOMContentLoaded", function() {
  const addIcon = document.getElementById("add-icon");
  const dropdownMenu = document.getElementById("dropdown-menu");
  const wordInput = document.getElementById("word-input");
  const numWordsInput = document.getElementById("num-words-input");
  const generateButton = document.getElementById("generate-button");
  const resultElement = document.getElementById("word-list");
  const resetButton = document.getElementById("reset");
  const saveButton = document.createElement("button");
  saveButton.id = "save-button";
  saveButton.textContent = "Save";
  resetButton.insertAdjacentElement("afterend", saveButton);
  const modal = document.getElementById("listModal");
  const modalBody = document.getElementById("modal-body");
  const createListButton = document.getElementById("create-list");
  const viewListButton = document.getElementById("view-list");
  const closeModalButton = document.getElementById("close-modal");
  const deleteAllButton = document.createElement("button");
  deleteAllButton.id = "delete-all";
  deleteAllButton.textContent = "Delete All";
  closeModalButton.insertAdjacentElement("afterend", deleteAllButton);

  // Store lists in local storage
  let lists = JSON.parse(localStorage.getItem('lists')) || [];
  let definitionMap = {};

  // Toggle dropdown menu visibility
  addIcon.addEventListener("click", function() {
      dropdownMenu.style.display = dropdownMenu.style.display === "block" ? "none" : "block";
  });

  // Hide the dropdown menu if the user clicks outside of it
  document.addEventListener("click", function(event) {
      if (!addIcon.contains(event.target) && !dropdownMenu.contains(event.target)) {
          dropdownMenu.style.display = "none";
      }
  });

  // Create List button click handler
  createListButton.addEventListener("click", function() {
      openCreateListModal();
  });

  // View List button click handler
  viewListButton.addEventListener("click", function() {
      openViewListModal();
  });

  // Close modal when the user clicks on Close button
  closeModalButton.addEventListener("click", function() {
      modal.style.display = "none";
  });

  // Close modal when the user clicks outside of the modal
  window.addEventListener("click", function(event) {
      if (event.target === modal) {
          modal.style.display = "none";
      }
  });

  // Create Flip Card
function createFlipCard(word) {
  const card = document.createElement('li');
  card.classList.add('flip-container');
  card.innerHTML = `
    <div class="flip-card">
      <div class="front">${word}</div>
      <div class="back">${definitionMap[word] || 'Definition not found'}</div>
    </div>
  `;

  card.addEventListener('click', () => {
    card.querySelector('.flip-card').classList.toggle('flipped');
  });

  return card;
}


  // Generate random words with definitions
  async function generateRandomWords() {
      resultElement.classList.remove("error");

      const words = wordInput.value.split(",").map(word => word.trim()).filter(word => word !== "");
      if (words.length === 0) {
          resultElement.classList.add("error");
          resultElement.innerHTML = "Please enter some words separated by commas.";
          return;
      }

      const numWords = Math.min(numWordsInput.value, words.length);
      let selectedWords = getRandomWords(words, numWords);

      resultElement.innerHTML = ''; // Clear previous results
      for (const word of selectedWords) {
          const definition = await fetchDefinition(word);
          definitionMap[word] = definition;
          resultElement.appendChild(createFlipCard(word));
      }
      updateWordCounter();
  }

  // Get random words from the list
  function getRandomWords(words, numWords) {
      const shuffled = words.sort(() => 0.5 - Math.random());
      return shuffled.slice(0, numWords);
  }

  // Fetch word definition from API
  async function fetchDefinition(word) {
      try {
          const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
          if (!response.ok) {
              if (response.status === 404) {
                  return "Definition not found.";
              }
              throw new Error("Network response was not ok.");
          }
          const data = await response.json();
          if (data && data[0] && data[0].meanings && data[0].meanings[0] && data[0].meanings[0].definitions && data[0].meanings[0].definitions[0]) {
              return data[0].meanings[0].definitions[0].definition;
          } else {
              return "Definition not found.";
          }
      } catch (error) {
          console.error("Error fetching definition:", error);
          return "Definition not found.";
      }
  }

  // Attach event listeners to buttons
  generateButton.addEventListener("click", generateRandomWords);
  resetButton.addEventListener("click", function() {
      resultElement.innerHTML = "";
      wordInput.value = "";
      numWordsInput.value = 1;
      updateWordCounter();
  });

  // Save button click handler
  saveButton.addEventListener("click", function() {
      const words = wordInput.value.split(",").map(word => word.trim()).filter(word => word !== "");
      if (words.length === 0) {
          alert("Please enter some words to save.");
          return;
      }
      const listName = prompt("Enter the name of the list:");
      if (listName) {
          lists.push({ name: listName, words });
          localStorage.setItem('lists', JSON.stringify(lists));
          alert(`List "${listName}" saved.`);
      } else {
          alert("List name cannot be empty.");
      }
  });

  // Function to open create list modal
  function openCreateListModal() {
      // Clear previous content of modal body
      modalBody.innerHTML = "";

      // Create input field and submit button for entering list name
      const inputField = document.createElement("input");
      inputField.setAttribute("type", "text");
      inputField.setAttribute("placeholder", "Enter the name of the list");
      inputField.style.marginRight = "10px";

      const submitButton = document.createElement("button");
      submitButton.textContent = "Create";
      submitButton.addEventListener("click", function() {
          const listName = inputField.value.trim();
          if (listName) {
              lists.push({ name: listName, words: [] });
              localStorage.setItem('lists', JSON.stringify(lists));
              modal.style.display = "none"; // Hide modal after creating list
              alert(`List "${listName}" created.`);
              inputField.value = ""; // Clear input field
              openViewListModal(); // After creating, open view list modal
          } else {
              alert("Please enter a valid list name.");
          }
      });

      const cancelButton = document.createElement("button");
      cancelButton.textContent = "Cancel";
      cancelButton.addEventListener("click", function() {
          modal.style.display = "none";
      });

      modalBody.appendChild(inputField);
      modalBody.appendChild(submitButton);
      modalBody.appendChild(cancelButton);

      modal.style.display = "block"; // Display modal
      dropdownMenu.style.display = "none"; // Hide dropdown menu
  }

  // Function to open view list modal
  function openViewListModal() {
      if (lists.length === 0) {
          modalBody.innerHTML = "<p>No lists available.</p>";
      } else {
          modalBody.innerHTML = ""; // Clear previous content

          lists.forEach((list, index) => {
              const listItem = document.createElement("div");
              listItem.className = "list-item";
              listItem.textContent = list.name;

              // Add view, open, and delete buttons for each list item
              const viewButton = document.createElement("button");
              viewButton.textContent = "View";
              viewButton.addEventListener("click", function() {
                  openWordListModal(index);
              });

              const openButton = document.createElement("button");
              openButton.textContent = "Open";
              openButton.addEventListener("click", function() {
                  openList(index);
              });

              const deleteButton = document.createElement("button");
              deleteButton.textContent = "Delete";
              deleteButton.addEventListener("click", function() {
                  lists.splice(index, 1);
                  localStorage.setItem('lists', JSON.stringify(lists));
                  openViewListModal(); // Refresh view after deleting
              });

              listItem.appendChild(viewButton);
              listItem.appendChild(openButton);
              listItem.appendChild(deleteButton);
              modalBody.appendChild(listItem);
          });
      }

      modal.style.display = "block"; // Display modal
      dropdownMenu.style.display = "none"; // Hide dropdown menu
  }

  // Function to open word list modal
  function openWordListModal(listIndex) {
      // Clear previous content of modal body
      modalBody.innerHTML = "";

      // Display list name
      const listName = document.createElement("h2");
      listName.textContent = lists[listIndex].name;
      modalBody.appendChild(listName);

      // Display words
      const wordList = document.createElement("ul");
      lists[listIndex].words.forEach(word => {
          const wordItem = document.createElement("li");
          wordItem.textContent = word;
          wordList.appendChild(wordItem);
      });
      modalBody.appendChild(wordList);

      // Add input field and button for adding words to the list
      const wordInputField = document.createElement("input");
      wordInputField.setAttribute("type", "text");
      wordInputField.setAttribute("placeholder", "Enter words separated by commas");
      wordInputField.style.marginRight = "10px";

      const addButton = document.createElement("button");
      addButton.textContent = "Add";
      addButton.addEventListener("click", function() {
          const words = wordInputField.value.split(",").map(word => word.trim());
          lists[listIndex].words.push(...words);
          localStorage.setItem('lists', JSON.stringify(lists));
          openWordListModal(listIndex); // Refresh view after adding words
      });

      const closeButton = document.createElement("button");
      closeButton.textContent = "Close";
      closeButton.addEventListener("click", function() {
          modal.style.display = "none";
      });

      modalBody.appendChild(wordInputField);
      modalBody.appendChild(addButton);
      modalBody.appendChild(closeButton);

      modal.style.display = "block"; // Display modal
  }

  // Function to open list and populate the main search bar
  function openList(listIndex) {
      wordInput.value = lists[listIndex].words.join(", ");
      modal.style.display = "none"; // Hide modal
  }

  // Delete all button click handler
  deleteAllButton.addEventListener("click", function() {
      if (confirm("Are you sure you want to delete all lists?")) {
          lists = [];
          localStorage.setItem('lists', JSON.stringify(lists));
          openViewListModal(); // Refresh view after deleting all lists
      }
  });

  // Function to update word counter
  function updateWordCounter() {
      const wordCount = wordInput.value.split(",").filter(word => word.trim() !== "").length;
      document.getElementById("word-counter").textContent = `${wordCount} words`;
  }

  // Event listener to update word counter when input changes
  wordInput.addEventListener("input", updateWordCounter);

  // Initial call to update word counter on page load
  updateWordCounter();
});

#javascript

Get CSS property from stylesheet with JS

ANIMATION_TIMEOUT = parseInt(getComputedStyle(rootEl).getPropertyValue('--transition-duration'), 10);

#js #javascript #typescript #ts

js Array methods

// 1. push()
// Appends one or more elements to the end of an array
let arr1 = [1, 2, 3];
arr1.push(4);
console.log(arr1); // [1, 2, 3, 4]

// 2. pop()
// Removes the last element from the array and returns it
let arr2 = [1, 2, 3];
let lastElement = arr2.pop();
console.log(lastElement); // 3
console.log(arr2); // [1, 2]

// 3. shift()
// Removes the first element from the array and returns it
let arr3 = [1, 2, 3];
let firstElement = arr3.shift();
console.log(firstElement); // 1
console.log(arr3); // [2, 3]

// 4. unshift()
// Appends one or more elements to the beginning of an array
let arr4 = [2, 3];
arr4.unshift(1);
console.log(arr4); // [1, 2, 3]

// 5. concat()
// Combines two or more arrays
let arr51 = [1, 2];
let arr52 = [3, 4];
let newArr5 = arr51.concat(arr52);
console.log(newArr5); // [1, 2, 3, 4]


// 6. slice()
// Returns a new array containing part of the original array
let arr6 = [1, 2, 3, 4];
let newArr6 = arr6.slice(1, 3);
console.log(newArr6); // [2, 3]

// 7. splice()
// Changes the contents of an array by removing, replacing, or adding new elements
let arr7 = [1, 2, 3, 4];
arr7.splice(1, 2, 'a', 'b');
console.log(arr7); // [1, 'a', 'b', 4]

// 8. forEach()
// Executes the specified function once for each element of the array
let arr8 = [1, 2, 3];
arr8.forEach(element => console.log(element));
// 1
// 2
// 3

// 9. map()
// Creates a new array with the results of calling the specified function for each element of the array
let arr9 = [1, 2, 3];
let newArr9 = arr9.map(element => element * 2);
console.log(newArr9); // [2, 4, 6]

// 10. filter()
// Creates a new array with all elements that passed the test implemented by the given function
let arr10 = [1, 2, 3, 4];
let newArr10 = arr10.filter(element => element % 2 === 0);
console.log(newArr10); // [2, 4]

// 11. reduce()
// Applies a function to each element of an array (from left to right) to reduce it to a single value
let arr11 = [1, 2, 3, 4];
let sum = arr11.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 10

// 12. find()
// Returns the first element of the array that satisfies the given function
let arr12 = [1, 2, 3, 4];
let found = arr12.find(element => element > 2);
console.log(found); // 3

// 13. findIndex()
// Returns the index of the first array element that satisfies the given function
let arr13 = [1, 2, 3, 4];
let index = arr13.findIndex(element => element > 2);
console.log(index); // 2

// 14. some()
// Checks whether at least one element of the array satisfies the condition implemented by the function
let arr14 = [1, 2, 3, 4];
let hasEven = arr14.some(element => element % 2 === 0);
console.log(hasEven); // true

// 15. every()
// Checks whether all elements of an array satisfy the condition implemented by the function
let arr15 = [1, 2, 3, 4];
let allEven = arr15.every(element => element % 2 === 0);
console.log(allEven); // false

// 16. sort()
// Sorts the elements of an array and returns the sorted array
let arr16 = [3, 1, 4, 2];
arr16.sort();
console.log(arr16); // [1, 2, 3, 4]

// 17. reverse()
// Reverses the order of the elements in the array
let arr17 = [1, 2, 3, 4];
arr17.reverse();
console.log(arr17); // [4, 3, 2, 1]

// 18. join()
// Combines all elements of the array into a row
let arr18 = [1, 2, 3, 4];
let str = arr18.join('-');
console.log(str); // "1-2-3-4"

// 19. includes()
// Tests whether an array contains a specified element
let arr19 = [1, 2, 3, 4];
let hasThree = arr19.includes(3);
console.log(hasThree); // true

// 20. flat()
// Creates a new array with all subarray elements submerged to the specified depth
let arr20 = [1, [2, [3, [4]]]];
let flatArr = arr20.flat(2);
console.log(flatArr); // [1, 2, 3, [4]]

// 21. flatMap()
// First, it displays each element using a function, and then sums the result into a new array
let arr21 = [1, 2, 3];
let flatMappedArr = arr21.flatMap(element => [element, element * 2]);
console.log(flatMappedArr); // [1, 2, 2, 4, 3, 6]

#javascript

Open YouTube video with embed URL

javascript: (function () {
  let host = location.host;
  if (host.includes("youtube.com")) {
    const emb = document
      .querySelector("link[itemprop='embedUrl']")
      .getAttribute("href");
    window.location.assign(emb);
  } else {
    window.alert("⚠️not YouTube");
  }
})();

#javascript

JS Loops

The for...of loop
The basic tool for looping through a collection is the for...of loop:

js
Copy to Clipboard
const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"];

for (const cat of cats) {
  console.log(cat);
}
In this example, for (const cat of cats) says:

Given the collection cats, get the first item in the collection.
Assign it to the variable cat and then run the code between the curly braces {}.
Get the next item, and repeat (2) until you've reached the end of the collection.

-------------------------------------------------
  
map() and filter()
JavaScript also has more specialized loops for collections, and we'll mention two of them here.

You can use map() to do something to each item in a collection and create a new collection containing the changed items:

js
Copy to Clipboard
function toUpper(string) {
  return string.toUpperCase();
}

const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"];

const upperCats = cats.map(toUpper);

console.log(upperCats);
// [ "LEOPARD", "SERVAL", "JAGUAR", "TIGER", "CARACAL", "LION" ]
Here we pass a function into cats.map(), and map() calls the function once for each item in the array, passing in the item. It then adds the return value from each function call to a new array, and finally returns the new array. In this case the function we provide converts the item to uppercase, so the resulting array contains all our cats in uppercase:

js
Copy to Clipboard
[ "LEOPARD", "SERVAL", "JAGUAR", "TIGER", "CARACAL", "LION" ]

You can use filter() to test each item in a collection, and create a new collection containing only items that match:

js
Copy to Clipboard
function lCat(cat) {
  return cat.startsWith("L");
}

const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"];

const filtered = cats.filter(lCat);

console.log(filtered);
// [ "Leopard", "Lion" ]
This looks a lot like map(), except the function we pass in returns a boolean: if it returns true, then the item is included in the new array. Our function tests that the item starts with the letter "L", so the result is an array containing only cats whose names start with "L":

js
Copy to Clipboard
[ "Leopard", "Lion" ]

Note that map() and filter() are both often used with function expressions, which we will learn about in the Functions module. Using function expressions we could rewrite the example above to be much more compact:

js
Copy to Clipboard
const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"];

const filtered = cats.filter((cat) => cat.startsWith("L"));
console.log(filtered);
// [ "Leopard", "Lion" ]

-------------------------------------------------
  
The standard for loop
In the "drawing circles" example above, you don't have a collection of items to loop through: you really just want to run the same code 100 times. In a case like that, you should use the for loop. This has the following syntax:

js
Copy to Clipboard
for (initializer; condition; final-expression) {
  // code to run
}
Here we have:

The keyword for, followed by some parentheses.
Inside the parentheses we have three items, separated by semicolons:
An initializer — this is usually a variable set to a number, which is incremented to count the number of times the loop has run. It is also sometimes referred to as a counter variable.
A condition — this defines when the loop should stop looping. This is generally an expression featuring a comparison operator, a test to see if the exit condition has been met.
A final-expression — this is always evaluated (or run) each time the loop has gone through a full iteration. It usually serves to increment (or in some cases decrement) the counter variable, to bring it closer to the point where the condition is no longer true.
Some curly braces that contain a block of code — this code will be run each time the loop iterates.

-------------------------------------------------

Exiting loops with break
If you want to exit a loop before all the iterations have been completed, you can use the break statement. We already met this in the previous article when we looked at switch statements — when a case is met in a switch statement that matches the input expression, the break statement immediately exits the switch statement and moves on to the code after it.

It's the same with loops — a break statement will immediately exit the loop and make the browser move on to any code that follows it.
  
Skipping iterations with continue
The continue statement works similarly to break, but instead of breaking out of the loop entirely, it skips to the next iteration of the loop. Let's look at another example that takes a number as an input, and returns only the numbers that are squares of integers (whole numbers).
  
-------------------------------------------------
  

while and do...while
for is not the only type of loop available in JavaScript. There are actually many others and, while you don't need to understand all of these now, it is worth having a look at the structure of a couple of others so that you can recognize the same features at work in a slightly different way.

First, let's have a look at the while loop. This loop's syntax looks like so:

js
Copy to Clipboard
initializer
while (condition) {
  // code to run

  final-expression
}
This works in a very similar way to the for loop, except that the initializer variable is set before the loop, and the final-expression is included inside the loop after the code to run, rather than these two items being included inside the parentheses. The condition is included inside the parentheses, which are preceded by the while keyword rather than for.

The same three items are still present, and they are still defined in the same order as they are in the for loop. This is because you must have an initializer defined before you can check whether or not the condition is true. The final-expression is then run after the code inside the loop has run (an iteration has been completed), which will only happen if the condition is still true.


The do...while loop is very similar, but provides a variation on the while structure:

js
Copy to Clipboard
initializer
do {
  // code to run

  final-expression
} while (condition)
In this case, the initializer again comes first, before the loop starts. The keyword directly precedes the curly braces containing the code to run and the final expression.

The main difference between a do...while loop and a while loop is that the code inside a do...while loop is always executed at least once. That's because the condition comes after the code inside the loop. So we always run that code, then check to see if we need to run it again. In while and for loops, the check comes first, so the code might never be executed.
    
    
Which loop type should you use?
If you're iterating through an array or some other object that supports it, and don't need access to the index position of each item, then for...of is the best choice. It's easier to read and there's less to go wrong.

For other uses, for, while, and do...while loops are largely interchangeable. They can all be used to solve the same problems, and which one you use will largely depend on your personal preference — which one you find easiest to remember or most intuitive. We would recommend for, at least to begin with, as it is probably the easiest for remembering everything — the initializer, condition, and final-expression all have to go neatly into the parentheses, so it is easy to see where they are and check that you aren't missing them.

#javascript

JS Methods

The map method
map is one such function. It expects a callback as an argument, which is a fancy way to say “I want you to pass another function as an argument to my function”.

Let’s say we had a function addOne, which takes in num as an argument and outputs that num increased by 1. And let’s say we had an array of numbers, [1, 2, 3, 4, 5] and we’d like to increment all of these numbers by 1 using our addOne function. Instead of making a for loop and iterating over the above array, we could use our map array method instead, which automatically iterates over an array for us. We don’t need to do any extra work aside from simply passing the function we want to use in:

function addOne(num) {
  return num + 1;
}
const arr = [1, 2, 3, 4, 5];
const mappedArr = arr.map(addOne);
console.log(mappedArr); // Outputs [2, 3, 4, 5, 6]
map returns a new array and does not change the original array.

// The original array has not been changed!
console.log(arr); // Outputs [1, 2, 3, 4, 5]
This is a much more elegant approach, what do you think? For simplicity, we could also define an inline function right inside of map like so:

const arr = [1, 2, 3, 4, 5];
const mappedArr = arr.map((num) => num + 1);
console.log(mappedArr); // Outputs [2, 3, 4, 5, 6]

-----------------------------------------------------

The filter method
filter is somewhat similar to map. It still iterates through the array and applies the callback function on every item. However, instead of transforming the values in the array, it returns the original values of the array, but only IF the callback function returns true. Let’s say we had a function, isOdd that returns either true if a number is odd or false if it isn’t.

The filter method expects the callback to return either true or false. If it returns true, the value is included in the output. Otherwise, it isn’t. Consider the array from our previous example, [1, 2, 3, 4, 5]. If we wanted to remove all even numbers from this array, we could use .filter() like this:

function isOdd(num) {
  return num % 2 !== 0;
}
const arr = [1, 2, 3, 4, 5];
const oddNums = arr.filter(isOdd);
console.log(oddNums); // Outputs [1, 3, 5];
console.log(arr); // Outputs [1, 2, 3, 4, 5], original array is not affected
filter will iterate through arr and pass every value into the isOdd callback function, one at a time.
isOdd will return true when the value is odd, which means this value is included in the output.
If it’s an even number, isOdd will return false and not include it in the final output.

-----------------------------------------------------
  
The reduce method
Finally, let’s say that we wanted to multiply all of the numbers in our arr together like this: 1 * 2 * 3 * 4 * 5. First, we’d have to declare a variable total and initialize it to 1. Then, we’d iterate through the array with a for loop and multiply the total by the current number.

But we don’t actually need to do all of that, we have our reduce method that will do the job for us. Just like .map() and .filter() it expects a callback function. However, there are two key differences with this array method:

The callback function takes two arguments instead of one. The first argument is the accumulator, which is the current value of the result at that point in the loop. The first time through, this value will either be set to the initialValue (described in the next bullet point), or the first element in the array if no initialValue is provided. The second argument for the callback is the current value, which is the item currently being iterated on.
It also takes in an initialValue as a second argument (after the callback), which helps when we don’t want our initial value to be the first element in the array. For instance, if we wanted to sum all numbers in an array, we could call reduce without an initialValue, but if we wanted to sum all numbers in an array and add 10, we could use 10 as our initialValue.
const arr = [1, 2, 3, 4, 5];
const productOfAllNums = arr.reduce((total, currentItem) => {
  return total * currentItem;
}, 1);
console.log(productOfAllNums); // Outputs 120;
console.log(arr); // Outputs [1, 2, 3, 4, 5]
In the above function, we:

Pass in a callback function, which is (total, currentItem) => total * currentItem.
Initialize total to 1 in the second argument.
So what .reduce() will do, is it will once again go through every element in arr and apply the callback function to it. It then changes total, without actually changing the array itself. After it’s done, it returns total.

#javascript

OTP SEND VIA Fast2sms

app.post('/send-otp', async (req, res) => {
  const { phoneNumber } = req.body;

  const apiKey = '3mW3hfluK8dpayQ53NXKdBhophrKP9sD8GKPi8qKqsMTZAAEsyq8HGMZCeSv';
  const otp = Math.floor(100000 + Math.random() * 900000); // Generate a 6-digit OTP
  const message = `${otp}`;

  const data = {
      sender_id: 'TKSOLV',
      message: '110131',
      variables_values: message,
      route: 'dlt',
      numbers: phoneNumber,
  };

  const options = {
      method: 'POST',
      headers: {
          'authorization': apiKey,
          'Content-Type': 'application/json'
      },
      data: JSON.stringify(data),
      url: 'https://www.fast2sms.com/dev/bulkV2',
  };

  try {
      const response = await axios(options);
      res.status(200).send({ success: true, message: 'OTP sent successfully', otp: otp });
  } catch (error) {
      res.status(500).send({ success: false, message: 'Failed to send OTP', error: error.message });
  }
});

#javascript

How do I get the current date in JavaScript? - Stack Overflow

// Try this simple way

const today = new Date();
let date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
console.log(date);

#javascript #chrome #extentions

List installed chrome extensions

//You can copy a JSON list of all the extensions and their URLs by going to chrome://extensions and entering this in your console
document.querySelector('extensions-manager').extensions_.map(({id, name, state, webStoreUrl}) => ({id, name, state, webStoreUrl}))

#html #css #javascript

Adds the degree symbol (small superscript zero)

\xB0

#javascript #reac #type #typescript

[React] keyboardイベントを追加する

// App.tsx
import React, { useState } from 'react';
import './App.css';

function App() {
  const [top, setTop] = useState(0);
  const [left, setLeft] = useState(0);
  const [backgroundColor, setBackgroundColor] = useState('#ffffff')

  const keyDownHandler = (e: React.KeyboardEvent<HTMLDivElement>) => {
    const key = e.code;

    if (key === 'ArrowUp') {
      setTop((top) => top - 10);
    }

    if (key === 'ArrowDown') {
      setTop((top) => top + 10);
    }

    if (key === 'ArrowLeft') {
      setLeft((left) => left - 10);
    }

    if (key === 'ArrowRight') {
      setLeft((left) => left + 10);
    }

    if (key === 'Space') {
      let color = Math.floor(Math.random() * 0xFFFFFF).toString(16);
      for(let count = color.length; count < 6; count++) {
        color = '0' + color;                     
      }
      setBackgroundColor('#' + color);
    }
  }

  return (
    <div
      className="container"
      tabIndex={0}
      onKeyDown={keyDownHandler}
    >
      <div
        className="box"
        style={{ 
          top: top,
          left: left,
          backgroundColor: backgroundColor,
        }}></div>
    </div>
  );
}

export default App;

#html #css #javascript

Reduce callback function sums all the numbers in an array

function sum(...numbers) {
  // The rest operator is three dots followed by the variable name; by convention, it is typically called 'rest'
  // The rest operator must be the last parameter in the function definition
  return numbers.reduce((acc, val) => acc + val, 0);
}   // The reduce method is used to sum all the numbers in the array

#javascript

asynchronous programming

You can use the async keyword to create an asynchronous function, which returns a promise.

Example Code
const example = async () => {
  console.log("this is an example");
};

The try block is designed to handle potential errors, and the code inside the catch block will be executed in case an error occurs.

Example Code
try {
  const name = "freeCodeCamp";
  name = "fCC";
} catch (err) {
  console.log(err); // TypeError: Assignment to constant variable.
}

The await keyword waits for a promise to resolve and returns the result.

Example Code
const example = async () => {
  const data = await fetch("https://example.com/api");
  console.log(data);
}

#javascript

fetch and promise

The Fetch API is a built-in JavaScript interface to make network requests to a server. It has a fetch() method you can use to make GET, POST, PUT, or PATCH requests. In this project, you'll make a GET request to a URL for a JSON file with information about authors on freeCodeCamp News.

Here is how you can make a GET request with the fetch() method:

Example Code
fetch("url-goes-here")

The fetch() method returns a Promise, which is a placeholder object that will either be fulfilled if your request is successful, or rejected if your request is unsuccessful.

If the Promise is fulfilled, it resolves to a Response object, and you can use the .then() method to access the Response.

Here's how you can chain .then() to the fetch() method:

Example Code
fetch("sample-url-goes-here")
  .then((res) => res)

The data you get from a GET request is not usable at first. To make the data usable, you can use the .json() method on the Response object to parse it into JSON. If you expand the Prototype of the Response object in the console, you will see the .json() method there.

In order to start working with the data, you will need to use another .then() method.

Chain another .then() to the existing .then() method. This time, pass in data as the parameter for the callback function. For the callback, use a curly brace because you will have more than one expression.

The .catch() method is another asynchronous JavaScript method you can use to handle errors. This is useful in case the Promise gets rejected.

#javascript #brainjs #bash #npm #nodejs

Getting started with Brain.js. A quick tutorial on setting up a neural… | by Gordon Styron | Analytics Vidhya | Medium

npm install brain.js

#javascript

show more / show less for Elementor's icon box

<style>
.content-hide {
    display: none;
}

.details-area {
    max-height: 70px;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.show-more, .show-less {
cursor: pointer;
}

</style>

<script type="text/javascript">
var $ = jQuery;
$(document).ready(function() {
    $('.show-more').on('click', function(event) {
        event.preventDefault();
        var profileCard = $(this).closest('.profile-card');
        var detailsArea = profileCard.find('.details-area');
        
        $(this).addClass('content-hide');
        profileCard.find('.show-less').removeClass('content-hide');

        detailsArea.css('max-height', detailsArea[0].scrollHeight + 'px'); // Rozwijanie
    });

    $('.show-less').on('click', function(event) {
        event.preventDefault();
        var profileCard = $(this).closest('.profile-card');
        var detailsArea = profileCard.find('.details-area');
        
        $(this).addClass('content-hide');
        profileCard.find('.show-more').removeClass('content-hide');
        
        detailsArea.css('max-height', '70px'); // Zwijanie
    });
});
</script>

#javascript

Image preview when upload image

    function showPreview(event){
  if(event.target.files.length > 0){
    var src = URL.createObjectURL(event.target.files[0]);
    var preview = document.getElementById("file-ip-1-preview");
    preview.src = src;
    preview.style.display = "block";
  }
}

#javascript #react.js #html #output #text

Ful Example About how to use classes with react

<!DOCTYPE html>
<html>

<body>
  
<script>
class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return 'I have a ' + this.brand;
  }
}

class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }  
  show() {
    return this.present() + ', it is a ' + this.model
  }
}

const mycar = new Model("Ford", "Mustang");
document.write(mycar.show());
</script>

</body>
</html>

#react.js #javascript #html

How to use class in React

<!DOCTYPE html>
<html>

<body>
  
<script>
class Car {
  constructor(name) {
    this.brand = name;
  }
}

const mycar = new Car("Ford");

document.write(mycar.brand);
</script>

</body>
</html>

#javascript

test

new Card(cardContainer, {
    id: 'instructions',
    icon: 'fa-solid fa-medal',
    title: 'Contests',
    description: 'Where the magic happens! Manage contests and their teams.',
}).click(async () => {
    const modal = await new Modal(null, { id: 'instructions' }).loadContent('index-instructions');
    modal.addButton({
        text: 'OK, got it!',
        close: true,
    })
});

#css #javascript

hides the header, when scrolling down and reveals it, when scrolling up

JavaScript
<script>
document.addEventListener('scroll', function(e) {
var header = document.getElementById('sticky-header');
var scrollTop = window.scrollY || document.documentElement.scrollTop;

if (scrollTop > lastScrollTop) {
// Scroll Down
header.style.transform = 'translateY(-100%)';
} else {
// Scroll Up
header.style.transform = 'translateY(0)';
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
}, false);

var lastScrollTop = 0;
</script>

CSS
#sticky-header {
transition: transform 0.3s ease-in-out;
}

#javascript

smooth scroll

<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@0.2.28/bundled/lenis.js"></script>

<script>
const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xou
  direction: 'vertical', // vertical, horizontal
  gestureDirection: 'vertical', // vertical, horizontal, both
  smooth: true,
  mouseMultiplier: 1,
  smoothTouch: false,
  touchMultiplier: 2,
  infinite: false,
})

//get scroll value
lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
  console.log({ scroll, limit, velocity, direction, progress })
})

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)
</script>

#javascript

intermediate object oriented programming

The Canvas API can be used to create graphics in games using JavaScript and the HTML canvas element.

You will need to use the getContext method which will provide the context for where the graphics will be rendered.

Example Code
canvas.getContext("2d");

The canvas element has a width property which is a positive number that represents the width of the canvas.

Example Code
canvas.width

The innerWidth property is a number that represents the interior width of the browser window.

The innerHeight property is a number that represents the interior height of the browser window.

Here is the syntax for using the destructuring assignment in the parameter list of the arrow function:

Example Code
btn.addEventListener('click', ({ target }) => {
  console.log(target);
});

When working with objects where the property name and value are the same, you can use the shorthand property name syntax. This syntax allows you to omit the property value if it is the same as the property name.

Example Code
// using shorthand property name syntax
obj = {
  a, b, c
}
The following code is the same as:

Example Code
obj = {
  a: a,
  b: b,
  c: c
}

#javascript

Javascript complex object

const user = {
  
  "intro":  {
    "name" : "Saud",
    "age" : 20,
    "qualification": "BS Computer"
  },
  
  "address": {
    "country" : "Pakistan",
    "province" : "KP",
    "city" : "Mardan"
  },
  
  userIntro(){
    return `Name: ${this.intro.name}, age: ${this.intro.age}, qualification: ${this.intro.qualification}`;
  },

  userAddress(){
    return `country: ${this.address.country}, province: ${this.address.province}, city: ${this.address.city}`
  }
}

// let name = user.intro.name;
// console.log(name);

let userData = user.userIntro();
console.log(userData);

let addressData = user.userAddress()
console.log(addressData);

#javascript

Tailwindis config chavwerot es - initis mere gaxsnis files da chavanacvlebt

  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],

   
   
   
   
   da babelshi es --> 
     
  plugins: ["nativewind/babel"],

#javascript

npx tailwindcss init / rom gaushvas TCss

 npx tailwindcss init

#javascript

npm install --save-dev tailwindcss@latest

npm install --save-dev tailwindcss@latest

#javascript

sachiro ragaceebi

 npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

#javascript

npx create-expo-app@latest [your-app-name] --template blank@latest DAWYVEBA

npx create-expo-app@latest [your-app-name] --template blank@latest

#javascript

object oriented programming

You are already familiar with an HTML class, but JavaScript also has a class. In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods.

The class keyword is used to declare a class. Here is an example of declaring a Computer class:

Example Code
class Computer {};

Classes have a special constructor method, which is called when a new instance of the class is created. The constructor method is a great place to initialize properties of the class. Here is an example of a class with a constructor method:

Example Code
class Computer {
  constructor() {
  }
}

The this keyword in JavaScript is used to refer to the current object. Depending on where this is used, what it references changes. In the case of a class, it refers to the instance of the object being constructed. You can use the this keyword to set the properties of the object being instantiated. Here is an example:

Example Code
class Computer {
  constructor() {
    this.ram = 16;
  }
}

Here is an example of instantiating the Computer class from earlier examples:

Example Code
const myComputer = new Computer();

#javascript

create a `a` element using react.dom

var link = React.DOM.a({
                    href: this.makeHref('login')
                },
                'log in'
            );// or React.createElement or
//var link = <a href={this.makeHref('login')}>
//   'log in'</a>;
<div>{'Please '+ link + ' with your email...'}</div>

#javascript

functional programming

Functions are ideal for reusable logic. When a function itself needs to reuse logic, you can declare a nested function to handle that logic. Here is an example of a nested function:

Example Code
const outer = () => {
  const inner = () => {

  };
};

Object properties consist of key/value pairs. You can use shorthand property names when declaring an object literal. When using the shorthand property name syntax, the name of the variable becomes the property key and its value the property value.

The following example declares a user object with the properties userId, firstName, and loggedIn.

Example Code
const userId = 1;
const firstName = "John";
const loggedIn = true;

const user = {
  userId,
  firstName,
  loggedIn,
};

console.log(user); // { userId: 1, firstName: 'John', loggedIn: true }

The concept of returning a function within a function is called currying. This approach allows you to create a variable that holds a function to be called later, but with a reference to the parameters of the outer function call.

For example:

Example Code
const innerOne = elemValue(1);
const final = innerOne("A");
innerOne would be your inner function, with num set to 1, and final would have the value of the cell with the id of A1. This is possible because functions have access to all variables declared at their creation. This is called closure.

In your elemValue function, you explicitly declared a function called inner and returned it. However, because you are using arrow syntax, you can implicitly return a function. For example:

Example Code
const curry = soup => veggies => {};
curry is a function which takes a soup parameter and returns a function which takes a veggies parameter.

You can pass a function reference as a callback parameter. A function reference is a function name without the parentheses. For example:

Example Code
const myFunc = (val) => `value: ${val}`;
const array = [1, 2, 3];
const newArray = array.map(myFunc);
The .map() method here will call the myFunc function, passing the same arguments that a .map() callback takes. The first argument is the value of the array at the current iteration, so newArray would be [value: 1, value: 2, value: 3].

Arrays have a .some() method. Like the .filter() method, .some() accepts a callback function which should take an element of the array as the argument. The .some() method will return true if the callback function returns true for at least one element in the array.

Here is an example of a .some() method call to check if any element in the array is an uppercase letter.

Example Code
const arr = ["A", "b", "C"];
arr.some(letter => letter === letter.toUpperCase());

Arrays have an .every() method. Like the .some() method, .every() accepts a callback function which should take an element of the array as the argument. The .every() method will return true if the callback function returns true for all elements in the array.

Here is an example of a .every() method call to check if all elements in the array are uppercase letters.

Example Code
const arr = ["A", "b", "C"];
arr.every(letter => letter === letter.toUpperCase());

#javascript

advanced array methods. split(), map(), filter(), reduce(), sort(), Math.min(), Math.max(), Math.pow()

The .split() method takes a string and splits it into an array of strings. You can pass it a string of characters or a RegEx to use as a separator. For example, string.split(",") would split the string at each comma and return an array of strings.

The .map() method takes a callback function as its first argument. This callback function takes a few arguments, but the first one is the current element being processed. Here is an example:

Example Code
array.map(el => {

})

Much like the .map() method, the .filter() method takes a callback function. The callback function takes the current element as its first argument.

Example Code
array.filter(el => {

})

Array methods can often be chained together to perform multiple operations at once. As an example:

Example Code
array.map().filter();
The .map() method is called on the array, and then the .filter() method is called on the result of the .map() method. This is called method chaining.

The .reduce() method takes an array and applies a callback function to condense the array into a single value.

Like the other methods, .reduce() takes a callback. This callback, however, takes at least two parameters. The first is the accumulator, and the second is the current element in the array. The return value for the callback becomes the value of the accumulator on the next iteration.

Example Code
array.reduce((acc, el) => {

});

The .reduce() method takes a second argument that is used as the initial value of the accumulator. Without a second argument, the .reduce() method uses the first element of the array as the accumulator, which can lead to unexpected results.

To be safe, it's best to set an initial value. Here is an example of setting the initial value to an empty string:

Example Code
array.reduce((acc, el) => acc + el.toLowerCase(), "");

By default, the .sort() method converts the elements of an array into strings, then sorts them alphabetically. This works well for strings, but not so well for numbers. For example, 10 comes before 2 when sorted as strings, but 2 comes before 10 when sorted as numbers.

To fix this, you can pass in a callback function to the .sort() method. This function takes two arguments, which represent the two elements being compared. The function should return a value less than 0 if the first element should come before the second element, a value greater than 0 if the first element should come after the second element, and 0 if the two elements should remain in their current positions.

You previously learned about the global Math object. Math has a .min() method to get the smallest number from a series of numbers, and the .max() method to get the largest number. Here's an example that gets the smallest number from an array:

Example Code
const numbersArr = [2, 3, 1];

console.log(Math.min(...numbersArr));
// Expected output: 1

To calculate a root exponent, such as x−−√n
, you can use an inverted exponent x1/n
. JavaScript has a built-in Math.pow() function that can be used to calculate exponents.

Here is the basic syntax for the Math.pow() function:

Example Code
Math.pow(base, exponent);
Here is an example of how to calculate the square root of 4:

Example Code
const base = 4;
const exponent = 0.5;
// returns 2
Math.pow(base, exponent);

#javascript

pixelmatch@5.3.0 - Source code

window.pixelmatch = (() => {
  var __getOwnPropNames = Object.getOwnPropertyNames;
  var __commonJS = (cb, mod) => function __require() {
    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
  };

  // entry.js
  var require_entry = __commonJS({
    "entry.js"(exports, module) {
      module.exports = pixelmatch;
      var defaultOptions = {
        threshold: 0.1,
        // matching threshold (0 to 1); smaller is more sensitive
        includeAA: false,
        // whether to skip anti-aliasing detection
        alpha: 0.1,
        // opacity of original image in diff output
        aaColor: [255, 255, 0],
        // color of anti-aliased pixels in diff output
        diffColor: [255, 0, 0],
        // color of different pixels in diff output
        diffColorAlt: null,
        // whether to detect dark on light differences between img1 and img2 and set an alternative color to differentiate between the two
        diffMask: false
        // draw the diff over a transparent background (a mask)
      };
      function pixelmatch(img1, img2, output, width, height, options) {
        if (!isPixelData(img1) || !isPixelData(img2) || output && !isPixelData(output))
          throw new Error("Image data: Uint8Array, Uint8ClampedArray or Buffer expected.");
        if (img1.length !== img2.length || output && output.length !== img1.length)
          throw new Error("Image sizes do not match.");
        if (img1.length !== width * height * 4) throw new Error("Image data size does not match width/height.");
        options = Object.assign({}, defaultOptions, options);
        const len = width * height;
        const a32 = new Uint32Array(img1.buffer, img1.byteOffset, len);
        const b32 = new Uint32Array(img2.buffer, img2.byteOffset, len);
        let identical = true;
        for (let i = 0; i < len; i++) {
          if (a32[i] !== b32[i]) {
            identical = false;
            break;
          }
        }
        if (identical) {
          if (output && !options.diffMask) {
            for (let i = 0; i < len; i++) drawGrayPixel(img1, 4 * i, options.alpha, output);
          }
          return 0;
        }
        const maxDelta = 35215 * options.threshold * options.threshold;
        let diff = 0;
        for (let y = 0; y < height; y++) {
          for (let x = 0; x < width; x++) {
            const pos = (y * width + x) * 4;
            const delta = colorDelta(img1, img2, pos, pos);
            if (Math.abs(delta) > maxDelta) {
              if (!options.includeAA && (antialiased(img1, x, y, width, height, img2) || antialiased(img2, x, y, width, height, img1))) {
                if (output && !options.diffMask) drawPixel(output, pos, ...options.aaColor);
              } else {
                if (output) {
                  drawPixel(output, pos, ...delta < 0 && options.diffColorAlt || options.diffColor);
                }
                diff++;
              }
            } else if (output) {
              if (!options.diffMask) drawGrayPixel(img1, pos, options.alpha, output);
            }
          }
        }
        return diff;
      }
      function isPixelData(arr) {
        return ArrayBuffer.isView(arr) && arr.constructor.BYTES_PER_ELEMENT === 1;
      }
      function antialiased(img, x1, y1, width, height, img2) {
        const x0 = Math.max(x1 - 1, 0);
        const y0 = Math.max(y1 - 1, 0);
        const x2 = Math.min(x1 + 1, width - 1);
        const y2 = Math.min(y1 + 1, height - 1);
        const pos = (y1 * width + x1) * 4;
        let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
        let min = 0;
        let max = 0;
        let minX, minY, maxX, maxY;
        for (let x = x0; x <= x2; x++) {
          for (let y = y0; y <= y2; y++) {
            if (x === x1 && y === y1) continue;
            const delta = colorDelta(img, img, pos, (y * width + x) * 4, true);
            if (delta === 0) {
              zeroes++;
              if (zeroes > 2) return false;
            } else if (delta < min) {
              min = delta;
              minX = x;
              minY = y;
            } else if (delta > max) {
              max = delta;
              maxX = x;
              maxY = y;
            }
          }
        }
        if (min === 0 || max === 0) return false;
        return hasManySiblings(img, minX, minY, width, height) && hasManySiblings(img2, minX, minY, width, height) || hasManySiblings(img, maxX, maxY, width, height) && hasManySiblings(img2, maxX, maxY, width, height);
      }
      function hasManySiblings(img, x1, y1, width, height) {
        const x0 = Math.max(x1 - 1, 0);
        const y0 = Math.max(y1 - 1, 0);
        const x2 = Math.min(x1 + 1, width - 1);
        const y2 = Math.min(y1 + 1, height - 1);
        const pos = (y1 * width + x1) * 4;
        let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
        for (let x = x0; x <= x2; x++) {
          for (let y = y0; y <= y2; y++) {
            if (x === x1 && y === y1) continue;
            const pos2 = (y * width + x) * 4;
            if (img[pos] === img[pos2] && img[pos + 1] === img[pos2 + 1] && img[pos + 2] === img[pos2 + 2] && img[pos + 3] === img[pos2 + 3]) zeroes++;
            if (zeroes > 2) return true;
          }
        }
        return false;
      }
      function colorDelta(img1, img2, k, m, yOnly) {
        let r1 = img1[k + 0];
        let g1 = img1[k + 1];
        let b1 = img1[k + 2];
        let a1 = img1[k + 3];
        let r2 = img2[m + 0];
        let g2 = img2[m + 1];
        let b2 = img2[m + 2];
        let a2 = img2[m + 3];
        if (a1 === a2 && r1 === r2 && g1 === g2 && b1 === b2) return 0;
        if (a1 < 255) {
          a1 /= 255;
          r1 = blend(r1, a1);
          g1 = blend(g1, a1);
          b1 = blend(b1, a1);
        }
        if (a2 < 255) {
          a2 /= 255;
          r2 = blend(r2, a2);
          g2 = blend(g2, a2);
          b2 = blend(b2, a2);
        }
        const y1 = rgb2y(r1, g1, b1);
        const y2 = rgb2y(r2, g2, b2);
        const y = y1 - y2;
        if (yOnly) return y;
        const i = rgb2i(r1, g1, b1) - rgb2i(r2, g2, b2);
        const q = rgb2q(r1, g1, b1) - rgb2q(r2, g2, b2);
        const delta = 0.5053 * y * y + 0.299 * i * i + 0.1957 * q * q;
        return y1 > y2 ? -delta : delta;
      }
      function rgb2y(r, g, b) {
        return r * 0.29889531 + g * 0.58662247 + b * 0.11448223;
      }
      function rgb2i(r, g, b) {
        return r * 0.59597799 - g * 0.2741761 - b * 0.32180189;
      }
      function rgb2q(r, g, b) {
        return r * 0.21147017 - g * 0.52261711 + b * 0.31114694;
      }
      function blend(c, a) {
        return 255 + (c - 255) * a;
      }
      function drawPixel(output, pos, r, g, b) {
        output[pos + 0] = r;
        output[pos + 1] = g;
        output[pos + 2] = b;
        output[pos + 3] = 255;
      }
      function drawGrayPixel(img, i, alpha, output) {
        const r = img[i + 0];
        const g = img[i + 1];
        const b = img[i + 2];
        const val = blend(rgb2y(r, g, b), alpha * img[i + 3] / 255);
        drawPixel(output, i, val, val, val);
      }
    }
  });
  return require_entry();
})();

#javascript

spys.one proxy parser - Source code

// ==UserScript==
// @name         spys.one proxy parser
// @namespace    iquaridys:hideme-parser-proxy
// @version      0.1
// @description  parse proxy from site page
// @author       iquaridys
// @match        http://spys.one/*/
// @grant        GM_registerMenuCommand
// ==/UserScript==

(function() {
    'use strict';
    GM_registerMenuCommand('Parse', function() {
        var resultText = "";
        var a = document.getElementsByClassName('spy14');
            for(var i=0;i<a.length;i++){
                if(a[i].innerText.includes(':')){
                    resultText += a[i].innerText+"<br>";
                }
            }
        var win = window.open("about:blank", "proxy", "width=500,height=400");
        win.document.write(resultText);
    });
})();

#javascript #alt #alttoimages #seo

Add alt to all images if missing with image file name

<script type="text/javascript" async>
    ////add Attrs alt to images	
	function addAltAttrs() {
			
    //get the images
    let images = document.querySelectorAll("img"); 
     
    //loop through all images
    for (let i = 0; i < images.length; i++) {
		
       //check if alt missing
       if  ( !images[i].alt || images[i].alt == "" || images[i].alt === "") {
		//add file name to alt
         images[i].alt = images[i].src.match(/.*\/([^/]+)\.([^?]+)/i)[1];
       }
    } 
    // end loop
}
</script>

#html #css #javascript #topbutton #scrollup #upbutton #scrolltotop #jquery

Progress-bar (rtl dir)

<!-- in css: -->
<style>
  #p-bar-wrapper {
   	display:none;
   	position: fixed;
   	bottom: 0;
   	right: 0;
   	width: 100vw;
   	height: 8px;
   	background-color:#d1d6d8;
   	z-index: 18;
  }
  #progress-bar {
   	background-color:#295b71;
   	width: 0;
   	height: 8px;
   	transition: .3s;
  }
  #progress-bar span {
   	position: absolute;
   	color: #42616c;
   	top: -18px;
   	font-size: 0.8em;
   	font-weight: 600;
   	margin-right:0;
  }
  #run-bar.right-fix {
   	margin-right: -80px;
  }
  #run-bar.right-fix-2one {
   	margin-right: -77px;
  }
</style>

<!-- in html: -->
<div id="p-bar-wrapper">
    <div id="progress-bar"><span id="run-bar"></span></div>
</div>

<!-- in js: -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" async>
    document.addEventListener("DOMContentLoaded", function() {
    	  document.addEventListener("scroll", function() {
    	    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    	    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    		var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    		var windowWidth = window.innerWidth;
    		var p_bar =	document.getElementById("progress-bar");
    		var scrolled = (scrollTop / (scrollHeight - clientHeight)) * 100;
     
     	//Check if Tablet or smaller than hide all progress bar
    		if( windowWidth < 767 ){
    			return;
    		}
    		else {
    			jQuery("#p-bar-wrapper").css('display','block').show('slow');
    			p_bar.style.width = scrolled + "%";
    			var scrolled_num = parseInt(scrolled, 10);
    			var span_run = document.getElementById("run-bar");
    			jQuery(span_run).text(scrolled_num + '%').css('right',scrolled + '%');
    				if (scrolled == 100){
    					jQuery(span_run).addClass('right-fix-2one').css('color','#21f1af');
    				}
    				else {
    					jQuery(span_run).removeClass('right-fix-2one').css('color','#42616c');
    					if (scrolled > 15){
    						jQuery(span_run).addClass('right-fix');
    					}
    					else {
    						jQuery(span_run).removeClass('right-fix');
    					}
    				}
    			}
    		});
    	});	
</script>

#html #css #javascript #topbutton #scrollup #upbutton #scrolltotop #jquery

Button UP with animation

<!-- in css: -->
<style>
	#up-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
  	  z-index: 15;
	  cursor: pointer;
      transition: all .3s;
  	}
 	img[src$=".svg"]{
		width:48px
    }
</style>

<!-- in html: -->
<div class="btn-hide" data-id="" data-element_type="widget" id="up-btn" data-settings="" alt="scroll to top">
	<img width="40" height="55" src="https://aspx.co.il/wp-content/uploads/2023/04/arrowup.svg" class="" alt="arrowup" /> 
</div>

<!-- in js: -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" async>
	jQuery(document).ready(function($){
  
	//Check to see if the window is top if more then 500px from top display button
	$(window).scroll(function(){
		if ($(this).scrollTop() > 500) {
			$('#up-btn').fadeIn(300,'linear').removeClass('btn-hide');
		} else {
			$('#up-btn').fadeOut(200).hide('slow').addClass('btn-hide');
		}
	});

	//Click event to scroll to top
	$('#up-btn').click(function(){
		$('html, body').animate({scrollTop : 0},800);
		$(this).addClass('btn-hide');
			return false;
	});
</script>

#javascript

Crea una Cloud Function con la consola de Google Cloud. | Cloud Functions Documentation

const functions = require('@google-cloud/functions-framework');

functions.http('helloHttp', (req, res) => {
 res.send(`Hello ${req.query.name || req.body.name || 'World'}!`);
});

#javascript

VAT calculator

let rawPrize = prompt("Enter your first name");

#javascript

Full Name Prompt console.log

let b = 0;      // b contains 0

b += 1;         // b contains 1

b++;            // b contains 2

console.log(b); // Shows 2

#javascript

directly convert user prompt input to number

const nb = Number(prompt("Enter a number:")); // nb's type is number

#javascript

Simple Increment a number variable

console.log("Hello from JavaScript!");

console.log("Let's do some math");

console.log( + 7);
4
console.log(12 / 0);

console.log("Goodbye!");

#javascript

Assign values to variables

console.log("Hello from JavaScript!");

console.log("Let's do some math");

console.log( + 7);
4
console.log(12 / 0);

console.log("Goodbye!");

#javascript

Minimalistic Calculator

console.log("Hello from JavaScript!");

console.log("Let's do some math");

console.log( + 7);
4
console.log(12 / 0);

console.log("Goodbye!");

#javascript

basic algorithmic thinking, bubble, selection, insertion sort

Now you need to actually sort the array. The first sorting algorithm you will implement is the bubble sort, which starts at the beginning of the array and 'bubbles up' unsorted values towards the end, iterating through the array until it is completely sorted.

const bubbleSort = (array) => {
  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array.length - 1; j++) {
      console.log(array, array[j], array[j + 1]);

      if (array[j] > array[j + 1]) {
        const temp = array[j];
        array[j] = array[j + 1];
        array[j + 1] = temp;
      }
    }
  }

  return array;
}
  
  Time to implement another sorting algorithm. This time, you'll be implementing a selection sort. Selection sort works by finding the smallest value in the array, then swapping it with the first value in the array. Then, it finds the next smallest value in the array, and swaps it with the second value in the array. It continues iterating through the array until it is completely sorted.
  
const selectionSort = (array) => {
  for (let i = 0; i < array.length; i++) {
    let minIndex = i;

    for (let j = i + 1; j < array.length; j++) {
      console.log(array, array[j], array[minIndex]);
      if (array[j] < array[minIndex]) {
        minIndex = j;
      }
    }

    const temp = array[i];
    array[i] = array[minIndex];
    array[minIndex] = temp;
  }

  return array;
}

The last sorting algorithm you will implement is the insertion sort. This algorithm works by building up a sorted array at the beginning of the list. It begins the sorted array with the first element. Then it inspects the next element and swaps it backward into the sorted array until it is in a sorted position, and so on.

const insertionSort = (array) => {
  for (let i = 1; i < array.length; i++) {
    const currValue = array[i];
    let j = i - 1;

    while (j >= 0 && array[j] > currValue) {
      array[j + 1] = array[j];
      j--;
    }
    array[j + 1] = currValue;
  }
  return array;
}

To sort the elements of an array, you can use the built-in method called .sort(). 

Notice how the double digit number(10) is placed at the beginning of the array. This is because the default behavior of .sort() is to convert the numbers values to strings, and sort them alphabetically. And 10 comes before 2 alphabetically.

To fix this, you can pass a callback function to the .sort() method. The callback function has two parameters - for yours, use a and b. The parameters of a and b represent the number values in the array that will be sorted.

const sortedValues = inputValues.sort((a, b) => {
    return a - b;
  });

#javascript

Regular Expressions

Regular expressions, often shortened to "regex" or "regexp", are patterns that help programmers match, search, and replace text. Regular expressions are powerful, but can be difficult to understand because they use so many special characters.

Your first regular expression will be used to catch help requests. Declare a helpRegex variable, and assign it a regular expression that matches the string please help.

As a refresher, here is a regular expression to match the string hello world:

Example Code
const regex = /hello world/;

Regular expressions can take flags to modify their behavior. For instance, the i flag can be used to make the expression ignore case, causing it to match hello, HELLO, and Hello for the expression /hello/.

Flags are added after the trailing slash.

Strings have a .match() method, which accepts a regular expression as an argument and determines if the string matches that expression.

Instead of using the .match() method, you can use the .test() method of a regular expression to test if a string matches the pattern. Unlike .match(), .test() returns a boolean value indicating whether or not the string matches the pattern.

The alternate sequence | can be used to match either the text on the left or the text on the right of the |. For example, the regular expression /yes|no/ will match either yes or no.

A character class is defined by square brackets, and matches any character within the brackets. For example, [aeiou] matches any character in the list aeiou. You can also define a range of characters to match using a hyphen. For example, [a-z] matches any character from a to z.

The value may be more than one digit. To match this, the + quantifier can be used - this matches one or more consecutive occurrences. For example, the regular expression /a+/ matches one or more consecutive a characters.

A capture group is a way to define a part of the expression that should be captured and saved for later reference. You can define a capture group by wrapping a part of your expression in parentheses. For example, /h(i|ey) camper/ would match either hi camper or hey camper, and would capture i or ey in a group.

Now that you have your capture group, you can mark the entire pattern as an optional match. The ? quantifier matches zero or one occurrence of the preceding character or group. For example, the regular expression /colou?r/ matches both color and colour, because the u is optional.

One last thing with this expression. You don't actually need the match value from your capture group, so you can turn it into a non-capturing group. This will allow you to group the characters together without preserving the result.

To create a non-capturing group in a regular expression, you can add ?: after the opening parenthesis of a group. For instance, (?:a|b) will match either a or b, but it will not capture the result.

Your regex should match whole words, not partial words. That is, you do not want to match hands-free money management.

To do this, start by checking for spaces before and after your pattern. You can do this by using the meta character \s, which will match spaces, tabs, and line breaks.

Like the ^ anchor, you can use the $ anchor to match the end of the string.

#javascript

Scroll and add class

<script>
    document.addEventListener("scroll", function() {


    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
        document.querySelector('.footer-button').classList.remove('d-none')
    } else {

        document.querySelector('.footer-button').classList.add('d-none')

    }
})

</script>

#javascript

JS Recursion

In an earlier project you learned about truthy and falsy values, which are values that evaluate to true or false. In JavaScript, some common falsy values you'll see are null, undefined, the number 0, and empty strings.

Rather than check if a value is equal to a falsy value, you can use the logical NOT operator (!) to check if the value itself is falsy. For example:

const num = 0;

console.log(num === 0); // true
console.log(!num); // true

A good way to check and normalize numbers in JavaScript is to use the built-in parseInt() function, which converts a string into an integer or whole number. parseInt() takes at least one argument, a string to be converted into an integer, and returns either an integer or NaN which stands for Not a Number. For example:

parseInt(2.2); // 2
parseInt("2e+3"); // 2
parseInt("e") // NaN

Next, you need to check if the value returned by the parseInt() function is a number or not.

To do that, you can use the isNaN() function. This function takes in a string or number as an argument, and returns true if it evaluates to NaN. For example:

isNaN("test"); // true
isNaN(2); // false
isNaN("3.5"); // false

The setTimeout function takes two arguments: a callback function and a number representing the time in milliseconds to wait before executing the callback function.

For example, if you wanted to log "Hello, world!" to the console after 3 seconds, you would write:

setTimeout(() => {
  console.log("Hello, world!");
}, 3000);

If you test your code, you'll notice that your console logs are not in the expected order. Instead of logging "free", pausing for a second before logging "Code", and finally logging "Camp", you'll see this:

Example Code
free
Camp
Code
This is because the setTimeout() function is asynchronous, meaning that it doesn't stop the execution of the rest of your code. All the code in the showAnimation() function runs line by line, but because setTimeout() is asynchronous, free and Camp are logged to the console immediately, and then Code is logged to the console after a one second delay.

While asynchronous, or async, code can be difficult to understand at first, it has many advantages. One of the most important is that it allows you to write non-blocking code.

For example, imagine you're baking a cake, and you put the cake in the oven and set a timer. You don't have to sit in front of the oven waiting the entire time – you can wash dishes, read a book, or do anything else while you wait for the timer to go off.

Async code works in a similar way. You can start an async operation and other parts of your code will still work while that operation is running.

#javascript

localStorage JS

 LocalStorage is a web storage feature of JavaScript that lets you persist data by storing the data as a key:value pair.
 
In earlier projects, you learned how to add and remove classes from an element with el.classList.add() and el.classList.remove(). Another method to use with the classList property is the toggle method.

The toggle method will add the class if it is not present on the element, and remove the class if it is present on the element.

element.classList.toggle("class-to-toggle");

The HTML dialog element has a showModal() method that can be used to display a modal dialog box on a web page.

dialogElement.showModal();

The HTML dialog element has a close() method that can be used to close a modal dialog box on a web page.

dialogElement.close();

The findIndex() array method finds and returns the index of the first element in an array that meets the criteria specified by a provided testing function. If no such element is found, the method returns -1.

Here's an example:

const numbers = [3, 1, 5, 6];
const firstNumLargerThanThree = numbers.findIndex((num) => num > 3);

console.log(firstNumLargerThanThree); // prints index 2

To make the id more unique, add another hyphen and use Date.now().

Date.now() returns the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC.

console.log(Date.now()); // 1628586800000

Instead of clearing the input fields one by one, it's a good practice to create a function that handles clearing those fields. You can then call this function whenever you need to clear the input fields again.

splice() is an array method that modifies arrays by removing, replacing, or adding elements at a specified index, while also returning the removed elements. It can take up to three arguments: the first one is the mandatory index at which to start, the second is the number of items to remove, and the third is an optional replacement element. Here's an example:

const fruits = ["mango", "date", "cherry", "banana", "apple"];

// Remove date and cherry from the array starting at index 1
const removedFruits = fruits.splice(1, 2);

console.log(fruits); // [ 'mango', 'banana', 'apple' ]
console.log(removedFruits); // [ 'date', 'cherry' ]

localStorage offers methods for saving, retrieving, and deleting items. The items you save can be of any JavaScript data type.

For instance, the setItem() method is used to save an item, and the getItem() method retrieves the item. To delete a specific item, you can utilize the removeItem() method, or if you want to delete all items in the storage, you can use clear().

Here's how you can save an item:

localStorage.setItem("key", value); // value could be string, number, or any other data type

If you check the "Application" tab of your browser console, you'll notice a series of [object Object]. This is because everything you save in localStorage needs to be in string format.

To resolve the issue, wrap the data you're saving in the JSON.stringify() method. 

The syntax for reading the localStorage item is as follows:

const cat = localStorage.getItem("myCat");

The syntax for removing the localStorage item is as follows:

localStorage.removeItem("myCat");

The syntax for removing all the localStorage items is as follows:

localStorage.clear();

#javascript

Modern JS methods

We are going to use a method called Object.freeze(obj) which will freeze this object and prevent any changes being made to it.

In the last two steps, you have been accessing properties from the myFavoriteFootballTeam object using dot notation and assigning them to new const variables. But in JavaScript, there is an easier way to accomplish the same goal.

The object destructuring syntax allows you to unpack values from arrays and objects:

const developerObj = {
  name: "Jessica Wilkins",
  isDeveloper: true
};

// Object destructuring
const { name, isDeveloper } = developerObj;

Function parameters can be initialized with default values. If a function is called without an argument, then the default value will be used:

const greeting = (name = "Anonymous") => {
  return "Hello " + name;
} 

console.log(greeting("John")); // Hello John
console.log(greeting()); // Hello Anonymous

#react.js #javascript

React Patterns Render prop

const Width = ({ children }) => children(500);

#javascript

Date Object, switch, join(), split(), reverse()

In JavaScript, there are many built-in constructors that create objects. A constructor is like a regular function, but starts with a capital letter, and is initialized with the new operator.

For example, you can use the Date() constructor with the new operator to create a new Date object that returns a string with the current date and time:

const currentDate = new Date();
console.log(currentDate);

// Output:
// Mon Aug 23 2021 15:31:00 GMT-0400 (Eastern Daylight Time)

The Date object has a number of methods that allow you to get the date and time in different formats.

One of those is the .getDate() method, which returns a number between 1 and 31 that represents the day of the month for that date. For example:

const date = new Date();
const dayOfTheMonth = date.getDate();
console.log(dayOfTheMonth); // 20

The .getMonth() method returns a number between 0 and 11. This represents the month for the date provided, where 0 is January and 11 is December. Because the number this method returns is zero-based, you need to add 1 to it to get the expected month number.

The .getFullYear() method returns a number which represents the year for the provided date.

The .getHours() method returns a number between 0 and 23. This represents the hour for the provided date, where 0 is midnight and 23 is 11 p.m.

The .getMinutes() method returns a number between 0 and 59 which represents the minutes for the provided date.

n JavaScript, the change event is used to detect when the value of an HTML element has changed:

element.addEventListener("change", () => {
    
});

A switch statement is used to compare an expression against multiple possible values and execute different code blocks based on the match. It's commonly used for branching logic.

For example, here's how to compare the expression dayOfWeek against possible values:

switch (dayOfWeek) {
  case 1:
    console.log("It's Monday!");
    break;
  case 2:
    console.log("It's Tuesday!");
    break;
  // ...cases for other workdays
  default:
    console.log("It's the weekend!");
}
    
You can add a case clause in the switch statement that checks for a match against the expression expr, followed by code to run if there's a match. Here's an example where the case clause checks that expr is equal to the string "case123":

switch (expr) {
  case 'case123':
    // Write your logic here
}
    
If your switch statement is going to have multiple cases, it is best practice to include a break statement.

The break statement will tell the JavaScript interpreter to stop executing statements. Without adding a break statement at the end of each case block, the program will execute the code for all matching cases:

switch (someVariable) {
  case 'case123':
    // Write your logic here
    break; // Terminates the switch statement
}
    
In a switch statement, the default case is executed when none of the previous case conditions match the value being evaluated. It serves as a catch-all for any other possible cases. For example:

const dayOfWeek = 7;

switch (dayOfWeek) {
  case 1:
    console.log("It's Monday!");
    break;
  case 2:
    console.log("It's Tuesday!");
    break;
  // ...cases for other workdays
  default:
    console.log("It's the weekend!");
}
    
The split() method is used to divide a string into substrings based on a specified separator. It then returns these substrings as elements of an array.

Here is an example of taking the words "Hello World" and returning an array of one element:

const greeting = "Hello World";
greeting.split(); // ["Hello World"]
    
The split method takes in a parameter known as a separator. The separator is used to tell the computer where each split should occur.

Here is an example of using an empty string as a separator:

// returns ["h", "e", "l", "l", "o"]
"hello".split(""); 
Other examples of separators can include a space " ", or a hyphen "-". If you don't provide a separator, the method will return an array with the original string as the only element.
    
To reverse an array of elements, you can use the reverse method. This method reverses the order of the elements in the array in place. The first element becomes the last, and the last element becomes the first.

Here is an example of using the reverse method:

// returns [5, 4, 3, 2, 1]
[1, 2, 3, 4, 5].reverse(); 
    
The join method takes an array of elements and joins them into a string. Similar to the split method, the join method also takes an optional separator. If you don't provide a separator, the default separator is a comma.

Here is an example of using the join method:

// returns "1-2-3-4-5"
[1, 2, 3, 4, 5].join("-");

#javascript

string and array methods

The spread operator (...) allows you to copy all elements from one array into another. It can also be used to concatenate multiple arrays into one. In the example below, both arr1 and arr2 have been spread into combinedArr:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedArr = [...arr1, ...arr2];
console.log(combinedArr); // Output: [1, 2, 3, 4, 5, 6]

An arrow function is an anonymous function expression and a shorter way to write functions. Anonymous means that the function does not have a name. Arrow functions are always anonymous.

Here is the basic syntax:

() => {}
To create a named arrow function, you can assign the function to a variable:

const exampleFunction = () => {
  // code goes here
}

To call a named arrow function expression, you can reference the function by its name.

exampleArrowFunction();

Just like regular functions, arrow functions can accept multiple parameters.

Here is an example of a named arrow function with one parameter:

const greet = (name) => {
  console.log(`Hello, ${name}!`);
};
If the function only has one parameter, you can omit the parentheses around the parameter list like this:

const greet = name => {
  console.log(`Hello, ${name}!`);
};

Just like regular functions, arrow functions can return values.

Here is an example of an arrow function returning the result of multiplying two numbers:

const multiplyTwoNumbers = (num1, num2) => {
  return num1 * num2;
}

// Output: 12
console.log(multiplyTwoNumbers(3, 4)); 

If the arrow function is returning a simple expression, you can omit the return keyword and the curly braces {}. This is called an implicit return.

const multiplyTwoNumbers = (num1, num2) => num1 * num2;
If your arrow function has multiple lines of code in the function body, then you need to use the return keyword and the curly braces {}.

const getTax = (price) => {
  const taxRate = 0.08;
  const tax = price * taxRate;
  return tax;
};

The map() method is used to iterate through an array and return a new array. It's helpful when you want to create a new array based on the values of an existing array. For example:

const numbers = [1, 2, 3];
const doubledNumbers = numbers.map((number) => number * 2); // doubledNumbers will be [2, 4, 6]
Notice that the map() method takes a function as an argument. This is called a callback function, which is a function that is passed to another function as an argument. In the example above, the callback function is (number) => number * 2, and it's run on each element in the numbers array. The map() method then returns a new array with the results.

Right now the songsHTML is an array. If you tried to display this as is, you would see the songs separated by commas. This is not the desired outcome because you want to display the songs as a list. To fix this, you will need to join the array into a single string by using the join() method.

The join() method is used to concatenate all the elements of an array into a single string. It takes an optional parameter called a separator which is used to separate each element of the array. For example:

const exampleArr = ["This", "is", "a", "sentence"];
const sentence = exampleArr.join(" "); // Separator takes a space character
console.log(sentence); // Output: "This is a sentence"

Optional chaining (?.) helps prevent errors when accessing nested properties that might be null or undefined. For example:

const user = {
  name: "Quincy",
  address: {
    city: "San Francisco",
    state: "CA",
    country: "USA",
  },
};

// Accessing nested properties without optional chaining
const state = user.address.state; // CA

// Accessing a non-existent nested property with optional chaining
const zipCode = user.address?.zipCode; // Returns undefined instead of throwing an error

The sort() method converts elements of an array into strings and sorts them in place based on their values in the UTF-16 encoding.

const names = ["Tom", "Jessica", "Quincy", "Naomi"];
names.sort() // ["Jessica", "Naomi", "Quincy", "Tom"]

To sort the songs in alphabetical order by title, you will need to pass in a compare callback function into your sort() method.

Here is an example of sorting a list of fruits by name.

const fruits = [
  { name: "Apples", price: 0.99 },
  { name: "Blueberries", price: 1.49 },
  { name: "Grapes", price: 2.99 },
];

fruits.sort((a, b) => {
  if (a.name < b.name) {
    return -1;
  }

  if (a.name > b.name) {
    return 1;
  }

  return 0;
});

The sort() method accepts a compare callback function that defines the sort order.

In this example, the first condition (a.name < b.name) checks if the name of the first fruit is less than the name of the second fruit. If so, the first fruit is sorted before the second fruit.

Strings are compared lexicographically which means they are compared character by character. For example, "Apples" is less than "Bananas" because "A" comes before "B" in the alphabet.

The reason why this example is returning numbers is because the sort() method is expecting a number to be returned. If you return a negative number, the first item is sorted before the second item.

const fruits = [
  { name: "Apples", price: 0.99 },
  { name: "Blueberries", price: 1.49 },
  { name: "Grapes", price: 2.99 },
];

fruits.sort((a, b) => {
  if (a.name < b.name) {
    return -1;
  }

  if (a.name > b.name) {
    return 1;
  }

  return 0;
});

The find() method retrieves the first element within an array that fulfills the conditions specified in the provided callback function. If no element satisfies the condition, the method returns undefined.

In the example below, the find() method is used to find the first number greater than 25:

const numbers = [10, 20, 30, 40, 50];

// Find the first number greater than 25
const foundNumber = numbers.find((number) => number > 25);
console.log(foundNumber); // Output: 30

To get the index for the current song, you can use the indexOf() method. The indexOf() array method returns the first index at which a given element can be found in the array, or -1 if the element is not present.

const animals = ["dog", "cat", "horse"];
animals.indexOf("cat") // 1

The forEach method is used to loop through an array and perform a function on each element of the array. For example, suppose you have an array of numbers and you want to log each number to the console.

const numbers = [1, 2, 3, 4, 5];

// Using forEach to iterate through the array
numbers.forEach((number) => {
  console.log(number); // 1, 2, 3, 4, 5
});

textContent sets the text of a node and allows you to set or retrieve the text content of an HTML element.

<div id="example">This is some text content</div>
Example Code
const element = document.getElementById('example');
console.log(element.textContent); // Output: This is some text content

In earlier steps, you learned how to work with the sort() method to sort the songs in alphabetical order. Another use case for the callback function is to randomize an array.

One way to randomize an array of items would be to subtract 0.5 from Math.random() which produces random values that are either positive or negative. This makes the comparison result a mix of positive and negative values, leading to a random ordering of elements.

const names = ["Tom", "Jessica", "Quincy", "Naomi"];
names.sort(() => Math.random() - 0.5);

createElement() is a DOM method you can use to dynamically create an element using JavaScript. To use createElement(), you call it, then pass in the tag name as a string:

// syntax
document.createElement(tagName)

// example
document.createElement('div')

You can also assign it to a variable:

const divElement = document.createElement('div')

Now that you've created the button, you need to assign it a text. To do this, you need to use the createTextNode() method of DOM.

The createTextNode() method is used to create a text node. To use it, you call it and pass in the text as a string:

document.createTextNode("your text")

You can also assign it to a variable:

const myText = document.createTextNode("your text")

Now that you've created the resetButton, you need to assign it an id and aria-label attributes. JavaScript provides the id and ariaLabel properties you need to use for this.

For example, element.id would set an id attribute, and element.ariaLabel would set an aria-label attribute. Both of them accept their values as a string.

appendChild() lets you add a node or an element as the child of another element. In the example below, the text "Click me" would be attached to the button:

const parentElement = document.createElement("button")
const parentElementText = document.createTextNode("Click me")

// attach the text "Click me" to the button
parentElement.appendChild(parentElementText)

#html #angular #css #javascript #java #sql #mysql

Cryptocurrency Exchange script | Alphacodez

The Alphacodez Cryptocurrency Exchange Script is a robust solution for launching secure and efficient trading platforms, featuring user management, a high-performance trading engine, and wallet integration. It offers advanced security measures and customization options. Ongoing support and maintenance ensure smooth operation.

#html #angular #css #javascript #java #sql #mysql

Cryptocurrency exchange script

https://www.alphacodez.com/cryptocurrency-exchange-script

#javascript

basic regular expressions, template literals, addEventListener() method

To access an HTML element with a given id name, you can use the getElementById() method. Here's an example of how to use this method:

<h1 id="title">Main title</h1>
Example Code
const mainTitleElement = document.getElementById('title');

In programming, prefixing a variable with is or has is a common practice to signify that the variable represents a boolean value.

Here are a few examples:

let isRunning = true;
let hasCompleted = false;

Values from an HTML input field are received as strings in JavaScript. You'll need to convert these strings into numbers before performing any calculations.

To match specific characters in a string, you can use Regular Expressions or "regex" for short.

Regex in JavaScript is indicated by a pattern wrapped in forward slashes. The following example will match the string literal "hello":

const regex = /hello/;

In regex, shorthand character classes allow you to match specific characters without having to write those characters in your pattern. Shorthand character classes are preceded with a backslash (\). The character class \s will match any whitespace character.

JavaScript provides a .replace() method that enables you to replace characters in a string with another string. This method accepts two arguments. The first argument is the character sequence to be replaced, which can be either a string or a regex pattern. The second argument is the string that replaces the matched sequence.

Since strings are immutable, the replace method returns a new string with the replaced characters.

In this example, the replace method is used to replace all instances of the letter l with the number 1 in the string hello.

"hello".replace(/l/g, "1");

Strings have a .match() method, which takes a regex argument. .match() will return an array of match results – containing either the first match, or all matches if the global flag is used.

const str = 'example string';
const regex = /example/;
const result = str.match(regex); // Returns ['example']

The match method returns an array with any matches found in the string.

Here is a complete breakdown of that information:

"1e3" is the matched value against the /\d+e\d+/i regex.
index: 0 is the index of the matched value in the string.
input: '1e3' is the original string that was matched.
groups: undefined are the matched groups, which are not used in this case. You will learn more about groups in a later project.

The match method returns null when no match is found. In this case, the isInvalidInput function should return null when the input is a valid number without any scientific notation.

null in JavaScript is a special primitive that represents the intentional absence of a value. In a boolean context, null is considered falsy which evaluates to false in a conditional statement.

JavaScript has a feature called template literals, which allow you to interpolate variables directly within a string. Template literals are denoted with backticks ``, as opposed to single or double quotes. Variables can be passed in to a template literal by surrounding the variable with ${} – the value of the variable will be inserted into the string.

For example:

const name = "Naomi";
const templateLiteral = `Hello, my name is ${name}~!`;
console.log(templateLiteral);
The console will show the string "Hello, my name is Naomi~!".

The querySelectorAll() method returns a NodeList of all the elements that match the selector. A NodeList is an array-like object, so you can access the elements using bracket notation.

The innerHTML property sets or returns the HTML content inside an element.

Here is a form element with a label and input element nested inside.

<form id="form">
  <label for="first-name">First name</label>
  <input id="first-name" type="text">
</form>
If you want to add another label and input element inside the form, then you can use the innerHTML property as shown below:

const formElement = document.getElementById("form");
const formContent = `
  <label for="last-name">Last name</label>
  <input id="last-name" type="text">
`;
formElement.innerHTML += formContent;

The following example uses the addEventListener method to add a click event to a button. When the button is clicked, the printName function is called.

<button class="btn">Print name</button>
Example Code
const button = document.querySelector('.btn');
function printName() {
  console.log("Jessica");
}
button.addEventListener('click', printName);
The addEventListener method takes two arguments. The first is the event to listen to. (Ex. 'click') The second is the callback function, or the function that runs when the event is triggered.

The insertAdjacentHtml method takes two arguments. The first argument is a string that specifies the position of the inserted element. The second argument is a string containing the HTML to be inserted.

The submit event is triggered when the form is submitted. The default action of the submit event is to reload the page. You need to prevent this default action using the preventDefault() method of your e parameter.

Math.abs() is a built-in JavaScript method that will return the absolute value of a number.

const num = -5;
Math.abs(num); // 5

Finally, you need to make the #output element visible so the user can see your text. Your output variable is an Element, which has a classList property. This property has a .remove() method, which accepts a string representing the class to remove from the element.

Example Code
const paragraphElement = document.getElementById('paragraph');
paragraphElement.classList.remove('hide');

Remember that document.querySelectorAll returns a NodeList, which is array-like but is not an array. However, the Array object has a .from() method that accepts an array-like and returns an array. This is helpful when you want access to more robust array methods, which you will learn about in a future project.

The following example takes a NodeList of li elements and converts it to an array of li elements:

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>
Example Code
const listItemsArray = Array.from(document.querySelectorAll('li'));

console.log(listItemsArray); //Output: (3) [li, li, li]

The difference between innerText and innerHTML is that innerText will not render HTML elements, but will display the tags and content as raw text.

#javascript

JS Fundamentals

Now you can start writing your JavaScript. Begin by creating a script element. This element is used to load JavaScript into your HTML file.

<script>
  // JavaScript code goes here
</script>

One of the most powerful tools is your developer console. Depending on your browser, this might be opened by pressing F12 or Ctrl+Shift+I. On Mac, you can press Option + ⌘ + C and select "Console". You can also click the "Console" button above the preview window to see our built-in console.

The developer console will include errors that are produced by your code, but you can also use it to see values of variables in your code, which is helpful for debugging.

JavaScript interacts with the HTML using the Document Object Model, or DOM. The DOM is a tree of objects that represents the HTML. You can access the HTML using the document object, which represents your entire HTML document.

One method for finding specific elements in your HTML is using the querySelector() method. The querySelector() method takes a CSS selector as an argument and returns the first element that matches that selector. For example, to find the <h1> element in your HTML, you would write:

let h1 = document.querySelector("h1");
Note that h1 is a string and matches the CSS selector you would use.

We have run into a slight problem. You are trying to query your page for a button element, but your script tag is in the head of your HTML. This means your code runs before the browser has finished reading the HTML, and your document.querySelector() will not see the button - because the browser hasn't processed it yet.

To fix this, move your script element out of the head element, and place it at the end of your body element (just before the closing <body> tag.)

button1 represents your first button element. These elements have a special property called onclick, which you can use to determine what happens when someone clicks that button.

You can access properties in JavaScript a couple of different ways. The first is with dot notation. Here is an example of using dot notation to set the onclick property of a button to a function reference.

button.onclick = myFunction;
In this example, button is the button element, and myFunction is a reference to a function. When the button is clicked, myFunction will be called.

The innerText property controls the text that appears in an HTML element. For example:

<p id="info">Demo content</p> 
Example Code
const info = document.querySelector("#info"); 
info.innerText = "Hello World"; 
The following example would change the text of the p element from Demo content to Hello World.

Objects are an important data type in JavaScript. The next few steps will be dedicated to learning about them so you will better understand how to apply them in your project.

Objects are non primitive data types that store key-value pairs. Non primitive data types are mutable data types that are not undefined, null, boolean, number, string, or symbol. Mutable means that the data can be changed after it is created.

Here is the basic syntax for an object:

{
  key: value
}

Objects are similar to arrays, except that instead of using indexes to access and modify their data, you access the data in objects through properties.

Properties consist of a key and a value. The key is the name of the property, and the value is the data stored in the property.

Here is an example of an object with a single property:

const obj = {
  name: "Quincy Larson"
};

If the property name (key) of an object has a space in it, you will need to use single or double quotes around the name.

Here is an example of an object with a property name that has a space:

const spaceObj = {
  "Space Name": "Kirk",
};
If you tried to write a key without the quotes, it would throw an error:

const spaceObj = {
  // Throws an error
  Space Name: "Kirk",
}; 

There are two ways to access the properties of an object: dot notation (.) and bracket notation ([]), similar to an array.

Dot notation is what you use when you know the name of the property you're trying to access ahead of time.

object.property;
Here is a sample of using dot notation (.) to read the name property of the developer object:

const developer = {
  name: "Jessica",
}

// Output: Jessica
console.log(developer.name); 

The second way to access the properties of an object is bracket notation ([]). If the property of the object you are trying to access has a space in its name, you will need to use bracket notation.

objectName["property name"];
Here is a sample of using bracket notation to read an object's property:

const spaceObj = {
  "Space Name": "Kirk",
};

spaceObj["Space Name"]; // "Kirk"

By default, the HTML element that shows the monster's stats has been hidden with CSS. When the player clicks the "Fight dragon" button, the monster's stats should be displayed. You can accomplish this by using the style and display properties on the monsterStats element.

The style property is used to access the inline style of an element and the display property is used to set the visibility of an element.

Here is an example of how to update the display for a paragraph element:

const paragraph = document.querySelector('p');
paragraph.style.display = 'block';

The Math object in JavaScript contains static properties and methods for mathematical constants and functions. One of those is Math.random(), which generates a random number from 0 (inclusive) to 1 (exclusive). Another is Math.floor(), which rounds a given number down to the nearest integer.

Using these, you can generate a random number within a range. For example, this generates a random number between 1 and 5: Math.floor(Math.random() * 5) + 1;.

The innerHTML property allows you to access or modify the content inside an HTML element using JavaScript.

Here is an example of updating the content for this paragraph element using the innerHTML property.

<p id="demo">This is a paragraph.</p>
document.querySelector("#demo").innerHTML = "Hello, innerHTML!";

The ternary operator is a conditional operator and can be used as a one-line if-else statement. The syntax is: condition ? expressionIfTrue : expressionIfFalse.

Here is an example of returning a value using an if-else statement and a refactored example using a ternary operator:

// if-else statement
if (score > 0) {
  return score
} else {
  return default_score
}

// ternary operator
return score > 0 ? score : default_score

The logical OR operator will use the first value if it is truthy – that is, anything apart from NaN, null, undefined, 0, -0, 0n, "", and false. Otherwise, it will use the second value.

For example: num < 10 || num > 20.

The .includes() method determines if an array contains an element and will return either true or false.

Here is an example of the .includes() syntax:

Example Code
const numbersArray = [1, 2, 3, 4, 5]
const number = 3

if (numbersArray.includes(number)) {
  console.log("The number is in the array.")
}

#react.js #cryptocurrency #bitcoin #javascript

Cryptocurrency exchange script – Create a secure Bitcoin exchange

https://www.dappfort.com/cryptocurrency-exchange-script/

#javascript

JS Basics

In programming, you will often need to work with lots of data. There are many data structures that can help you organize and manage your data. One of the most basic data structures is an array.

An array is a non-primitive data type that can hold a series of values. Non-primitive data types differ from primitive data types in that they can hold more complex data. Primitive data types like strings and numbers can only hold one value at a time.

Arrays are denoted using square brackets ([]). Here is an example of a variable with the value of an empty array:

let array = [];

When an array holds values, or elements, those values are separated by commas. Here is an array that holds two strings:

Example Code
let array = ["first", "second"];

You can access the values inside an array using the index of the value. An index is a number representing the position of the value in the array, starting from 0 for the first value.

You can access the value using bracket notation, such as array[0].

Arrays are special in that they are considered mutable. This means you can change the value at an index directly.

For example, this code would assign the number 25 to the second element in the array:

let array = [1, 2, 3];
array[1] = 25;
console.log(array); // prints [1, 25, 3]

You can make use of the .length property of an array - this returns the number of elements in the array. To get the last element of any array, you can use the following syntax:

array[array.length - 1]

array.length returns the number of elements in the array. By subtracting 1, you get the index of the last element in the array. 

A method in JavaScript is a function that's associated with certain values or objects. An example you've already encountered is the .log() method, which is part of the console object.

Arrays have their own methods, and the first you will explore is the .push() method. This allows you to "push" a value to the end of an array. Here is an example to add the number 12 to the end of an array:

array.push(12);

Another method essential for this project is the .pop() method. It removes the last element from an array and returns that element.

When a method returns a value, you can think of it as giving the value back to you, making it available for use in other parts of your code.

.push() returns the new length of the array, after adding the value you give it.

When you have to perform a task repeatedly until a condition is met, you will use a loop. There are many ways to write a loop.

You are going to start with a basic for loop. for loops use the following syntax:

for (iterator; condition; iteration) {
  logic;
}

The iterator is a variable you can declare specifically in your for loop to control how the loop iterates or goes through your logic.

It is a common convention to use i as your iterator variable in a loop. A for loop allows you to declare this in the parentheses (). For example, here is a for loop that declares an index variable and assigns it the value 100.

for (let index = 100; "second"; "third") {

}

The condition of a for loop tells the loop how many times it should iterate. When the condition becomes false, the loop will stop.

In JavaScript, a Boolean value can be either true or false. These are not strings - you will learn more about the difference later on.

Your iteration statement will tell your loop what to do with the iterator after each run.

When you reassign a variable, you can use the variable to reference the previous value before the reassignment. This allows you to do things like add three to an existing number. For example, bees = bees + 3; would increase the value of bees by three.

A for...of loop, which iterates over each item in an iterable object and temporarily assigns it to a variable.

The syntax for a for...of loop looks like:

for (const value of iterable) {

}

You will need to add a new line to each row. However, pressing the return key to insert a line break between quotes in JavaScript will result in a parsing error. Instead, you need to use the special escape sequence \n, which is interpreted as a new line when the string is logged. For example:

lineOne = lineOne + "\n" + lineTwo;

To achieve this, you will use the .repeat() method available to strings. This method accepts a number as an argument, specifying the number of times to repeat the target string. For example, using .repeat() to generate the string "Code! Code! Code!":

const activity = "Code! ";
activity.repeat(3);

A function is a block of code that can be reused throughout your application. Functions are declared with the following syntax:

function name(parameter) {

}

The function keyword tells JavaScript that the name variable is going to be a function. parameter is a variable that represents a value that is passed into the function when it is used. A function may have as many, or as few, parameters as you'd like.

In order to use a function, you need to call it. A function call tells your application to run the code from the function wherever you choose to call it. The syntax for a function call is the function name followed by parentheses. For example, this code defines and calls a test function.

function test() {

}
test();

All functions in JavaScript return a value, meaning they provide the defined result of calling them for you to use elsewhere.

By default, functions return undefined as their value.

In order to return something else, you need to use the return keyword. Here is an example of a function that returns the string "Functions are cool!":

Example Code
function demo() {
  return "Functions are cool!";
}

Hard-coding a value inside a function might not make it as reusable as you'd like.

Instead, you can define parameters for the function. Parameters are special variables that are given a value when you call the function, and can be used in your function to dynamically change the result of the function's code.

To add a parameter to your function, you need to add a variable name inside the parentheses. For example, this demo function has a name parameter:

function demo(name) {

}

A function does not have to return a hard-coded value. It can return the value stored in a variable. Parameters are special variables for a function, so they can also be returned.

When you pass a value to a function call, that value is referred to as an argument. Here is an example of calling a demo function and passing "Naomi" as the argument for the name parameter.

function demo(name) {
  return name;
}
demo("Naomi");

Variables in JavaScript are available in a specific scope. In other words, where a variable is declared determines where in your code it can be used.

The first scope is the global scope. Variables that are declared outside of any "block" like a function or for loop are in the global scope.

When a variable is in the global scope, a function can access it in its definition. Here is an example of a function using a global title variable:

const title = "Professor ";
function demo(name) {
  return title + name;
}
demo("Naomi")
This example would return "Professor Naomi".

Variables can also be declared inside a function. These variables are considered to be in the local scope, or block scope. A variable declared inside a function can only be used inside that function. If you try to access it outside of the function, you get a reference error.

Values returned out of a function are used by calling the function. You can use the function call directly as the value it returns, or capture the returned value in a variable. This way, you can use the value assigned to a locally scoped variable, outside the function it was created in.

function getName() {
  const name = "Camper cat";
  return name;
}

console.log(getName()); // "Camper cat"

const capturedReturnValue = getName();
console.log(capturedReturnValue); // "Camper cat"

console.log(name); // reference error

The values you provide to a function call are referred to as arguments, and you pass arguments to a function call. Here's a function call with "Hello" passed as an argument:

test("Hello");

You can pass full expressions as an argument. The function will receive the result of evaluating that expression. For example, these two function calls would yield the same result:

test(2 * 3 + 1);
test(7);

An if statement allows you to run a block of code only when a condition is met. They use the following syntax:

if (condition) {
  logic
}

A truthy value is a value that is considered true when evaluated as a boolean. Most of the values you encounter in JavaScript will be truthy.

A falsy value is the opposite - a value considered false when evaluated as a boolean. JavaScript has a defined list of falsy values. Some of them include false, 0, "", null, undefined, and NaN.

In addition to if statements, JavaScript also has else if statements. else if statements allow you to check multiple conditions in a single block of code.

Here is the syntax for an else if statement:

if (condition1) {
  // code to run if condition1 is true
} else if (condition2) {
  // code to run if condition2 is true
} else if (condition3) {
  // code to run if condition3 is true
} 
If the first condition is false, JavaScript will check the next condition in the chain. If the second condition is false, JavaScript will check the third condition, and so on.

Sometimes you will want to run different code when all of the if...else if conditions are false. You can do this by adding an else block.

An else block will only evaluate if the conditions in the if and else if blocks are not met.

Here the else block is added to the else if block.

if (condition) {
  // this code will run if condition is true
} else if (condition2) {
  // this code will run if the first condition is false
} else {
  // this code will run 
  // if the first and second conditions are false
}

A while loop will run over and over again until the condition specified is no longer true. It has the following syntax:

while (condition) {
  logic;
}

The equality operator can lead to some strange behavior in JavaScript. For example, "0" == 0 is true, even though one is a string and one is a number.

The strict equality operator === is used to check if two values are equal and share the same type. As a general rule, this is the equality operator you should always use. With the strict equality operator, "0" === 0 becomes false, because while they might have the same value of zero, they are not of the same type.

The strict inequality operator !== allows you to check if two values are not equal, or do not have the same type. The syntax is similar to the equality operator: value !== 4.

The .unshift() method of an array allows you to add a value to the beginning of the array, unlike .push() which adds the value at the end of the array. Here is an example:

const numbers = [1, 2, 3];
numbers.unshift(5);

Arrays also have a .shift() method. This will remove the first element of the array, unlike .pop() which removes the last element. Here is an example of the .shift() method:

const numbers = [1, 2, 3];
numbers.shift();

#javascript

Toolbar Module - Quill Rich Text Editor

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],
  ['link', 'image', 'video', 'formula'],


  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction


  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],


  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],


  ['clean']                                         // remove formatting button
];


const quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

#javascript

Toolbar Module - Quill Rich Text Editor

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],
  ['link', 'image', 'video', 'formula'],


  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction


  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],


  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],


  ['clean']                                         // remove formatting button
];


const quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

#javascript

Js_Form_Inputs

let allTextInputs = postForm[0].querySelectorAll('input:not([type="radio"]):not([type="checkbox"])');

let allRadioInputs = postForm[0].querySelectorAll('input:not([type="text"]):not([type="checkbox"])');

let allCheckBoxInputs = postForm[0].querySelectorAll('input:not([type="text"]):not([type="radio"])');

let allSelectTags = postForm[0].querySelectorAll('select[required]');

console.log(allTextInputs, allCheckBoxInputs, allRadioInputs, allSelectTags);

#javascript

:indeterminate | CSS-Tricks - CSS-Tricks

var checkbox = document.getElementById("some-checkbox");
checkbox.indeterminate = true;

#javascript

unique folder name + mysql + node

const express = require('express');
const app = express();

const bodyParser = require('body-parser');
app.use(bodyParser.json());
const cors = require('cors');

const dotenv = require('dotenv');
dotenv.config();

//! add db hear
const dbService = require('./utils/dbService');
const connection = require('./utils/dbService');
const multer = require('multer')
const moment = require("moment")
const fs = require('fs');
const path = require('path');



app.use(cors());

app.use(express.json());
app.use(express.urlencoded({ extended: false }));





// Import the routes from routes.js
const routes = require('./routes/userRoute');

// Use the imported routes in your app.js file
// app.use(routes);


// Add a prefix to all routes
app.use('/api/v1', routes);




app.post('/login', (req, res) => {
    const { ao_name, ao_status } = req.body;
    console.log('Received login data:', req.body);

    var sql = "INSERT INTO app_occasion ( ao_name, ao_status ) VALUES ?";
    var values = [[ao_name, ao_status]];

    connection.query(sql, [values], function (err, result) {
        if (err) throw err;
        console.log("Records inserted: " + result.affectedRows);
        // Show alert message
        res.status(200).json({ message: 'Login data received' });
    });
});


 // TODO testing

 app.use("/uploads", express.static("./uploads"))
// // Image storage config
// const imgconfig = multer.diskStorage({
//     destination: (req, file, callback) => {
//         callback(null, "./uploads");
//     },
//     filename: (req, file, callback) => {
//         const uniqueName = `image-${Date.now()}-${file.originalname}`;
//         callback(null, uniqueName);
//     }
// });
// // Image filter
// const isImage = (req, file, callback) => {
//     if (file.mimetype.startsWith("image")) {
//         callback(null, true);
//     } else {
//         callback(new Error("Only images are allowed"));
//     }
// };
// const upload = multer({
//     storage: imgconfig,
//     fileFilter: isImage
// });


// 


// Function to generate folder name from organization name


// checking if same name folder name is exist  
// fs.readdir(uploadsPath, (err, files) => {
//     if (err) {
//         console.error('Error reading directory:', err);
//     } else {
//         if (files.includes(newFolderName)) {
//             console.log('Found  folder in uploads directory');


//         } else {
//             console.log(' folder NOT found in uploads directory');
//         }
//     }
// });





// Helper function to create a folder name based on the organization name
const generateFolderName = (orgName, basePath) => {
    // Start with the first letter of each word
    const folderName = orgName
        .split(" ")
        .map((word) => word[0].toLowerCase())
        .join("");

    // Check if the folder already exists
    const existingFolders = fs.readdirSync(basePath);
    let uniqueFolderName = folderName;
    let folderSuffix = '';
    const words = orgName.split(" ");

    // If the folder exists and has more words, add the second word in parentheses
    if (existingFolders.includes(uniqueFolderName) && words.length > 1) {
        folderSuffix = `(${words[1].toLowerCase()})`;
        uniqueFolderName += folderSuffix;
    }

    // If it still exists, keep adding next words in parentheses until unique
    let index = 2; // Start with the third word if needed
    while (existingFolders.includes(uniqueFolderName) && index < words.length) {
        folderSuffix = `(${words[index].toLowerCase()})`;
        uniqueFolderName = folderName + folderSuffix;
        index++;
    }

    // If after all words, it's still not unique, append a number to make it unique
    let counter = 2;
    while (existingFolders.includes(uniqueFolderName)) {
        uniqueFolderName = `${folderName}${folderSuffix}(${counter})`;
        counter++;
    }

    return uniqueFolderName;
};

// multer disk storage configuration
const imgconfig = multer.diskStorage({
    destination: (req, file, callback) => {
        const { ar_org_name } = req.body;
        if (!ar_org_name) {
            return callback(new Error("Organization name not provided"), false);
        }

        const uploadsPath = path.join(__dirname, 'uploads');
        const newFolderName = generateFolderName(ar_org_name, uploadsPath);
        const newFolderPath = path.join(uploadsPath, newFolderName);
        
        // Create the new directory if it doesn't exist
        fs.mkdirSync(newFolderPath, { recursive: true });

        callback(null, newFolderPath);
    },
    filename: (req, file, callback) => {
        const uniqueName = `image-${Date.now()}-${file.originalname}`;
        callback(null, uniqueName);
    }
});
















// Image filter
const isImage = (req, file, callback) => {
    if (file.mimetype.startsWith("image")) {
        callback(null, true);
    } else {
        callback(new Error("Only images are allowed"), false);
    }
};



const upload = multer({
    storage: imgconfig,
    fileFilter: isImage
});








// Middleware
app.use(express.json());
app.use(cors());

// Handle form submission
app.post("/testing", upload.single("ar_org_logo"), (req, res) => {
    const {
        ar_org_name,
        ar_cp_signature,
        ar_contract_number,
        ar_emaill,
        ar_password,
        ar_conform_password,
        // ar_occecation_id
    } = req.body;

    // console.log("ar_org_name:", ar_org_name); 

// const newFolderName = ar_org_name;   //'newFolder'; // Replace with your logic to generate the folder name
// const uploadsPath = path.join(__dirname, 'uploads');
// const newFolderPath = path.join(uploadsPath, newFolderName);

// // Create the new directory
// fs.mkdirSync(newFolderPath, { recursive: true });

// console.log( "res.json({ message: 'Directory created successfully' });" );





    const { filename } = req.file;

    if (!ar_org_name || !ar_cp_signature || !ar_contract_number || !ar_emaill || !ar_password || !ar_conform_password  || !filename) {
        return res.status(422).json({ status: 422, message: "Fill all the details" });
    }

    try {
        const date = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");

        const userData = {
            ar_org_name,
            ar_cp_signature,
            ar_contract_number,
            ar_emaill,
            ar_password,
            ar_conform_password,
            // ar_occecation_id,
            ar_org_logo: filename,
            ar_creat_at: date,
            ar_status: 'pending'
        };
     

        connection.query("INSERT INTO app_cp_info SET ?", userData, (err, result) => {
            if (err) {
                console.error("Error inserting data", err);
                return res.status(500).json({ status: 500, message: "Database insertion error" });
            }
            console.log("Data added successfully");
            res.status(201).json({ status: 201, data: userData });
        });







       


    } catch (error) {
        console.error("Error in try block", error);
        res.status(500).json({ status: 500, message: "Internal server error" });
    }
});




// ! i want to show all data of app_registration 
app.get("/all-data-app_registration",(req,res)=>
{
    try {
        connection.query("SELECT * FROM app_registration",(err,result)=>{
            if(err){
                console.log(err)
            }else{
                console.log("get data successfully");
                res.status(201).json({ status: 201, data: result })
            }
        })
    } catch (error) {
        res.status(422).json({ status: 422, error })
    }
}
)



// Get all data (assuming this is for populating the select dropdown)
// app.get("/testing-get-data", (req, res) => {
//     conn.query("SELECT ao_id, ao_name FROM some_table", (err, results) => {
//         if (err) {
//             console.error("Error fetching data", err);
//             return res.status(500).json({ status: 500, message: "Database fetching error" });
//         }
//         res.status(200).json(results);
//     });
// });


// !
// // Multer storage configuration
// const storage = multer.diskStorage({
//     destination: function (req, file, cb) {
//         cb(null, './public/Images');
//     },
//     filename: function (req, file, cb) {
//         cb(null, `${Date.now()}_${file.originalname}`);
//     }
// });

// const upload = multer({ storage });

// app.post('/testing', upload.single('ar_org_logo'), (req, res) => {
//     const { ar_org_name, ar_cp_singhter, ar_contract_number, ar_emaill, ar_password, ar_conform_password, ar_occecation_id } = req.body;
//     const ar_org_logo = req.file.filename;

//     const sql = "INSERT INTO app_registration (ar_org_name, ar_org_logo, ar_cp_singhter, ar_contract_number, ar_emaill, ar_password, ar_conform_password, ar_occecation_id) VALUES (?, ?, ?, ?, ?, ?, ?, ?)";
//     const values = [ar_org_name, ar_org_logo, ar_cp_singhter, ar_contract_number, ar_emaill, ar_password, ar_conform_password, ar_occecation_id];

//     connection.query(sql, values, function (err, result) {
//         if (err) {
//             console.error('Error inserting into app_registration:', err);
//             return res.status(500).json({ message: 'Registration failed', error: err.message });
//         }
//         console.log("Registration record inserted: " + result.affectedRows);
//         res.status(200).json({ message: 'Successfully registered', ao_id: ar_occecation_id });
//     });
// });




                                                                                                                                                                                                                                


// !

// app.post('/testing', (req, res) => {
//     const { ar_org_name, ar_org_logo, ar_cp_singhter, ar_contract_number, ar_emaill, ar_password, ar_conform_password, ar_occecation_id } = req.body;

//     const sql = "INSERT INTO app_registration (ar_org_name, ar_org_logo, ar_cp_singhter, ar_contract_number, ar_emaill, ar_password, ar_conform_password, ar_occecation_id) VALUES ?";
//     const values = [[ar_org_name, ar_org_logo, ar_cp_singhter, ar_contract_number, ar_emaill, ar_password, ar_conform_password, ar_occecation_id]];

//     connection.query(sql, [values], function (err, result) {
//         if (err) {
//             console.error('Error inserting into app_registration:', err);
//             return res.status(500).json({ message: 'Registration failed not send ' });
//         }
//         console.log("Registration record inserted: " + result.affectedRows);
//         res.status(200).json({ message: 'Successfully send bireswar', ao_id: ar_occecation_id });
//     });
// });




app.get('/testing-get-data', (req, res) => {
    const query = 'SELECT * FROM app_occasion';
    connection.query(query, (err, results) => {
        if (err) {
            console.error(err.message);
            return res.status(500).send(err);
        }
        res.json(results);
    });
});



// // for file upload
// const storage = multer.diskStorage({
//     destination: function (req, file, cb) {
//         return cb(null, "./public/Images")
//     },
//     filename: function (req, file, cb) {
//         return cb(null, `${Date.now()}_${file.originalname}`)
//     }
// })

// const upload = multer({ storage })

// app.post('/upload', upload.single('file'), (req, res) => {
//     console.log(req.body)
//     console.log(req.file)
// })


// // app.post('/upload', upload.single('image'), (req, res) => {
// //     const image = req.file.filename;
// //     const sql = "UPDATE app_registration SET ar_org_logo = ?";
// //     db.query(sql, [image], (err, result) => {
// //         if (err) return res.json({ Message: "Error" });
// //         return res.json({ Status: "Success" });
// //     });
// // });


// // demo 002
// app.post('/upload', upload.single('image'), (req, res) => {
//     const image = req.file.filename;

//     const sql = "UPDATE users SET image = ? WHERE id = ?";  // Adjust the query as needed
//     const userId = 3;  // Replace with the actual user ID
//     const values = [image, userId];

//     db.query(sql, values, (err, result) => {
//         if (err) {
//             return res.json({ Message: "Error" });
//         }
//         return res.json({ Status: "Success" });
//     });
// });













// TODO testing



app.put('/update-application-status/:userId', async (req, res) => {
    const { userId } = req.params;
    const { application_status } = req.body;

    // Update logic for the database (example using a fictitious database function)
    // await database.updateApplicationStatus(userId, application_status);

    // var sql = "UPDATE  leave_from_rgpl SET application_status = 1 WHERE id = ?",[userId];
    connection.query('UPDATE leave_from_rgpl SET ? WHERE id = ?', [{ application_status: "1" }, userId]);


    // connection.query(sql, function (err, result) {
    //     if (err) throw err;
    //     console.log("Records updated: " + result.affectedRows);
    //     // Show alert message
    //     res.status(200).send('Login data received');
    //   });
    console.log("working")




});







app.put('/rejected/:userId', async (req, res) => {
    const { userId } = req.params;
    const { application_status } = req.body;

    // Update logic for the database (example using a fictitious database function)
    // await database.updateApplicationStatus(userId, application_status);

    // var sql = "UPDATE  leave_from_rgpl SET application_status = 1 WHERE id = ?",[userId];
    connection.query('UPDATE leave_from_rgpl SET ? WHERE id = ?', [{ application_status: "2" }, userId]);


    // connection.query(sql, function (err, result) {
    //     if (err) throw err;
    //     console.log("Records updated: " + result.affectedRows);
    //     // Show alert message
    //     res.status(200).send('Login data received');
    //   });
    console.log("working")




});











// app_super_section
// login_table_rgpl


// !  login from app_super_section
app.post('/aa', (req, res) => {
    const sql = "SELECT * FROM app_super_section WHERE email = ? AND password = ?";
    // const values = [
    //     req.body.email,
    //     req.body.password
    // ];

    connection.query(sql, [req.body.email, req.body.password], (err, data) => {
        if (err) return res.json("Login Failed");
        if (data.length > 0) {
            return res.json("Login Successful")

        } else {
            return res.json("INCORRECT EMAIL OR PASSWORD");
        }


    });
});









// var sql = "INSERT INTO leave_from_rgpl (name, college_name, class_coordinator_name, leave_date_from, leave_time_from, leave_date_up_to, leave_time_up_to, leave_type, reason_for_leave) VALUES ?";
// var values = [
//   [name, college_name, class_coordinator_name, `DATE_FORMAT('${leave_date_from}', '%Y-%m-%d`, // Format the date `TIME_FORMAT('${leave_time_from}', '%H:%i:%s.%f`, // Format the time `DATE_FORMAT('${leave_date_up_to}', '%Y-%m-%d`, // Format the date `TIME_FORMAT('${leave_time_up_to}', '%H:%i:%%f')`, // Format the time leave_type, reason_for_leave,
//   ],
// ];

// connection.query(sql, [values], function (err, result) {
//   if (err) throw err;
//   console.log("Records inserted: " + result.affectedRows);
//   // Show alert message
//   res.status(200).send('Login data received');
// });








// !my code
// app.post('/login', (req, res) => {
//     const { username, password } = req.body;

//     console.log('Received login data:');
//     // console.log('Username:', username);
//     // console.log('Password:', password);

//   var q = req.body.username;
//   var w = req.body.password;
// //   console.log(q,w);

// // module.exports =q;

//   // Export q and w variables




//   res.status(200).send('Login data received');


// });






// connection.connect((err) => {
//   if (err) {
//       console.log(err.message);
//   }
// //     //! this is i added for database state 
//   console.log('db ' + connection.state);
//   // console.log(q)
//   // console.log(msg);
// // });

// var sql = "INSERT INTO login (name,user_name,password) VALUES ?";

// // var { q, w } = require('./app');
// // console.log(q,w);

// var values =[[q,w,'123456']];

// connection.query(sql, [values], function (err, result) {
// if (err) throw err;
// console.log("records inserted: "+result.affectedRows);
// });

// });




// // Get all beers
// app.get('', (req, res) => {
//     pool.getConnection((err, connection) => {
//         if (err) throw err;
//         console.log(`connected as id ${connection.threadId}`);

//         connection.query('SELECT * from login', (err, rows) => {
//             connection.release(); // return the connection to the pool

//             if (err) {
//                 res.send(rows);
//             } else {
//                 console.log(err);
//             }
//         });
//     });
// });











app.get('/get-all-data', (req, res) => {
    const query = 'SELECT * FROM leave_from_rgpl';
    connection.query(query, (err, results) => {
        if (err) {
            console.error(err.message);
            return res.status(500).send(err);
        }
        res.json(results);
    });
});









app.put('/update-data/:id', (req, res) => {
    const { id } = req.params;
    const { newData } = req.body; // Replace `newData` with actual fields you want to update
    const query = 'UPDATE login SET ? WHERE id = ?'; // Replace with your table and field names

    connection.query(query, [newData, id], (err, results) => {
        if (err) {
            console.error(err.message);
            return res.status(500).send(err);
        }
        res.json({ success: true, message: 'Data updated successfully', results });
    });
});





// Endpoint to delete data
app.delete('/delete-data/:id', (req, res) => {
    const { id } = req.params;
    const query = 'DELETE FROM login WHERE id = ?';
    connection.query(query, [id], (err, results) => {
        if (err) {
            console.error(err.message);
            return res.status(500).send(err);
        }
        res.json({ success: true, message: 'Data deleted successfully', results });
    });
});






app.listen(process.env.PORT, () => console.log('app is running -->', process.env.PORT));


// module.exports = 'hello world';

#javascript

crud opperaction on my sql

const express = require('express');
const app = express();

const bodyParser = require('body-parser');
app.use(bodyParser.json());
const cors = require('cors');

const dotenv = require('dotenv');
dotenv.config();

//! add db hear
const dbService = require('./dbService');
const connection = require('./dbService');


app.use(cors());

app.use(express.json());
app.use(express.urlencoded({ extended : false }));


// //! create data-base connection
// app.post('/insert', (request, response) => {
//     const { name } = request.body;
//     const db = dbService.getDbServiceInstance();
    
//     const result = db.insertNewName(name);

//     result
//     .then(data => response.json({ data: data}))
//     .catch(err => console.log(err));
// });

// //! read data-base connection
// app.get('/getAll', (request, response) => {
//     const db = dbService.getDbServiceInstance();

//     const result = db.getAllData();
    
//     result
//     .then(data => response.json({data : data}))
//     .catch(err => console.log(err));
// })

// // update
// app.patch('/update', (request, response) => {
//     const { id, name } = request.body;
//     const db = dbService.getDbServiceInstance();

//     const result = db.updateNameById(id, name);
    
//     result
//     .then(data => response.json({success : data}))
//     .catch(err => console.log(err));
// });

// // delete
// app.delete('/delete/:id', (request, response) => {
//     const { id } = request.params;
//     const db = dbService.getDbServiceInstance();

//     const result = db.deleteRowById(id);
    
//     result
//     .then(data => response.json({success : data}))
//     .catch(err => console.log(err));
// });

// app.get('/search/:name', (request, response) => {
//     const { name } = request.params;
//     const db = dbService.getDbServiceInstance();

//     const result = db.searchByName(name);
    
//     result
//     .then(data => response.json({data : data}))
//     .catch(err => console.log(err));
// })





// const connection = require('./dbService');

// Now you can use the 'connection' variable in your app.js file
// For example, you can query the database using this connection
// connection.query('SELECT * FROM names;', (err, results) => {
//     if (err) {
//         console.error(err);
//         return;
//     }
//     console.log(results);
// });





app.post('/login', (req, res) => {
    const { ao_name, ao_status } = req.body;
    console.log('Received login data:', req.body);

    var sql = "INSERT INTO app_occasion ( ao_name, ao_status ) VALUES ?";
    var values = [[ao_name, ao_status]];

  connection.query(sql, [values], function (err, result) {
    if (err) throw err;
    console.log("Records inserted: " + result.affectedRows);
    // Show alert message
    res.status(200).send('Login data received');
  });
});








app.put('/update-application-status/:userId', async (req, res) => {
    const { userId } = req.params;
    const { application_status } = req.body;
  
        // Update logic for the database (example using a fictitious database function)
        // await database.updateApplicationStatus(userId, application_status);

// var sql = "UPDATE  leave_from_rgpl SET application_status = 1 WHERE id = ?",[userId];
connection.query('UPDATE leave_from_rgpl SET ? WHERE id = ?', [{ application_status: "1" }, userId]);


// connection.query(sql, function (err, result) {
//     if (err) throw err;
//     console.log("Records updated: " + result.affectedRows);
//     // Show alert message
//     res.status(200).send('Login data received');
//   });
        console.log("working")



       
});







app.put('/rejected/:userId', async (req, res) => {
    const { userId } = req.params;
    const { application_status } = req.body;
  
        // Update logic for the database (example using a fictitious database function)
        // await database.updateApplicationStatus(userId, application_status);

// var sql = "UPDATE  leave_from_rgpl SET application_status = 1 WHERE id = ?",[userId];
connection.query('UPDATE leave_from_rgpl SET ? WHERE id = ?', [{ application_status: "2" }, userId]);


// connection.query(sql, function (err, result) {
//     if (err) throw err;
//     console.log("Records updated: " + result.affectedRows);
//     // Show alert message
//     res.status(200).send('Login data received');
//   });
        console.log("working")



       
});











// app_super_section
// login_table_rgpl


// !  login from app_super_section
app.post('/aa', (req, res) => {
    const sql = "SELECT * FROM app_super_section WHERE email = ? AND password = ?";
    // const values = [
    //     req.body.email,
    //     req.body.password
    // ];
    
    connection.query(sql, [ req.body.email, req.body.password], (err, data) => {
        if (err) return res.json("Login Failed");
        if(data.length > 0){
            return res.json("Login Successful")
            
        }else {
            return res.json("INCORRECT EMAIL OR PASSWORD");
        }
       
        
    });
});









// var sql = "INSERT INTO leave_from_rgpl (name, college_name, class_coordinator_name, leave_date_from, leave_time_from, leave_date_up_to, leave_time_up_to, leave_type, reason_for_leave) VALUES ?";
// var values = [
//   [name, college_name, class_coordinator_name, `DATE_FORMAT('${leave_date_from}', '%Y-%m-%d`, // Format the date `TIME_FORMAT('${leave_time_from}', '%H:%i:%s.%f`, // Format the time `DATE_FORMAT('${leave_date_up_to}', '%Y-%m-%d`, // Format the date `TIME_FORMAT('${leave_time_up_to}', '%H:%i:%%f')`, // Format the time leave_type, reason_for_leave,
//   ],
// ];

// connection.query(sql, [values], function (err, result) {
//   if (err) throw err;
//   console.log("Records inserted: " + result.affectedRows);
//   // Show alert message
//   res.status(200).send('Login data received');
// });








// !my code
// app.post('/login', (req, res) => {
//     const { username, password } = req.body;

//     console.log('Received login data:');
//     // console.log('Username:', username);
//     // console.log('Password:', password);

//   var q = req.body.username;
//   var w = req.body.password;
// //   console.log(q,w);

// // module.exports =q;

//   // Export q and w variables




//   res.status(200).send('Login data received');


// });






// connection.connect((err) => {
//   if (err) {
//       console.log(err.message);
//   }
// //     //! this is i added for database state 
//   console.log('db ' + connection.state);
//   // console.log(q)
//   // console.log(msg);
// // });

// var sql = "INSERT INTO login (name,user_name,password) VALUES ?";

// // var { q, w } = require('./app');
// // console.log(q,w);

// var values =[[q,w,'123456']];

// connection.query(sql, [values], function (err, result) {
// if (err) throw err;
// console.log("records inserted: "+result.affectedRows);
// });

// });




// // Get all beers
// app.get('', (req, res) => {
//     pool.getConnection((err, connection) => {
//         if (err) throw err;
//         console.log(`connected as id ${connection.threadId}`);

//         connection.query('SELECT * from login', (err, rows) => {
//             connection.release(); // return the connection to the pool

//             if (err) {
//                 res.send(rows);
//             } else {
//                 console.log(err);
//             }
//         });
//     });
// });











app.get('/get-all-data', (req, res) => {
    const query = 'SELECT * FROM leave_from_rgpl'; 
    connection.query(query, (err, results) => {
        if (err) {
            console.error(err.message);
            return res.status(500).send(err);
        }
        res.json(results);
    });
});









app.put('/update-data/:id', (req, res) => {
    const { id } = req.params;
    const { newData } = req.body; // Replace `newData` with actual fields you want to update
    const query = 'UPDATE login SET ? WHERE id = ?'; // Replace with your table and field names

    connection.query(query, [newData, id], (err, results) => {
        if (err) {
            console.error(err.message);
            return res.status(500).send(err);
        }
        res.json({ success: true, message: 'Data updated successfully', results });
    });
});





// Endpoint to delete data
app.delete('/delete-data/:id', (req, res) => {
    const { id } = req.params;
    const query = 'DELETE FROM login WHERE id = ?';
    connection.query(query, [id], (err, results) => {
        if (err) {
            console.error(err.message);
            return res.status(500).send(err);
        }
        res.json({ success: true, message: 'Data deleted successfully', results });
    });
});






app.listen(process.env.PORT, () => console.log('app is running -->',process.env.PORT));


// module.exports = 'hello world';

#javascript

Multiple Dropdown Paling Fix

function onEdit(e) {
  if (!e) return;

  var sheet = e.source.getActiveSheet();
  var range = e.range;
  var editedValue = e.value;
  var previousValue = e.oldValue;

  // Define the start columns and start rows for each sheet
  var config = {
    "Pengajuan Konten": { columns: [5, 6, 19, 23, 28], startRow: 3 },
    "Timeline Wilayah": { columns: [8, 9], startRow: 2 },
    "Akun Media Partnership": { startColumn: 7, startRow: 5 }
    // Add more sheets and their configurations here
  };

  var sheetName = sheet.getName();
  if (!config[sheetName]) return; // Exit if the sheet is not configured

  var sheetConfig = config[sheetName];
  var startColumns = sheetConfig.columns || [sheetConfig.startColumn];
  var startRow = sheetConfig.startRow;

  if (startColumns.indexOf(range.getColumn()) !== -1 && range.getRow() >= startRow) {
    if (previousValue == null || previousValue === "") {
      range.setValue(editedValue);
    } else {
      var previousValues = previousValue.split(', ');

      var index = previousValues.indexOf(editedValue);

      if (index === -1) {
        previousValues.push(editedValue);
      } else {
        previousValues.splice(index, 1);
      }

      range.setValue(previousValues.join(', '));
    }
  }
}

#html #css #javascript

Odor - Vape Store WooCommerce HTML Template

https://gramentheme.com/html/odor/index.html?storefront

#javascript #nodejs

Excel file parsing to file generation

const XLSX = require("xlsx");
const fs = require("fs");
const path = require("path");

const filePath = "3Status.xlsx"; //File path of excel

const workbook = XLSX.readFile(filePath);
const worksheet = workbook.Sheets["Sheet0"];
const data = XLSX.utils.sheet_to_json(worksheet);
const folderPath = "test"; //File path of git TCs
const filePaths = [];

function getFilePaths(directory) {
  const items = fs.readdirSync(directory);
  for (const item of items) {
    const itemPath = path.join(directory, item);
    if (fs.statSync(itemPath).isDirectory()) {
      getFilePaths(itemPath);
    } else {
      filePaths.push(itemPath);
    }
  }
}
getFilePaths(folderPath);
function newProc(filePaths, keyword) {
  let flag1 = false;
  for (const singlePath of filePaths) {
    const fileContent = fs.readFileSync(singlePath, "utf-8");
    //console.log("fileContent is ", fileContent)
    if (fileContent.includes(keyword)) {
      flag1 = true;
      //console.log(`Keyword '${keyword}' found in file: ${singlePath}`);
    }
  }
  return flag1;
}
let notAutomated = [];
for (const i of data) {
  let flag = false;
  let check = newProc(filePaths, i["TestRail Id"]);
  //console.log("check is ", check)
  if (check == false) {
    notAutomated.push(i["TestRail Id"]);
    //console.log(`${i["TestRail Id"]} is not automated`)
  }
}
console.log(`notAutomated TCs are `, notAutomated);
console.log("No.of notAutomated are ", notAutomated.length);

//Storing the notAutomated ones in the excel file
const values = ["NonAutomatedTestRailIds", ...notAutomated];
const workbook1 = XLSX.utils.book_new();
const worksheet1 = XLSX.utils.aoa_to_sheet([]);
values.forEach((value, index) => {
  const cellAddress = XLSX.utils.encode_cell({ c: 0, r: index }); // column 0, row index
  worksheet1[cellAddress] = { v: value };
});
worksheet1["!ref"] = XLSX.utils.encode_range({
  s: { c: 0, r: 0 },
  e: { c: 0, r: values.length - 1 },
});
XLSX.utils.book_append_sheet(workbook1, worksheet1, "Sheet1");
XLSX.writeFile(workbook1, "NonAutomatedTestRailIdsFile.xlsx");

#javascript

ReactJS - Create an Event-Aware Component

import React from 'react';

class MessageWithEvent extends React.Component {
   constructor(props) {
      super(props);

      this.logEventToConsole = this.logEventToConsole.bind();
   }
   logEventToConsole(e) {
      console.log(e.target.innerHTML);
   }
   render() {
      return (
         <div onClick={this.logEventToConsole}>
            <p>Hello {this.props.name}!</p>
         </div>
      );
   }
}
export default MessageWithEvent;

#javascript #mochawesome #report

mocha.js - Detailed Reporting Cypress/Mochawesome - Stack Overflow

describe('DBM Smoketests', function() {
  it('E2E Hotel2 WorldPay System', function() {
    cy.visit('https://obmng.dbm.guestline.net/');
    cy.url().should('include','/obmng.dbm');

    Cypress.on('test:after:run', (test) => {
      addContext({ test }, { 
        title: 'This is my context title', 
        value: 'This is my context value'
      })
    });
  });
});

#javascript

javascript - auto refresh for every 5 mins

<meta http-equiv="Refresh" content="60">

#javascript

How to Create a REST API Without a Server

if ('serviceWorker' in navigator) {
  var scope = location.pathname.replace(/\/[^\/]+$/, '/')
  navigator.serviceWorker.register('sw.js', { scope })
    .then(function(reg) {
       reg.addEventListener('updatefound', function() {
         var installingWorker = reg.installing;
         console.log('A new service worker is being installed:',
                     installingWorker);
       });
       // registration worked
       console.log('Registration succeeded. Scope is ' + reg.scope);
    }).catch(function(error) {
      // registration failed
      console.log('Registration failed with ' + error);
    });
}

#javascript

Удали́ть аку́ты / Remove accents

javascript: (function () {
  const input = prompt("input", document.getSelection().toString());
  if (input) {
    const output = input.replace(/[\u0300\u0301]/g, "");
    window.alert(output);
    navigator.clipboard.writeText(output);
  }
})();

#javascript #svelte

Promesas

<script>
  async function harryPotterStudents() {
      const res = await fetch('https://hp-api.herokuapp.com/api/characters/students');
      const json = await res.json()

      if (res.ok) {
          return json
      } else {
          throw new Error(json)
      }
  }

  let promise = harryPotterStudents()
</script>

<h2>Estudiantes de la saga Harry Potter (promesas)</h2>
{#await promise}
  <p>Esperando resultados...</p>
{:then students}
  <p>Total estudiantes: {students.length}</p>
  {#each students as {name: alt, house, image: src}}
    {#if src}
      <h3>{alt} ({house})</h3>
      <img height="100" {src} {alt} />
    {/if}
  {/each}
{:catch error}
  <p style="color: red">{error.message}</p>
{/await}

#javascript

watermark utils

/*
 * @Author: allen_
 * @Date: 2024-05-22 10:45:18
 * @Email: zhangxudong_a@aspirecn.com
 * @LastEditors: allen_
 * @LastEditTime: 2024-05-23 15:43:17
 * @Description: 水印
 * @example:
 *   watermark.set(this.$refs.body, { text: '水印文字', gap: [50, 100], fontSize: 14, color: 'rgba(0, 0, 0, 0.35)'})
 */
import html2canvas from 'html2canvas'
const watermark = {}

/**
 * @description: 设置水印
 * @param {*} sourceBody 需要设置的元素
 * @param {*} text 水印文字
 * @param {array} gap 水印间距 [上下间距, 左右间距]
 * @param {*} fontSize 水印文字大小
 * @param {*} color 水印字体颜色
 * @param {*} zIndex 水印层级
 * @param {*} rotate 水印角度
 */
const setWatermark = (sourceBody, { text = 'watermark', gap = [100, 120], fontSize = 14, color = 'rgba(0, 0, 0, 0.25)', zIndex = 9999, rotate = -22, custom = null }) => {
  // @Explain: 生成随机元素 id
  const id = Math.random() * 10000 + '-' + Math.random() * 10000 + '/' + Math.random() * 10000

  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }
  let canvasData = null
  if (!custom) {
    const can = document.createElement('canvas')
    can.height = gap[0] // 水印上下间距
    can.width = gap[1] // 水印左右间距

    const cans = can.getContext('2d')
    cans.rotate((rotate * Math.PI) / 180)
    cans.font = fontSize + 'px Microsoft YaHei'
    cans.fillStyle = color
    cans.textAlign = 'left'
    cans.textBaseline = 'Middle'
    cans.fillText(text, can.width / 20, can.height / 3)
    canvasData = can.toDataURL('image/png', 1.0)
  } else {
    canvasData = custom
  }

  const water_div = document.createElement('div')
  water_div.id = id
  water_div.className = 'watermark-body'
  const styleStr = `
    background: url(${canvasData}) left top repeat;
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: ${zIndex};
    top: 0px;
    left: 0px;
  `
  water_div.setAttribute('style', styleStr)
  const partnerStyle = `
    ${sourceBody.getAttribute('style') || ''}
    position: relative;
    userSelect: none;
  `
  sourceBody.setAttribute('style', partnerStyle)
  sourceBody.appendChild(water_div)

  // 防止水印被删除
  const observer = new MutationObserver(() => {
    const wmInstance = document.getElementById(id)
    if ((wmInstance && wmInstance.getAttribute('style') !== styleStr) || !wmInstance) {
      // 如果标签在，只修改了属性，重新赋值属性
      if (wmInstance) {
        // 避免一直触发 -- 水印属性修改了
        wmInstance.setAttribute('style', styleStr)
      } else {
        // observer.disconnect()
        sourceBody.appendChild(water_div)
      }
    } else if (sourceBody.getAttribute('style') !== partnerStyle) {
      // @Explain: 判断父元素样式是否存在更改
      sourceBody.setAttribute('style', partnerStyle)
    }
  })
  observer.observe(sourceBody, {
    attributes: true,
    subtree: true,
    childList: true
  })

  return id
}

// @Explain: 为元素设置水印
watermark.set = (sourceBody, opi) => {
  const domArr = Array.from(document.getElementsByClassName('watermark-body'))
  for (let i = domArr.length; i--;) {
    const element = domArr[i]
    element.remove()
  }
  if ((!opi.text && !opi.custom) || !sourceBody) return null
  if (!(sourceBody instanceof HTMLElement)) {
    // @Condition: 判断传入的元素是否为dom元素 || VueComponent
    sourceBody = sourceBody.$el
  }
  const id = setWatermark(sourceBody, opi)
  return id
}
// @Explain: html2canvas 创建元素 base64
watermark.baseImg = (el, scale = window.devicePixelRatio < 3 ? window.devicePixelRatio : 2) => {
  return new Promise((resolve) => {
    html2canvas(el, {
      useCORS: true, // 【重要】开启跨域配置
      scale,
      allowTaint: true, // 允许跨域图片
      backgroundColor: null // 是否设置背景色透明
    }).then((canvas) => {
      const imgData = canvas.toDataURL('img/jpg', 1.0)
      resolve(imgData)
    })
  })
}
// @Explain: 创建水印方法
watermark.create = (text = 'watermark', callback = null, cache = true) => {
  if (callback && typeof callback === 'function') {
    // @Condition: 自定义水印元素创建方法
    return callback(text, watermark)
  }
  // @Explain: 判断缓存创建的水印元素是否存在
  if (watermark.cacheEl && cache) {
    watermark.cacheEl.querySelector('.watermark-user-info').innerText = text
    return watermark.cacheEl
  }
  const div = document.createElement('div')
  div.style = `
    width: 200px;
    height: 160px;
    display: flex;
    align-items: center;`
  const watermarkDiv = document.createElement('div')
  watermarkDiv.style = `
    width: 210px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    transform-origin: center;
    transform: rotate(-35deg);`
  const img = document.createElement('img')
  img.style = 'width: 201px;'
  // if you need image, edit here
  // img.src = require('@/assets/img/watermark.png')
  const userInfo = document.createElement('div')
  userInfo.className = 'watermark-user-info'
  userInfo.style = `
    font-size: 12px;
    color: rgba(38, 42, 48, 0.1);
    letter-spacing: 0;
    font-family: PingFangSC-Regular;`
  userInfo.innerText = text
  watermarkDiv.appendChild(img)
  watermarkDiv.appendChild(userInfo)
  div.appendChild(watermarkDiv)
  watermark.cacheEl = div // 缓存水印元素
  return div
}

export default watermark

#javascript

Largest Local Values in a Matrix

var largestLocal = function (grid) {
    let rowLen = grid.length, colLen = grid[0].length
    console.log(rowLen, colLen)
    let mainArr = []
    for (let init = 0; rowLen - init > 2; init++) {
        let childArr = []
        let tem = 0
        for (let col = tem; rowLen - col > 2; col++) {
            let container = []
            for (let sub = init; sub < 3; sub++) {
                let sumTemp = grid[sub].slice(col, 3);
                console.log("sumTemp at ", sub, " is ", sumTemp)
                container.push(...sumTemp)
                console.log("container at ", sub, " is ", container)
            }
            let max = Math.max(...container);
            console.log("max at ", col, " is ", max)
            childArr.push(max)
            console.log("childArr at ", col, " is ", childArr)

        }
        mainArr.push([...childArr])
    }
    return mainArr
};

#javascript

WebRTC Overview & Features

// Get user media
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    const localVideo = document.getElementById('localVideo');
    localVideo.srcObject = stream;

    const peerConnection = new RTCPeerConnection();
    stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));

    // Set up ICE handling
    peerConnection.onicecandidate = event => {
      if (event.candidate) {
        // Send the candidate to the remote peer
        sendToServer({ type: 'candidate', candidate: event.candidate });
      }
    };

    // When remote stream arrives
    peerConnection.ontrack = event => {
      const remoteVideo = document.getElementById('remoteVideo');
      remoteVideo.srcObject = event.streams[0];
    };

    // Create an offer to connect
    peerConnection.createOffer()
      .then(offer => peerConnection.setLocalDescription(offer))
      .then(() => {
        // Send the offer to the remote peer
        sendToServer({ type: 'offer', offer: peerConnection.localDescription });
      });

    // Handle offer from a remote peer
    receiveFromServer(message => {
      if (message.type === 'offer') {
        peerConnection.setRemoteDescription(new RTCSessionDescription(message.offer))
          .then(() => peerConnection.createAnswer())
          .then(answer => peerConnection.setLocalDescription(answer))
          .then(() => {
            // Send the answer to the remote peer
            sendToServer({ type: 'answer', answer: peerConnection.localDescription });
          });
      } else if (message.type === 'answer') {
        peerConnection.setRemoteDescription(new RTCSessionDescription(message.answer));
      } else if (message.type === 'candidate') {
        peerConnection.addIceCandidate(new RTCIceCandidate(message.candidate));
      }
    });
  })
  .catch(error => {
    console.error('Error accessing media devices.', error);
  });

function sendToServer(message) {
  // Implement server communication to exchange messages
}

function receiveFromServer(callback) {
  // Implement server communication to receive messages
}

#javascript

857. Minimum Cost to Hire K Workers

function combinations(arr, len) {
    let tempArry = []
    let final = []
    for (let i = 0; i < arr.length; i++) {
        //console.log("i ", i)
        if ((arr.length - i) == (len - 1)) {
            break
        }
        tempArry.push(arr[i])
        for (let j = i + 1; j < arr.length; j++) {
            //console.log("j ", j)
            tempArry.push(arr[j])
            //console.log("tempArry ", tempArry)
            if (tempArry.length == len) {
                //console.log("tempArry inside if ", tempArry)
                final.push([...tempArry])
                //console.log("final inside if ", final)
                tempArry.pop()
            }
        }
        tempArry = []
    }
    //console.log("final ", final)
    return final
}

function getPermutations(arr, outputLength) {
  const results = [];

  function permute(currentArr, remaining) {
    if (currentArr.length === outputLength) {
      results.push([...currentArr]); // Copy current arrangement to avoid mutation
      return;
    }

    for (let i = 0; i < remaining.length; i++) {
      const nextElement = remaining[i];
      const remainingCopy = [...remaining]; // Copy to avoid mutation
      remainingCopy.splice(i, 1);
      permute([...currentArr, nextElement], remainingCopy);
    }
  }

  permute([], arr);
  return results;
}

function processor(ind, finalQuality, mapWages, combOfWage) {
    let currentQua1 = finalQuality[ind]
    let currentWage1 = combOfWage[ind]
    //let currentWage1 = mapWages.get(finalQuality[ind])
    let after = Number(ind) + 1
    let afterQua = finalQuality[after]
    let afterWage1 = combOfWage[after]
    //let afterWage1 = mapWages.get(finalQuality[after])
    let g = afterQua / currentQua1
    combOfWage[after] = (g * currentWage1)
    //mapWages.set(afterQua, (g * currentWage1))
}
var mincostToHireWorkers = function (quality, wage, k) {
    let accumulate = 0
    let mapWages = new Map()
    for (const f in quality) {
        mapWages.set(quality[f], wage[f])
    }
    let resAccu = []
    console.log(mapWages)

    // let comb = combinations(quality, k)
    // console.log("comb ", comb)
    // let combOfWages = combinations(wage, k)
    // console.log("combOfWages ", combOfWages)

    let comb = getPermutations(quality, k)
    console.log("comb ", comb)
    let combOfWages = getPermutations(wage, k)
    console.log("combOfWages ", combOfWages)

    for (const g in comb) {
        let SortedQuality = comb[g]
        let combOfWage = combOfWages[g]
        console.log("SortedQuality is ", SortedQuality)
        let finalQuality = SortedQuality
        console.log("finalQuality is ", finalQuality)
        for (let i = finalQuality.length - 1; i >= 0; i--) {
            let prev = Number(i) - 1
            console.log("prev ", prev)
            let currentQua = finalQuality[i]
            console.log("currentQua ", currentQua)
            let currentWage = combOfWages[g][i]
            //let currentWage = mapWages.get(finalQuality[i])
            console.log("currentWage ", currentWage)
            if (i > 0) {
                let prevQua = finalQuality[prev]
                console.log("prevQua ", prevQua)
                let prevWage = combOfWages[g][prev]
                //let prevWage = mapWages.get(finalQuality[prev])
                console.log("prevWage ", prevWage)
                let ntha = currentQua / prevQua
                console.log("ntha ", ntha)
                let x = (currentWage * prevQua) / currentQua
                console.log("x ", x)
                if (x < prevWage) {
                    combOfWages[g][i] = (ntha * prevWage)
                    console.log("combOfWages[g][i] is ", combOfWages[g][i])
                    //mapWages.set(currentQua, (ntha * prevWage))
                    for (let k = i; k < finalQuality.length; k++) {
                        processor(k, finalQuality, mapWages,combOfWage )
                    }
                } else if (x > prevWage) {
                    accumulate = accumulate + currentWage
                    combOfWages[g][prev] = x
                    //mapWages.set(prevQua, x)
                } else if (x == prevWage) {
                    accumulate = accumulate + currentWage
                }
            } else {
                accumulate = accumulate + currentWage
            }
            console.log("accumulate ", accumulate)

        }
        accumulate = 0
        for (const l in finalQuality) {
            accumulate = accumulate + combOfWages[g][l]
            console.log("last finalQuality", finalQuality)
            console.log("last accumulate", accumulate)
            //accumulate = accumulate + mapWages.get(l)
        }
        resAccu.push(accumulate)
        console.log("resAccu is ", resAccu)
    }
    let finalResAccu = resAccu.sort((a, b) => a - b)
    return finalAcc = finalResAccu[0]
};

#javascript

857. Minimum Cost to Hire K Workers

function combinations(arr, len) {
    let tempArry = []
    let final = []
    for (let i = 0; i < arr.length; i++) {
        //console.log("i ", i)
        if ((arr.length - i) == (len - 1)) {
            break
        }
        tempArry.push(arr[i])
        for (let j = i + 1; j < arr.length; j++) {
            //console.log("j ", j)
            tempArry.push(arr[j])
            //console.log("tempArry ", tempArry)
            if (tempArry.length == len) {
                //console.log("tempArry inside if ", tempArry)
                final.push([...tempArry])
                //console.log("final inside if ", final)
                tempArry.pop()
            }
        }
        tempArry = []
    }
    //console.log("final ", final)
    return final
}

function getPermutations(arr, outputLength) {
  const results = [];

  function permute(currentArr, remaining) {
    if (currentArr.length === outputLength) {
      results.push([...currentArr]); // Copy current arrangement to avoid mutation
      return;
    }

    for (let i = 0; i < remaining.length; i++) {
      const nextElement = remaining[i];
      const remainingCopy = [...remaining]; // Copy to avoid mutation
      remainingCopy.splice(i, 1);
      permute([...currentArr, nextElement], remainingCopy);
    }
  }

  permute([], arr);
  return results;
}

function processor(ind, finalQuality, mapWages, combOfWage) {
    let currentQua1 = finalQuality[ind]
    let currentWage1 = combOfWage[ind]
    //let currentWage1 = mapWages.get(finalQuality[ind])
    let after = Number(ind) + 1
    let afterQua = finalQuality[after]
    let afterWage1 = combOfWage[after]
    //let afterWage1 = mapWages.get(finalQuality[after])
    let g = afterQua / currentQua1
    combOfWage[after] = (g * currentWage1)
    //mapWages.set(afterQua, (g * currentWage1))
}
var mincostToHireWorkers = function (quality, wage, k) {
    let accumulate = 0
    let mapWages = new Map()
    for (const f in quality) {
        mapWages.set(quality[f], wage[f])
    }
    let resAccu = []
    console.log(mapWages)

    // let comb = combinations(quality, k)
    // console.log("comb ", comb)
    // let combOfWages = combinations(wage, k)
    // console.log("combOfWages ", combOfWages)

    let comb = getPermutations(quality, k)
    console.log("comb ", comb)
    let combOfWages = getPermutations(wage, k)
    console.log("combOfWages ", combOfWages)

    for (const g in comb) {
        let SortedQuality = comb[g]
        let combOfWage = combOfWages[g]
        console.log("SortedQuality is ", SortedQuality)
        let finalQuality = SortedQuality
        console.log("finalQuality is ", finalQuality)
        for (let i = finalQuality.length - 1; i >= 0; i--) {
            let prev = Number(i) - 1
            console.log("prev ", prev)
            let currentQua = finalQuality[i]
            console.log("currentQua ", currentQua)
            let currentWage = combOfWages[g][i]
            //let currentWage = mapWages.get(finalQuality[i])
            console.log("currentWage ", currentWage)
            if (i > 0) {
                let prevQua = finalQuality[prev]
                console.log("prevQua ", prevQua)
                let prevWage = combOfWages[g][prev]
                //let prevWage = mapWages.get(finalQuality[prev])
                console.log("prevWage ", prevWage)
                let ntha = currentQua / prevQua
                console.log("ntha ", ntha)
                let x = (currentWage * prevQua) / currentQua
                console.log("x ", x)
                if (x < prevWage) {
                    combOfWages[g][i] = (ntha * prevWage)
                    console.log("combOfWages[g][i] is ", combOfWages[g][i])
                    //mapWages.set(currentQua, (ntha * prevWage))
                    for (let k = i; k < finalQuality.length; k++) {
                        processor(k, finalQuality, mapWages,combOfWage )
                    }
                } else if (x > prevWage) {
                    accumulate = accumulate + currentWage
                    combOfWages[g][prev] = x
                    //mapWages.set(prevQua, x)
                } else if (x == prevWage) {
                    accumulate = accumulate + currentWage
                }
            } else {
                accumulate = accumulate + currentWage
            }
            console.log("accumulate ", accumulate)

        }
        accumulate = 0
        for (const l in finalQuality) {
            accumulate = accumulate + combOfWages[g][l]
            console.log("last finalQuality", finalQuality)
            console.log("last accumulate", accumulate)
            //accumulate = accumulate + mapWages.get(l)
        }
        resAccu.push(accumulate)
        console.log("resAccu is ", resAccu)
    }
    let finalResAccu = resAccu.sort((a, b) => a - b)
    return finalAcc = finalResAccu[0]
};

#javascript

857. Minimum Cost to Hire K Workers

function combinations(arr, len) {
    let tempArry = []
    let final = []
    for (let i = 0; i < arr.length; i++) {
        //console.log("i ", i)
        if ((arr.length - i) == (len - 1)) {
            break
        }
        tempArry.push(arr[i])
        for (let j = i + 1; j < arr.length; j++) {
            //console.log("j ", j)
            tempArry.push(arr[j])
            //console.log("tempArry ", tempArry)
            if (tempArry.length == len) {
                //console.log("tempArry inside if ", tempArry)
                final.push([...tempArry])
                //console.log("final inside if ", final)
                tempArry.pop()
            }
        }
        tempArry = []
    }
    //console.log("final ", final)
    return final
}

function getPermutations(arr, outputLength) {
  const results = [];

  function permute(currentArr, remaining) {
    if (currentArr.length === outputLength) {
      results.push([...currentArr]); // Copy current arrangement to avoid mutation
      return;
    }

    for (let i = 0; i < remaining.length; i++) {
      const nextElement = remaining[i];
      const remainingCopy = [...remaining]; // Copy to avoid mutation
      remainingCopy.splice(i, 1);
      permute([...currentArr, nextElement], remainingCopy);
    }
  }

  permute([], arr);
  return results;
}

function processor(ind, finalQuality, mapWages, combOfWage) {
    let currentQua1 = finalQuality[ind]
    let currentWage1 = combOfWage[ind]
    //let currentWage1 = mapWages.get(finalQuality[ind])
    let after = Number(ind) + 1
    let afterQua = finalQuality[after]
    let afterWage1 = combOfWage[after]
    //let afterWage1 = mapWages.get(finalQuality[after])
    let g = afterQua / currentQua1
    combOfWage[after] = (g * currentWage1)
    //mapWages.set(afterQua, (g * currentWage1))
}
var mincostToHireWorkers = function (quality, wage, k) {
    let accumulate = 0
    let mapWages = new Map()
    for (const f in quality) {
        mapWages.set(quality[f], wage[f])
    }
    let resAccu = []
    console.log(mapWages)

    // let comb = combinations(quality, k)
    // console.log("comb ", comb)
    // let combOfWages = combinations(wage, k)
    // console.log("combOfWages ", combOfWages)

    let comb = getPermutations(quality, k)
    console.log("comb ", comb)
    let combOfWages = getPermutations(wage, k)
    console.log("combOfWages ", combOfWages)

    for (const g in comb) {
        let SortedQuality = comb[g]
        let combOfWage = combOfWages[g]
        console.log("SortedQuality is ", SortedQuality)
        let finalQuality = SortedQuality
        console.log("finalQuality is ", finalQuality)
        for (let i = finalQuality.length - 1; i >= 0; i--) {
            let prev = Number(i) - 1
            console.log("prev ", prev)
            let currentQua = finalQuality[i]
            console.log("currentQua ", currentQua)
            let currentWage = combOfWages[g][i]
            //let currentWage = mapWages.get(finalQuality[i])
            console.log("currentWage ", currentWage)
            if (i > 0) {
                let prevQua = finalQuality[prev]
                console.log("prevQua ", prevQua)
                let prevWage = combOfWages[g][prev]
                //let prevWage = mapWages.get(finalQuality[prev])
                console.log("prevWage ", prevWage)
                let ntha = currentQua / prevQua
                console.log("ntha ", ntha)
                let x = (currentWage * prevQua) / currentQua
                console.log("x ", x)
                if (x < prevWage) {
                    combOfWages[g][i] = (ntha * prevWage)
                    console.log("combOfWages[g][i] is ", combOfWages[g][i])
                    //mapWages.set(currentQua, (ntha * prevWage))
                    for (let k = i; k < finalQuality.length; k++) {
                        processor(k, finalQuality, mapWages,combOfWage )
                    }
                } else if (x > prevWage) {
                    accumulate = accumulate + currentWage
                    combOfWages[g][prev] = x
                    //mapWages.set(prevQua, x)
                } else if (x == prevWage) {
                    accumulate = accumulate + currentWage
                }
            } else {
                accumulate = accumulate + currentWage
            }
            console.log("accumulate ", accumulate)

        }
        accumulate = 0
        for (const l in finalQuality) {
            accumulate = accumulate + combOfWages[g][l]
            console.log("last finalQuality", finalQuality)
            console.log("last accumulate", accumulate)
            //accumulate = accumulate + mapWages.get(l)
        }
        resAccu.push(accumulate)
        console.log("resAccu is ", resAccu)
    }
    let finalResAccu = resAccu.sort((a, b) => a - b)
    return finalAcc = finalResAccu[0]
};

#javascript

JS - Toggle table detail rows

$('button.toggle-detail-row').click(function(){
		   
  let rowId = $(this).attr('id');
  console.log(rowId);

  if ($('tr.table-row-details[id="' + rowId + '"]').is(':visible')) {
		   		
    console.log('Case 1');
    $('tr.table-row-details[id="' + rowId + '"]').slideUp("slow");
    $(this).children("i.toggle-button").removeClass("fa fa-minus").addClass("fa fa-plus");
  }
  else {

    console.log('Case 3 : ' + rowId);
    $('tr.table-row-details').hide();
    $("i.toggle-button").removeClass("fa fa-minus").addClass("fa fa-plus");

    $('tr.table-row-details[id="' + rowId + '"]').slideDown("slow");
    $(this).children("i.toggle-button").removeClass("fa fa-plus").addClass("fa fa-minus");
  }
});

#javascript

gives the combination

function combinations(arr, len) {
    let tempArry = []
    let final = []
    for (let i = 0; i < arr.length; i++) {
        console.log("i ", i)
        if ((arr.length - i) == (len - 1)) {
            break
        }
        tempArry.push(arr[i])
        for (let j = i + 1; j < arr.length; j++) {
            console.log("j ", j)
            tempArry.push(arr[j])
            console.log("tempArry ", tempArry)
            if (tempArry.length == len) {
                console.log("tempArry inside if ", tempArry)
                final.push([...tempArry])
                console.log("final inside if ", final)
                tempArry.pop()
            }
        }
        tempArry = []
    }
    console.log("final ", final)
    return final
}
combinations([1, 2, 3, 4, 5], 3)

#javascript #array

Esto hace flatt a arrays

function flatten(array) {
  var l = array.length;
  while (l--) {
    if (Array.isArray(array[l])) {
      flatten(array[l]);
      array.splice(l, 1, ...array[l]);
    }
  }
}


var array = [['1', '2', '3'], ['4', '5', ['6'], ['7', '8']]];

flatten(array);

console.log(array);

#javascript #css #html

โปรแกรมคำนวณโซล่าออนไลน์

https://www.electronmove.com/%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%81%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B8%84%E0%B8%B3%E0%B8%99%E0%B8%A7%E0%B8%93%E0%B9%82%E0%B8%8B%E0%B8%A5%E0%B9%88%E0%B8%B2%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/63b78844ffdbd000133c89e4

#html #css #javascript

C# Action Delegate example

public delegate void Print(int val);

static void ConsolePrint(int i)
{
    Console.WriteLine(i);
}

static void Main(string[] args)
{           
    Print prnt = ConsolePrint;
    prnt(10);
}

#javascript

javascript - chrome.runtime.onMessage response with async await - Stack Overflow

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  (async () => {
    // async code goes here
    // ...
    const result = await getSomething();
    sendResponse(result);
  })();

  // Important! Return true to indicate you want to send a response asynchronously
  return true;
});

#javascript

custom postcode input

<input type="text" id="postcodeInput" placeholder="Enter your postcode" maxlength="6" required>
  
document.getElementById("postcodeInput").addEventListener("input", function(event) {
    this.value = this.value.replace(/[^0-9]/g, '');
});

#javascript

Js when change variable on single product

var $= jQuery; $(document).on('found_variation', 'form.cart', function(event, variation) {
	//update price in custom box
    if (variation.price_html) {
      $('.custom-price-box .elementor-widget-container').html(variation.price_html);
    }
});

#javascript

valid parenthesis

function testBrackets(input) {
    let bracketsObj = {
        '{':'}',
        '[':']',
        '(': ')'
    }
    let bracketKeys = Object.keys(bracketsObj)
    
    const stack = []
    for(str of input){
        if (bracketKeys.includes(str)){
            stack.push(str)
        } else if (bracketsObj[stack.pop()] !== str){
            return false
        }
    }
    
    return stack.length == 0
}

#javascript

Hide Input Fields Before Taking A Screenshot | Cypress examples (v13.8.1)

// change the account input element to "type=password" to hide the value
cy.get('#account-id').invoke('attr', 'type', 'password')
// now take the screenshot
cy.get('#account').screenshot('account', {
  overwrite: true,
})

#javascript #promise

Download file from fetch()

const url ='http://sample.example.file.doc'
const authHeader ="Bearer 6Q************" 

const options = {
  headers: {
    Authorization: authHeader
  }
};
 fetch(url, options)
  .then( res => res.blob() )
  .then( blob => {
    var file = window.URL.createObjectURL(blob);
    window.location.assign(file);
  });

#javascript #clipboard #ux

This Google Script will delete everything in your Gmail account. It removes email messages, filters, labels and reset all your settings.

/**
 * 
 * 
 * This Google Script will delete everything in your Gmail account.
 * It removes email messages, filters, labels and reset all your settings
 * 
 * Written by Amit Agarwal (amit@labnol.org)
 

         88                                                           
         88                                                           
         88                                                           
 ,adPPYb,88 ,adPPYYba, 8b,dPPYba,   ,adPPYb,d8  ,adPPYba, 8b,dPPYba,  
a8"    `Y88 ""     `Y8 88P'   `"8a a8"    `Y88 a8P_____88 88P'   "Y8  
8b       88 ,adPPPPP88 88       88 8b       88 8PP""""""" 88          
"8a,   ,d88 88,    ,88 88       88 "8a,   ,d88 "8b,   ,aa 88          
 `"8bbdP"Y8 `"8bbdP"Y8 88       88  `"YbbdP"Y8  `"Ybbd8"' 88          
                                    aa,    ,88                        
                                     "Y8bbdP"                         
 
 
 * Proceed with great caution since the process is irreversible
 * 
 * This software comes with ABSOLUTELY NO WARRANTY. 
 * This is free software, and you are welcome to modify and redistribute it 
 *
 * This permission notice shall be included in all copies of the Software.
 *
 *
 */


/**
 * Remove all labels in Gmail
 */
const deleteGmailLabels_ = ()  => {
  GmailApp.getUserLabels().forEach((label) => {
    label.deleteLabel();
  });
};

/**
 * Remove all Gmail Filters
 */
const deleteGmailFilters_ = ()  => {
  const { filter: gmailFilters } = Gmail.Users.Settings.Filters.list('me');
  gmailFilters.forEach(({ id }) => {
    Gmail.Users.Settings.Filters.remove('me', id);
  });
};

/**
 * Remove all Gmail Draft messages
 */
const deleteGmailDrafts_ = ()  => {
  GmailApp.getDrafts().forEach((draft) => {
    draft.deleteDraft();
  });
};

/**
 * Reset Gmail Settings
 */
const resetGmailSettings_ = ()  => {
  // Disable Out-of-office
  Gmail.Users.Settings.updateVacation({ enableAutoReply: false }, 'me');

  // Delete Gmail Signatures
  const { sendAs } = Gmail.Users.Settings.SendAs.list('me');
  sendAs.forEach(({ sendAsEmail }) => {
    Gmail.Users.Settings.SendAs.update({ signature: '' }, 'me', sendAsEmail);
  });

  // Disable IMAP
  Gmail.Users.Settings.updateImap({ enabled: false }, 'me');

  // Disable POP
  Gmail.Users.Settings.updatePop({ accessWindow: 'disabled' }, 'me');

  // Disable Auto Forwarding
  const { forwardingAddresses } = Gmail.Users.Settings.ForwardingAddresses.list('me');
  forwardingAddresses.forEach(({ forwardingEmail }) => {
    Gmail.Users.Settings.ForwardingAddresses.remove('me', forwardingEmail);
  });
};

const startTime = Date.now();
const isTimeLeft_ = ()  => {
  const ONE_SECOND = 1000;
  const MAX_EXECUTION_TIME = ONE_SECOND * 60 * 5;
  return MAX_EXECUTION_TIME > Date.now() - startTime;
};

/**
 * Move all Gmail threads to trash folder
 */
const deleteGmailThreads_ = ()  => {
  let threads = [];
  do {
    threads = GmailApp.search('in:all', 0, 100);
    if (threads.length > 0) {
      GmailApp.moveThreadsToTrash(threads);
      Utilities.sleep(1000);
    }
  } while (threads.length && isTimeLeft_());
};

/**
 * Move all Spam email messages to the Gmail Recyle bin
 */
const deleteSpamEmails_ = ()  => {
  let threads = [];
  do {
    threads = GmailApp.getSpamThreads(0, 10);
    if (threads.length > 0) {
      GmailApp.moveThreadsToTrash(threads);
      Utilities.sleep(1000);
    }
  } while (threads.length && isTimeLeft_());
};

/**
 * Permanetly empty the Trash folder
 */
const emptyGmailTrash_ = ()  => {
  let threads = [];
  do {
    threads = GmailApp.getTrashThreads(0, 100);
    threads.forEach((thread) => {
      Gmail.Users.Threads.remove('me', thread.getId());
    });
  } while (threads.length && isTimeLeft_());
};

/**
 * Factory Reset your Gmail Account
 * Replace NO with YES and run this function
 * */
const factoryResetGmail = ()  => {
  const FACTORY_RESET = 'NO';
  if (FACTORY_RESET === 'YES') {
    resetGmailSettings_();
    deleteGmailLabels_();
    deleteGmailFilters_();
    deleteGmailDrafts_();
    deleteGmailThreads_();
    deleteSpamEmails_();
    emptyGmailTrash_();
  }
};

#javascript

node.js - Node / Express: EADDRINUSE, Address already in use - how can I stop the process using the port? - Stack Overflow

sudo lsof -i :3000

#javascript

node.js - Node / Express: EADDRINUSE, Address already in use - how can I stop the process using the port? - Stack Overflow

kill -9 <PID>

#javascript

node.js - Node / Express: EADDRINUSE, Address already in use - how can I stop the process using the port? - Stack Overflow

sudo lsof -i :3000

#javascript

5 ways to make HTTP requests in Node.js - LogRocket Blog

const http = require("http");

const html = `
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="/submit-form" enctype="application/x-www-form-urlencoded" method="POST">
      <label> Enter Name: 
        <input type="text" autocomplete="name" name="name" required />
      </label>
      <input type="submit" />
    </form>
  </body>
</html>
`;
const server = http.createServer((req, res) => {
  switch (req.method) {
    case "GET":
      if (req.url === "/") {
        res.writeHead(200, { "Content-Type": "text/html" });
        res.end(html);
      } else {
        res.writeHead(404, { "Content-Type": "text/plain" });
        res.end("Page not found");
      }
      break;
    case "POST":
      if (req.url === "/submit-form") {
        let body = "";
        req.on("data", (data) => {
          body += data;
        });

        req.on("end", () => {
          console.log("Request body:  " + body);
          // Parse, validate, and sanitize
          res.writeHead(200, { "Content-Type": "application/json" });
          res.end(JSON.stringify({ body }));
        });
      } else {
        res.writeHead(404, { "Content-Type": "text/plain" });
        res.end("Page not found");
      }
      break;
    default:
      res.writeHead(405, { "Content-Type": "text/plain" });
      res.end("Method not supported");
  }
});

const PORT = process.env.PORT || 3000;

server.listen(PORT, () => {
  console.log(`Your app is listening on PORT ${PORT}`);
});

#javascript

p5.js Web Editor | nnn

https://editor.p5js.org/alkhasawneh/sketches/prtzYQ93-

#javascript

【 eKYC国内シェアNo.1 】本人確認なら LIQUID eKYC - 株式会社Liquid（リキッド）

<!DOCTYPE html>
<html lang="ja">
 <head>
    <script async src="https://xxxxx/liquidekyc.js"></script>
    <title>申込フォーム</title>
  </head>
  <body>
    <h1>新規申込</h1>
    <form id="applicant-form">
      <div>
        <label for="last_name">姓</label>
        <input type="text" id="last_name" name="last_name" />
      </div>
      <div>
        <label for="first_name">名</label>
        <input type="text" id="first_name" name="first_name" />
      </div>
      ・・・
    </form>
    <script>
     ・・・
      function handleSubmit(e) {
       ・・・
        const data = new FormData(applicantForm);
        const params = JSON.stringify(Object.fromEntries(data));
        LIQUIDEKYC.startKYC(params)
       ・・・
      }
    </script>
  </body>
</html>

#apex #oracleapex #plsql #javascript

Rodar script no SQL developer

@"C:\temp4\database\01_plano_execucao_GFF-261.sql";

#javascript

check img srcset

function checkImagesSource() {
    const images = document.querySelectorAll('img');
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;

    console.log(`Viewport dimensions: ${viewportWidth} x ${viewportHeight}`);
    console.log('Images displayed and their sources:');

    images.forEach((img, index) => {
        const rect = img.getBoundingClientRect();
        // Check if the image is within the viewport
        if (rect.top < viewportHeight && rect.bottom >= 0 && rect.left < viewportWidth && rect.right >= 0) {
            const isSrcset = img.hasAttribute('srcset');
            const sourceUsed = img.currentSrc || img.src;  // This will get the image URL after srcset and sizes have been applied by the browser

            if (isSrcset) {
                console.log(`${img.tagName.toLowerCase()} srcset - ${sourceUsed}`);
            } else {
                console.log(`${img.tagName.toLowerCase()} - ${sourceUsed}`);
            }
        }
    });
}

checkImagesSource();

#javascript #splice #slice #findindex

splice explanation

// remove element at certain index without changing original
let arr = [0,1,2,3,4,5]
let newArr = [...arr]
newArr.splice(1,1)//remove 1 element from index 1
console.log(arr) // [0,1,2,3,4,5]
console.log(newArr)// [0,2,3,4,5]


// splice() method changes the original array. 
// slice() method doesn't change the original array.

eg //


const comments = [
      { text: 'Love this!', id: 523423 },
      { text: 'Super good', id: 823423 },
      { text: 'You are the best', id: 2039842 },
      { text: 'Ramen is my fav food ever', id: 123523 },
      { text: 'Nice Nice Nice!', id: 542328 }
    ];



// Array.prototype.findIndex()
// Find the comment with this ID
   const commentIndex = comments.findIndex((item) => item.id === 823423)
    // delete the comment with the ID of 823423
    const commentsCopy = [...comments];
    commentsCopy.splice(1, commentIndex) //remove 1 element from index 1
    console.log(commentsCopy)


// or we can use slice from the start to the value and from the value to the end
const newComments = [
  ...comments.slice(1, commentIndex)
  ...comments.slice(commentIndex++)
]

#html #css #javascript

Minecraft Block Path Finder

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minecraft Block Path Finder</title>
  <style>
      .minecraft-block-path-finder-main {
    background: none;
    display: block;
    padding: 0px 0px 0px 0px;
    font: bold 17px/30px Arial, Helvetica, sans-serif;
    min-width: 260px;
    margin: 50px auto 0px auto;
    border: none;
  }

  .minecraft-block-path-finder-main:after {
    content: "";
    clear: both;
  }

  .noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .minecraft-block-path-finder-card {
    padding: 1rem 2rem 1rem 2rem;
    height: 70px;
  }

  .minecraft-block-path-finder-cards {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-gap: 0 1rem;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  }

  .minecraft-block-path-finder-card00 {
    padding: 1rem 2rem 1rem 2rem;
    height: 70px;
  }

  
  
  .minecraft-block-path-finder-cards00 {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-gap: 0 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .minecraft-block-path-finder-blocks {
    background: #24aded;
    background: -webkit-linear-gradient(to right, #24aded, #108dc7);
    background: linear-gradient(to right, #24aded, #108dc7);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    display: block;
    padding: 10px 10px 10px 10px;
    margin: 10px 0px;
    border: none;
    text-align: center;
    min-height: 50px;
  }

  .minecraft-block-path-finder-click-blocks {
    background: none;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    display: block;
    padding: 10px 10px 10px 10px;
    margin: 10px 0px;
    border-width: 2px;
    border-style: solid;
    border-color: #108dc7;
    text-align: center;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 250px;
    color: #108dc7;
    position: relative !important;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .minecraft-block-path-finder-click-blocks::-webkit-scrollbar {
    display: none;
  }

  .minecraft-block-path-finder-click-blocks:hover {
    background: #24aded;
    color: white;
    text-shadow: 0px 0px 8px rgb(255, 230, 186), 0px 0px 22px rgb(255, 255, 255),
      0px -1px 0px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }

  .minecraft-block-path-finder-cmnd-button {
    transition: color 0.15s ease-in;
    font-size: 35px;
    text-align: center;
    text-decoration: none;
    line-height: 50px;
    color: white;
    cursor: pointer;
  }

  .minecraft-block-path-finder-reset-button:hover {
    color: #8d8c85;
    transition: color 0.3s ease-in;
    transition: color 0.3s ease-out;
  }

  .stepper_select {
    display: none;
  }
  
  .tool-input input[type="number"] {
    width: calc(100% - 2px); 
    height: 25px;
    border: none;
    border-radius: 0;
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.05);
    background: #24aded;
    background: -webkit-linear-gradient(to right, #24aded, #108dc7);
    background: linear-gradient(to right, #24aded, #108dc7);
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    line-height: 25px;
    outline: none;
}
  
.tool-input input[type="number"]::placeholder {
    color: #E6E6E6;
}


.tool-input input[type="number"]:focus {
    outline: none;
}

  .stepper-input {
    width: 100%;
    height: 25px;
    border: 0px;
    border-radius: 2px;
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin: 0px 0px 5px 0px;
  }

  .stepper-input input {
    display: none;
  }

  .stepper-input .input {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .stepper-input .input :active {
    background: #24aded;
  }

  .stepper-input .input .range {
    overflow: hidden;
    text-align: center;
    flex: 1;
  }

  .stepper-input .input .range .list span {
    display: block;
    width: 100%;
    height: 25px;
    color: #ffffff;
    font-size: 18px;
    line-height: 25px;
  }

  .stepper_btn {
    background: #24aded;
    background: -webkit-linear-gradient(to right, #24aded, #108dc7);
    background: linear-gradient(to right, #24aded, #108dc7);
    height: 100%;
    border-radius: 2px;
    color: #ffffff;
    font-size: 12px;
    line-height: 25px;
    cursor: pointer;
    border: none;
    transition: all 300ms ease-in-out;
    flex: 0.2;
    text-align: center;
  }

  .stepper_btn:active {
    transform: translateY(1px);
  }

  .disabledivclick {
    pointer-events: none;
  }

  .table-fixed {
    width: 100%;
    caption-side: bottom;
  }

  .table-fixed tbody {
    display: block;
    height: 100%;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .table-fixed tbody::-webkit-scrollbar {
    display: none;
  }

  .table-fixed thead,
  .table-fixed tbody tr {
    display: table;
    width: 100%;
  }

  .table-fixed td,
  th {
    text-align: center;
    vertical-align: middle;
    width: 33%;
  }

  .table-fixed caption {
    margin-top: 20px;
  }

  .divparenttable {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #startlocations::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px; 
    background-color: #108dc7; 
    z-index: 1;
    margin: -20px 0;
}
  #startlocations::after {
    content: "Start Location";
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #24aded;
    padding: 0 10px; 
    z-index: 2;
    margin: -20px 0;
}
  #endlocations::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px; 
    background-color: #108dc7; 
    z-index: 1;
    margin: -20px 0;
}
  #endlocations::after {
    content: "End Location";
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #24aded;
    padding: 0 10px; 
    z-index: 2;
    margin: -20px 0;
}
	#startlocations,
#endlocations {
  position: relative;
}
  </style>
</head>
<body>
  <div class="minecraft-block-path-finder-main noselect">
    <div style="margin-top:30px; margin-bottom:10px;">
     
      <div id="startlocations" class="minecraft-block-path-finder-cards00">
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
            <div class="tool-input">
              <input id="startX" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
          </div>
          <div style="margin-top:-5px; color : white;">X-Coordinate</div>
        </div>
  
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="startY" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Y-Coordinate</div>
        </div>
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="startZ" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Z-Coordinate</div>
        </div>
      </div>
      <div id="endlocations" class="minecraft-block-path-finder-cards00" style="margin: 50px 0px 0px 0px;">
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
            <div class="tool-input">
              <input id="endX" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
          </div>
          <div style="margin-top:-5px; color : white;">X-Coordinate</div>
        </div>
  
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="endY" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Y-Coordinate</div>
        </div>
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="endZ" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Z-Coordinate</div>
        </div>
      </div>
      <div class="minecraft-block-path-finder-cards00">
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="spacing" type="number" oninput="CalcUpdateOutput()" placeholder="enter value (set to 1 for solid walls/ramps)">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Block Spacing</div>
        </div>
      </div>
    </div>
    <div id="calc-console" oncontextmenu="return false;" class="divparenttable minecraft-block-path-finder-click-blocks ">
    </div>
  </div>
  <script src="script.js">
  	    let startX = parseInt(document.getElementById("startX").value);
        let startY = parseInt(document.getElementById("startY").value);
        let startZ = parseInt(document.getElementById("startZ").value);
        let endX = parseInt(document.getElementById("endX").value);
        let endY = parseInt(document.getElementById("endY").value);
        let endZ = parseInt(document.getElementById("endZ").value);
        let spacing = parseInt(document.getElementById("spacing").value);

  let debounceTimer;

function debounce(func, delay) {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(func, delay);
}

function CalcUpdateOutput() {
    debounce(() => {
        let startX = parseInt(document.getElementById("startX").value);
        let startY = parseInt(document.getElementById("startY").value);
        let startZ = parseInt(document.getElementById("startZ").value);
        let endX = parseInt(document.getElementById("endX").value);
        let endY = parseInt(document.getElementById("endY").value);
        let endZ = parseInt(document.getElementById("endZ").value);
        let spacing = parseInt(document.getElementById("spacing").value);

        let calcConsole = document.getElementById("calc-console");
        let blockPositions = '';
        let hasMessage = false;

        if (isNaN(startX) || isNaN(startY) || isNaN(startZ) || isNaN(endX) || isNaN(endY) || isNaN(endZ) || isNaN(spacing)) {
            blockPositions = "Please enter all coordinates and spacing.";
            hasMessage = true;
        } else if (spacing < 1) {
            blockPositions = "Block spacing must be at least 1.";
            hasMessage = true;
        } else {
            let dx = Math.abs(endX - startX);
            let dy = Math.abs(endY - startY);
            let dz = Math.abs(endZ - startZ);
            let maxLength = Math.max(dx, dy, dz);
            let currentStep = 0;

            function calculateNextBlock() {
                if (currentStep <= maxLength) {
                    let x = Math.round(startX + currentStep * (endX - startX) / maxLength);
                    let y = Math.round(startY + currentStep * (endY - startY) / maxLength);
                    let z = Math.round(startZ + currentStep * (endZ - startZ) / maxLength);
                    blockPositions += `#${currentStep / spacing + 1}: ${x}, ${y}, ${z}<br>`;
                    calcConsole.innerHTML = blockPositions;
                    currentStep += spacing;
                    setTimeout(calculateNextBlock, 0);
                }
            }

            calculateNextBlock();
        }

        if (hasMessage) {
            calcConsole.innerHTML = blockPositions;
            calcConsole.classList.add("divparenttable");
        } else {
            calcConsole.classList.remove("divparenttable");
        }
    }, 300);
}

document.addEventListener("DOMContentLoaded", function(event) { CalcUpdateOutput(); });        
  </script>
</body>
</html>

#javascript #reduce #counting

counting items using reduce

const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogostick'];

    const transportation = data.reduce((total, item) => {

      if(!total[item]){
        total[item] = 0
      }

      total[item]++
      
      return total

    },{})

    console.log(transportation)


/** Dynamic property access (using []):
The square bracket [] syntax is commonly used to access properties of objects dynamically (i.e., using a variable as the property name). This allows you to compute property names at runtime.*/

#javascript #sorting

sorting in reverse

 const people = [
      'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd', 'Beckett, Samuel', 'Blake, William', 'Berger, Ric', 'Beddoes, Mick', 'Beethoven, Ludwig',
      'Belloc, Hilaire', 'Begin, Menachem', 'Bellow, Saul', 'Benchley, Robert', 'Blair, Robert', 'Benenson, Peter', 'Benjamin, Walter', 'Berlin, Irving',
      'Benn, Tony', 'Benson, Leana', 'Bent, Silas', 'Berle, Milton', 'Berry, Halle', 'Biko, Steve', 'Beck, Glenn', 'Bergman, Ingmar', 'Black, Elk', 'Berio, Luciano',
      'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose',
      'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank'
    ];




 let sortedPeople = [];

   for(person of people){
   const name = person.split(',').reverse().join(' ').trim();
   sortedPeople.push(name)
   }

   console.log(sortedPeople)

#javascript #transitionend

remove transition with propertyName

function removeTransition(e){
  const keys = [...document.querySelectorAll('.key')];
  keys.forEach((key) => key.addEventListener('transitionend', function(e){
    // console.log(e.propertyName)
    e.propertyName === 'transform' ? key.classList.remove('playing') : null;
  }))
}

// use the load listener
window.addEventListener('load', removeTransition)

#javascript #ternary

simple ternary

// if something is true then execute the code on the left, otherwise return null
e.propertyName === 'transform' ? key.classList.remove('playing') : null;

#javascript

mouse listener

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function () {
    var link = document.getElementById('exit-intent-popup-trigger');


    function handleClick(e) {
      e.preventDefault();
    }


    link.addEventListener('click', handleClick);


    function triggerClick() {
      link.click();
      sessionStorage.setItem('eventTriggered', 'true');
    }

    // בדיקה האם המכשיר הוא נייד
    var isMobile = /Mobi|Android/i.test(navigator.userAgent);

    if (isMobile) {

      if (sessionStorage.getItem('eventTriggered') !== 'true') {
        setTimeout(triggerClick, 8000); 
      }
    } else {

      document.addEventListener('mousemove', function(e) {
        if (sessionStorage.getItem('eventTriggered') !== 'true') {
 
          if (e.clientY < 45) {
            triggerClick();
            document.removeEventListener('mousemove', arguments.callee);
            sessionStorage.setItem('eventTriggered', 'true');  
          }
        }
      });
    }
  });
</script>

#javascript

to hear certain parts of a song in utube

const videoPlayers = document.getElementsByClassName('video-stream html5-main-video');
var videoPlayerss = videoPlayers[0]
var startTimes = 30
var endTimes = 68
var startTimes2 = 90
var endTimes2 = 150
var startTimes3 = 185
var endTimes3 = 270
videoPlayerss.currentTime = startTimes;
videoPlayerss.play();
videoPlayerss.addEventListener('timeupdate', () => {
  if (videoPlayerss.currentTime > endTimes && videoPlayerss.currentTime < startTimes2 ) {
    videoPlayerss.currentTime = startTimes2;
  } else if (videoPlayerss.currentTime > endTimes2 && videoPlayerss.currentTime < startTimes3 ) {
    videoPlayerss.currentTime = startTimes3;
  } else if (videoPlayerss.currentTime > endTimes3) {
    videoPlayerss.currentTime = startTimes;
  } 
});

#javascript

Makes any Udemy course done

var elementss2 = document.getElementsByClassName("ud-real-toggle-input");
//console.log(elementss2)
for (var i = 0; i < elementss2.length; i++) {
  if (!elementss2[i].hasAttribute("checked")) {
    console.log(elementss2[i]);
      elementss2[i].disabled = false;
      elementss2[i].click()
  }
}

#javascript

Folds LP tiles

var elementss2 = document.getElementsByClassName("contents");
//console.log(elementss2)
for (var i = 0; i < elementss2.length; i++) {
 elementss2[i].style = "display: none;";  
}

#javascript #jquery

header js

import $ from 'jquery';

class Header {
	constructor(element) {
		this.$element = $(element);
		this.$burger = this.$element.find('.header__burger');
		this.$Nav = this.$element.find('.nav-main');
		this.$hasSub = this.$element.find('.menu-item-has-children');
		this.$menuArrow = this.$element.find('.dropdown-arv-cont');
		this.$menuBg = this.$element.find('.header__menu-bg');
		this.init();
	}

	// headerPadding() {
	// 	if (!this.$element.hasClass('header--transperant')) {
	// 		let hHeight = this.$element.height();
	// 		$('.main-wrapper').css({ 'padding-top': hHeight });
	// 	}
	// }

	init() {
		// $(document).ready(() => {
		// 	this.headerPadding();
		// });

		$(window).on('resize load', () => {
			this.$element.addClass('loaded');
		});

		$(window).on('scroll', () => {
			if ($(window).scrollTop() > 100) {
				$('.header').addClass('sticky');
			} else {
				$('.header').removeClass('sticky');
			}
		});

		$(document).on(
			'click',
			'.menu-item-has-children .dropdown-arv-cont',
			function () {
				$(this).closest('li').toggleClass('active');
			},
		);

		this.$burger.on('click', (e) => {
			e.preventDefault();
			if ($(e.currentTarget).hasClass('opened')) {
				$(e.currentTarget).removeClass('opened').attr('aria-expanded', 'false');
				this.$Nav.slideUp(300).parent().removeClass('active');
				$('.menu-item-has-children .dropdown-arv-cont').removeClass('active');
				$('body').css('overflow-y', 'visible');
				$('.dropdown-arv-cont')
					.closest('li')
					.children('.sub-menu')
					.removeClass('active');
			} else {
				$(e.currentTarget).addClass('opened').attr('aria-expanded', 'true');
				this.$Nav.slideDown(300).parent().toggleClass('active');
				$('body').css('overflow-y', 'hidden');
			}
		});

		this.$menuBg.on('click', (e) => {
			e.preventDefault();
			this.$burger.removeClass('opened').attr('aria-expanded', 'false');
			this.$Nav.slideUp(300).parent().removeClass('active');
		});

		$(document).on('click', '.dropdown-arv-cont', function (e) {
			e.preventDefault();
			if ($(this).hasClass('active')) {
				$(this).removeClass('active');
				$(this).closest('li').children('.sub-menu').removeClass('active');
			} else {
				$(this).addClass('active');
				$(this).closest('li').children('.sub-menu').addClass('active');
			}
		});
	}
}

$('[data-header]').each((index, element) => new Header(element));

#javascript #jquery

owl-carousel doul slider js

var contentSlider = $('.blog-slider__cont');
		var imageSlider = $('.blog-slider__slider');

		contentSlider.owlCarousel({
			items: 1,
			loop: true,
			dots: false,
			nav: false,
			mouseDrag: false,
			touchDrag: false,
		});

		imageSlider.owlCarousel({
			loop: true,
			dots: true,
			nav: false,
			items: 1,
			margin: 30,
			responsive: {
				320: {
					items: 1,
				},
				576: {
					items: 2,
				},
			},
		});

		imageSlider.on('changed.owl.carousel', function (event) {
			var currentIndex = event.relatedTarget.relative(event.item.index);
			contentSlider.trigger('to.owl.carousel', [currentIndex]);
		});

#javascript

How to Build a Snake Game with React, Redux, and Redux Saga

//Without payload
export const moveRight = () => ({
	type: MOVE_RIGHT
});

//With payload
export const moveRight = (data: string) => ({
	type: MOVE_RIGHT,
	payload: data
});

#javascript

How to Build a Snake Game with React, Redux, and Redux Saga

function* performAction() {
    yield put({
        type: COPY_DATA,
        payload: "Hello"
    });
}

#javascript

javascript - Tailwindcss not working with next.js; what is wrong with the configuration? - Stack Overflow

// postcss.config.js
const { join } = require('path');

module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
};

#javascript

XMLDocument2

var xmlResponse = '<?xml version="1.0" encoding="UTF-8"?> <data code="0" name="piece-shipment-list" request-id="f1fc982b-fd81-4b63-92ae-eb60d1dd9262"> <data airway-bill-number="" delivery-event-flag="1" dest-country="DE" division="DPEED" domestic-id="" error-status="0" event-country="DE" event-location="" ice="DLVRD" identifier-type="2" international-flag="0" leitcode="" matchcode="" name="piece-shipment" order-preferred-delivery-day="false" origin-country="DE" pan-recipient-address="Heinrich-Brüning-Str. 7 53113 Bonn" pan-recipient-city="53113 Bonn" pan-recipient-name="Deutsche Post DHL" pan-recipient-postalcode="53113" pan-recipient-street="Heinrich-Brüning-Str. 7" piece-code="00340434161094022115" piece-customer-reference="" piece-id="8e464a3e-219a-459b-823b-07d9d92732e3" piece-identifier="340434161094022115" product-code="00" product-key="" product-name="DHL PAKET (parcel)" pslz-nr="5066934803" recipient-city="53113 Bonn" recipient-id="5" recipient-id-text="different person present" recipient-name="Kraemer" recipient-street="Heinrich-Brüning-Str. 7" ric="OTHER" routing-code-ean="" ruecksendung="false" searched-piece-code="00340434161094022115" searched-ref-no="" shipment-code="" shipment-customer-reference="" shipment-height="0.0" shipment-length="0.0" shipment-weight="0.0" shipment-width="0.0" shipper-address="" shipper-city="" shipper-name="No sender data has been transferred to DHL." shipper-street="" short-status="Delivery successful" standard-event-code="ZU" status="The shipment has been successfully delivered" status-liste="0" status-timestamp="18.03.2016 10:02" upu=""> <data _build-time="2017-01-14 19:56:42.000775" leitcode="5311304400700" name="piece-event-list" order-preferred-delivery-day="false" piece-id="8e464a3e-219a-459b-823b-07d9d92732e3" piece-identifier="340434161094022115" pslz-nr="5066934803" routing-code-ean="" ruecksendung="false"> <data event-country="Germany" event-location="Bremen" event-short-status="Posting at PACKSTATION" event-status="The shipment has been posted by the sender at the PACKSTATION" event-text="The shipment has been posted by the sender at the PACKSTATION" event-timestamp="17.03.2016 11:43" ice="SHRCU" name="piece-event" ric="PCKST" ruecksendung="false" standard-event-code="ES" /> <data event-country="Germany" event-location="Bremen" event-short-status="Transportation to parcel center of origin" event-status="The shipment has been taken from the PACKSTATION for onward transportation" event-text="The shipment has been taken from the PACKSTATION for onward transportation" event-timestamp="17.03.2016 13:53" ice="LDTMV" name="piece-event" ric="MVMTV" ruecksendung="false" standard-event-code="AA" /> <data event-country="Germany" event-location="" event-short-status="Pick-up successful" event-status="The shipment has been picked up" event-text="The shipment has been picked up" event-timestamp="17.03.2016 13:55" ice="PCKDU" name="piece-event" ric="PUBCR" ruecksendung="false" standard-event-code="AE" /> <data event-country="Germany" event-location="Bremen" event-short-status="Parcel center of origin" event-status="The shipment has been processed in the parcel center of origin" event-text="The shipment has been processed in the parcel center of origin" event-timestamp="17.03.2016 15:49" ice="LDTMV" name="piece-event" ric="MVMTV" ruecksendung="false" standard-event-code="AA" /> <data event-country="Germany" event-location="Neuwied" event-short-status="Destination parcel center" event-status="The shipment has been processed in the destination parcel center" event-text="The shipment has been processed in the destination parcel center" event-timestamp="18.03.2016 03:35" ice="ULFMV" name="piece-event" ric="UNLDD" ruecksendung="false" standard-event-code="EE" /> <data event-country="" event-location="" event-short-status="In delivery" event-status="The shipment has been loaded onto the delivery vehicle" event-text="The shipment has been loaded onto the delivery vehicle" event-timestamp="18.03.2016 09:00" ice="SRTED" name="piece-event" ric="NRQRD" ruecksendung="false" standard-event-code="PO" /> <data event-country="Germany" event-location="Bonn" event-short-status="Delivery successful" event-status="The shipment has been successfully delivered" event-text="The shipment has been successfully delivered" event-timestamp="18.03.2016 10:02" ice="DLVRD" name="piece-event" ric="OTHER" ruecksendung="false" standard-event-code="ZU" /> </data> </data> </data>';

// Parse the XML response
var parser = new XMLDocument2();
parser.parseXML(xmlResponse);

// Get the value of the "short-status" attribute from the <data> element
var shortStatus = parser.getNode('/data/data').getAttribute('short-status');;

// Print the value of the "short-status" attribute
gs.info("Short Status: " + shortStatus);

#javascript #string

Find occurence/frequency of characters in string

const str = 'abcab';

const freq = (str) => 
    str.split('').reduce((obj, char) => {
        obj[char] = (obj[char] || 0) + 1;
        return obj;
    }, {})

console.log(freq('zCu3zezCaX'));

#javascript #clipboard #ux

Get time and distance from map route.

function getDirection() {

  

  // DECLARE SHEET

  var ss = SpreadsheetApp.getActiveSpreadsheet();

  var mapSheet = ss.getSheetByName("MAP");

  

  var start = mapSheet.getRange('B1').getValue();

  var end = mapSheet.getRange('B2').getValue();

  

  var directions = Maps.newDirectionFinder()

    .setOrigin(start)

    .setDestination(end)

    .setMode(Maps.DirectionFinder.Mode.DRIVING)

    .getDirections();

  

  //Logger.log(directions.routes[0].legs[0].duration.text);

 

  //CLEAR QUESTION AND ANSWER

  mapSheet.getRange('A6:D500').clear();

  

  //NEXT ROW ON MAP SHEET

  var nextRow = mapSheet.getLastRow() + 1;

 

  for (var i = 0; i < directions.routes[0].legs.length; i++) 

  {

    var endAddress = directions.routes[0].legs[i].end_address;

    var startAddress = directions.routes[0].legs[i].start_address;

    var distance = directions.routes[0].legs[i].distance.text;

    var duration = directions.routes[0].legs[i].duration.text;

    

    mapSheet.getRange(nextRow,1).setValue(startAddress);

    mapSheet.getRange(nextRow,2).setValue(endAddress);

    mapSheet.getRange(nextRow,3).setValue(distance);

    mapSheet.getRange(nextRow,4).setValue(duration);

    

    nextRow++;

 

  }

}

#bootstrap #javascript #toggle

Dark/Light Mode Toggle - JavaScript | thiscodeWorks

/*!
 * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
 */
 
(() => {
  'use strict';
 
  const storedTheme = localStorage.getItem('theme');
 
  const getPreferredTheme = () => {
    if (storedTheme) {
      return storedTheme;
    }
 
    return window.matchMedia('(prefers-color-scheme: dark)').matches
      ? 'dark'
      : 'light';
  };
 
  const setTheme = function (theme) {
    if (
      theme === 'auto' &&
      window.matchMedia('(prefers-color-scheme: dark)').matches
    ) {
      document.documentElement.setAttribute('data-bs-theme', 'dark');
    } else {
      document.documentElement.setAttribute('data-bs-theme', theme);
    }
  };
 
  setTheme(getPreferredTheme());
 
  const showActiveTheme = (theme, focus = false) => {
    const themeSwitcher = document.querySelector('#bd-theme');
 
    if (!themeSwitcher) {
      return;
    }
 
    const themeSwitcherText = document.querySelector('#bd-theme-text');
    const activeThemeIcon = document.querySelector('.theme-icon-active use');
    const btnToActive = document.querySelector(
      `[data-bs-theme-value="${theme}"]`
    );
    const svgOfActiveBtn = btnToActive
      .querySelector('svg use')
      .getAttribute('href');
 
    document.querySelectorAll('[data-bs-theme-value]').forEach((element) => {
      element.classList.remove('active');
      element.setAttribute('aria-pressed', 'false');
    });
 
    btnToActive.classList.add('active');
    btnToActive.setAttribute('aria-pressed', 'true');
    activeThemeIcon.setAttribute('href', svgOfActiveBtn);
    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel);
 
    if (focus) {
      themeSwitcher.focus();
    }
  };
 
  window
    .matchMedia('(prefers-color-scheme: dark)')
    .addEventListener('change', () => {
      if (storedTheme !== 'light' || storedTheme !== 'dark') {
        setTheme(getPreferredTheme());
      }
    });
 
  window.addEventListener('DOMContentLoaded', () => {
    showActiveTheme(getPreferredTheme());
 
    document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
      toggle.addEventListener('click', () => {
        const theme = toggle.getAttribute('data-bs-theme-value');
        localStorage.setItem('theme', theme);
        setTheme(theme);
        showActiveTheme(theme, true);
      });
    });
  });
})();

#api's #javascript

Dynamic Copyright Footer | thiscodeWorks

<p>Copyright &copy; <script>document.write(new Date().getFullYear())</script> Your Name All Rights Reserved</p>

#javascript #c# #html

not work

@page
@model WebUI.Pages.Shared.ServitörVyModel

@{
    var swedishTimeZone = TimeZoneInfo.FindSystemTimeZoneById("Central European Standard Time");
    var nowSwedishTime = TimeZoneInfo.ConvertTimeFromUtc(DateTime.UtcNow, swedishTimeZone);
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Välj Bord</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/StyleFoodMenu.css" asp-append-version="true">

    <style>
        .table-button {
            width: 100%;
            margin-bottom: 20px;
            height: 60px;
        }

        .iframe-container {
            width: 100%;
            border: none;
            height: 400px;
        }
    </style>
</head>

<div class="container" style="display:flex; flex-direction:column;" >

    <button class="btn btn-warning" id="offcanvasbutton" style=" color:black;" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

    <div id="accordion">
        <div class="card">
            
                    <button class="btn btn-warning" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Välj bord
                    </button>
             
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="card-body">
                    Välj bord

                    <select id="tableSelect" class="form-control">
                        @foreach (var table in Model.TablesProp)
                        {
                            <option value="@table.Number">@table.Number</option>
                        }
                    </select>

                    <button class="btn btn-success" id="confirmButton">Bekräfta </button>
                </div>
            </div>
        </div>
        <div class="card">

            <button class="btn btn-warning collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Beställning
            </button>

            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                <div class="card-body">
                    <button class="btn btn-success" id="orderButton">Ny Beställning </button>
                </div>
            </div>
        </div>
        <div class="card">
           
                    <button class="btn btn-warning collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Välj maträtt
                    </button>
                
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                <div class="card-body">
                    <div class="row special-list">
                        @if (Model.Foods != null)
                        {
                            foreach (var food in Model.Foods)
                            {
                                if ((food.PublishDate == null || food.PublishDate <= nowSwedishTime) &&
                                (food.RemoveDate == null || food.RemoveDate > nowSwedishTime))
                                {
                                    <div class="col-lg-4 col-md-6 special-grid menu-card" data-food-id="@food.Id"
                                         data-food-title="@food.Title" data-food-description="@food.Description"
                                         data-food-price="@food.Price" data-food-category="@food.Category"
                                         data-food-ingredients="@food.Ingredients">
                                        <div class="gallery-single fix">
                                            @if (!string.IsNullOrEmpty(food.ImagePath))
                                            {
                                                <img src="@Url.Content($"~/{food.ImagePath}")" class="img-fluid" alt="Bild av @food.Title">
                                            }
                                            <div class="why-text">
                                                @if (User.IsInRole("Admin") || User.IsInRole("Owner"))
                                                {
                                                    <div class="options-menu" style="display:none;">
                                                    </div>
                                                }
                                                <h4>@food.Title</h4>

                                                <button class="button btn-success add-to-cart" id="addtocart" data-food-id="@food.Id">Lägg till</button>
                                                <h5>@food.Price kr</h5>
                                            </div>
                                        </div>
                                    </div>
                                }
                            }
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<title>Offcanvas Button Example</title>
<!-- Include Bootstrap CSS -->

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body small" id="ordersContainer">
        
    </div>

    

</div>

<button class="btn-btn btn-success" id="confirmorder"> Bekräfta beställning </button>

<!-- Include Bootstrap JavaScript (popper.js and bootstrap.js are also required) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    document.getElementById('confirmButton').addEventListener('click', function () {
        // Get the selected table number
        var selectedTableNumber = document.getElementById('tableSelect').value;

        // Do something with the selected table number
        console.log('Selected table number:', selectedTableNumber);

        // You can perform further actions here, such as sending the selected table number to the server
        // using AJAX or submitting a form.
    });

    let orderId;
    let guest;
    let waiter;
    let date;
    let receit
    let status
    let table;


         //POST Order
        document.getElementById('orderButton').addEventListener('click', function () {
            // Prepare the order data

        const currentDate = new Date();
            const orderData = {
             table:document.getElementById('tableSelect').value
            };
            
            // Send the order data to the server using Fetch API
            fetch('/api/Order/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(orderData)
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    // Handle the response data if needed
                    console.log('Order created successfully:', data);
                    console.log('Order Id: ', data.id)
                    console.log('Order Guest: ', data.guest)
                    console.log('Order Table: ', data.table )
                    console.log('Order WaiterId: ', data.waiterId)
                    console.log('Order Date: ', data.date)
                    console.log('Order ReceitId: ', data.receitId)
                    console.log('Order Status: ', data.status)

                    date = order.date;
                    orderId = data.id;
                    guest = data.guest;
                    table = data.table;
                    waiter = data.waiterId;
                    receit = data.receitId;
                    status = data.status;

                    // You can redirect or show a success message here
                })
                .catch(error => {
                    console.error('There was a problem with your fetch operation:', error);
                    // Handle errors appropriately, e.g., show an error message to the user
                });
        });

    //POST OrderItem
    document.querySelectorAll('.add-to-cart').forEach(item => {
        item.addEventListener('click', function () {
            var foodId = $(this).data('food-id');
            var data = {
                FoodId: foodId,
                Quantity: 1,
                OrderId: orderId
            };

            fetch('/api/OrderItem/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    // Handle success
                    console.log('Success:', data);
                })
                .catch(error => {
                    // Handle error
                    console.error('Error:', error);
                });
        });
    });


    //GET OrderItems
    function fetchOrders() {
        fetch(`/api/OrderItem/?columnName=orderid&columnValue=${orderId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                // Work with the JSON data retrieved from the endpoint
                const ordersContainer = document.getElementById('ordersContainer');

                // Clear existing content
                ordersContainer.innerHTML = '';

                // Iterate over the data and append to the container
                data.forEach(order => {
                    const orderElement = document.createElement('div');
                    orderElement.textContent = `Quantity: ${order.quantity} FoodId:${order.foodId}, OrderId: ${order.orderId}`;
                    ordersContainer.appendChild(orderElement);
                });
            })
            console.log()
            .catch(error => {
                console.error('There was a problem with the fetch operation:', error);
            });
    }



    document.getElementById('confirmorder').addEventListener('click', function () {


        const itemIdToUpdate = orderId; // Example item ID to update
        const updatedData = {
            id : orderId,
            guest : guest,
            table : table,
            waiterId : waiter,
            date : date,
            receitId : receit,
            confirmed : true,
            status : status
            // Example updated data for the item
            
            // Add other fields as needed
        };

        // Construct the URL targeting the specific item
        const url = `/api/Order/${itemIdToUpdate}`;

        // Prepare the request object
        const requestOptions = {
            method: 'PUT', // or 'PATCH' depending on the server's API
            headers: {
                'Content-Type': 'application/json', // Specify content type as JSON
                // Add any other headers if required
            },
            body: JSON.stringify(updatedData), // Convert data to JSON format
        };

        // Send the request
        fetch(url, requestOptions)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json(); // Parse response JSON if needed
            })
            .then(data => {
                // Handle successful response (if required)
                console.log('Item updated successfully:', data);
            })
            .catch(error => {
                // Handle errors
                console.error('There was a problem updating the item:', error);
            });

        

    });

    // Attach an event listener to the button
    const refreshButton = document.getElementById('addtocart');
    refreshButton.addEventListener('click', fetchOrders);
    const refreshButton2 = document.getElementById('offcanvasbutton');
    refreshButton2.addEventListener('click', fetchOrders);
</script>

#javascript

Options Object for JS functions

function test({ a = "foo", b = "bar", c = "baz" } = {}) {
  console.log(a + b + c);
}

test({c: "blub"});	// foobarblub

#javascript

Find and Copy a YouTube Channel's RSS Feed Bookmarklet

javascript: (function () {
  if (
    location.host.includes("youtube.com") &&
    (location.pathname.startsWith("/channel") ||
      location.pathname.startsWith("/@"))
  ) {
    const feed = document
      .querySelector("link[title='RSS']")
      .getAttribute("href");
    if (feed.includes(".xml")) {
      let toClip = prompt("copy to clipboard", feed);
      navigator.clipboard.writeText(toClip);
    } else {
      window.alert("failed");
    }
  } else {
    window.alert("current page isn't YouTube Channel");
  }
})();

#javascript

Dynamo release

sizeguide/script/release-theme walmart 

script/release sizeguide

#react #react.js #javascript #jsx #tailwind #css

RFC - Tailwind Indicator

export function TailwindIndicator() {
  if (process.env.NODE_ENV === "production") return null

  return (
    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
      <div className="block sm:hidden">xs</div>
      <div className="hidden sm:block md:hidden">sm</div>
      <div className="hidden md:block lg:hidden">md</div>
      <div className="hidden lg:block xl:hidden">lg</div>
      <div className="hidden xl:block 2xl:hidden">xl</div>
      <div className="hidden 2xl:block">2xl</div>
    </div>
  )
}

#javascript

Get images of the tweet

const tweetId = location.pathname.match(/status\/([0-9]+)/)[1];
const imgElements = document.querySelectorAll(`a[href*="${tweetId}"] img`);
let imgArray = new Array();
for (const imgElement of imgElements) {
  let imgSrc = imgElement
    .getAttribute("src")
    .replace(/\?format=/, ".")
    .replace(/&.+/, "");
  imgArray.push(imgSrc);
}

#javascript

Opening External Links In New Tabs

var links = document.links;
for (let i = 0, linksLength = links.length ; i < linksLength ; i++) {
  if (links[i].hostname !== window.location.hostname) {
    links[i].target = '_blank';
    links[i].rel = 'noreferrer noopener';
  }
}

#javascript

AppStore Search Bookmarklet

javascript: (function () {
  const query = prompt("Search App Store", document.getSelection().toString());
  if (query) {
    window.open(
      `itms-apps://search.itunes.apple.com/WebObjects/MZSearch.woa/wa/search?media=software&term=${encodeURIComponent(query)}`,
    );
  }
})();

#javascript

Generate DTO from Doc

const genDTO = (className, id) => {
  var fields = [
    'package com.voltcash.integrations.opencp.common.dto; ',
    '\n',
    'import com.voltcash.integrations.common.dto.BaseJsonEntity; ',
    'import lombok.Data;',
     '\n',
    '@Data ',
    'public class '+ className +' extends BaseJsonEntity{ ' 
  ];
 var declarations = $('#' + id).parentNode.querySelectorAll('td:first-child strong').forEach(e => fields.push('private String ' + e.innerHTML + ';'));
  
  fields.push('}');
  
  console.log(fields.join('\n'));
}

#javascript #sveltekit

Sveltekit: Import component dynamically

/*** +page.svelte **/

<script>
	import { onMount } from 'svelte';
	
	let Thing;
	
	const sleep = ms => new Promise(f => setTimeout(f, ms));
	
	onMount(async () => {
		await sleep(1000); // simulate network delay
		Thing = (await import('./Thing.svelte')).default;
	});
</script>

<svelte:component this={Thing} answer={42}>
	<p>some slotted content</p>
</svelte:component>



/*** Thing.svelte ***/

<script>
	export let answer;
</script>

<p>the answer is {answer}</p>
<slot></slot>

#javascript #sveltekit

Sveltekit: Create component dynamically

/* +page.svelte **/

<script>
    import Component2 from "./Component2.svelte";
    
    function abc() {
    	const element = new Component2({
    		target: document.querySelector('#abc')
    	})
    }
</script>

<div id="abc" use:abc>dsaads</div>

/* Component2.svelte **/

<script>
  export let params;
</script>
<div>
	<table>
		<tr>
			<td>dsadasads</td>
		</tr>
	</table>
</div>

#javascript #sveltekit

Sveltekit: Create component dynamically

/* +page.svelte **/

<script>
    import Component2 from "./Component2.svelte";
    
    function abc() {
    	const element = new Component2({
    		target: document.querySelector('#abc')
    	})
    }
</script>

<div id="abc" use:abc>dsaads</div>

/* Component2.svelte **/

<script>
  export let params;
</script>
<div>
	<table>
		<tr>
			<td>dsadasads</td>
		</tr>
	</table>
</div>

#javascript

OntraPort Charts Settings

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

   <script>
        function createChart(data) {
            const ctx = document.getElementById('myChart');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.labels,
                    datasets: [{
                        label: data.label,
                        data: data.data1,
                       backgroundColor: '#003f5c ',
                        borderWidth: 2
                    },
                          {
                        label: '# of Views',
                        data: data.data2,
                       backgroundColor: '#ff6e54 ',
                        borderWidth: 3
                    }    
                              
                              ]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }
    </script>

#javascript

autocomplete nama lengkap baca database

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#nama_suami").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "fetch_nama_lengkap.php",
                        type: "POST",
                        dataType: "json",
                        data: {
                            term: request.term
                        },
                        success: function(data) {
                            response(data);
                        }
                    });
                },
                minLength: 2 // Jumlah minimum karakter sebelum autocomplete mulai
            });
        });
    </script>

#javascript

autocomplete dan isi kolom lain berdasarkan kolom autocomplete ini

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Staff</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="adminer.css" />

<script>
        $(document).ready(function() {
            $("#nama_suami").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "fetch_nama_lelaki.php",
                        type: "POST",
                        dataType: "json",
                        data: {
                            term: request.term
                        },
                        success: function(data) {
                            response(data);
                        }
                    });
                },
                minLength: 2, // Jumlah minimum karakter sebelum autocomplete mulai
                select: function(event, ui) {
                    $("#nama_suami").val(ui.item.value);
                    $.ajax({
                        url: "fetch_id_number.php",
                        type: "POST",
                        dataType: "json",
                        data: {
                            nama_lengkap: ui.item.value
                        },
                        success: function(data) {
                            $("#id_suami").val(data.id_number);
                        }
                    });
                    return false;
                }
            });
        });
    </script>

#javascript #promises

synchronous nature via timeout

console.log('Hi')

const func = () => {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log('2nd Hi')
            resolve();
        }, 2000)
    })
}

(async () => {
    await func();
    console.log('3rd Hi');
})();

#javascript

Modules in JavaScript – CommonJS and ESmodules Explained

https://www.freecodecamp.org/news/modules-in-javascript/

#html #php #javascript

Form ajax submission and validation with php mailer

<!--HTML Code-->
  
  <form id="contact_form" method="post">
    <div class="row">
        <div class="col-md-12 form-group g-mb-20">
            <input type="text" class="form-control" id="txtContactName" name="txtContactName" placeholder="Full Name" tabindex="201" required>
            <div class="error-message" id="txtContactName-error"></div>
        </div>

        <div class="col-md-12 form-group g-mb-20">
            <input type="email" class="form-control" id="txtContactEmail" name="txtContactEmail" placeholder="Email Address" tabindex="202" required>
            <div class="error-message" id="txtContactEmail-error"></div>
        </div>

        <div class="col-md-12 form-group g-mb-20">
            <input type="text" class="form-control" id="txtContactPhone" name="txtContactPhone" placeholder="Contact Number" maxlength="10" tabindex="203" required>
            <div class="error-message" id="txtContactPhone-error"></div>
        </div> 

        <div class="col-md-12 form-group g-mb-40">
            <textarea class="form-control" id="txtContactMessage" name="txtContactMessage" rows="7" placeholder="Message" maxlength="160" tabindex="204" required></textarea>
            <div class="error-message" id="txtContactMessage-error"></div>
        </div>
    </div>
    <input type="submit" class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-default rounded-0 text-uppercase g-py-15 g-px-30" id="btnContactSubmit" name="btnContactSubmit" value="SUBMIT">
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script>
	
</script>
<script>
    $(document).ready(function() {
        $('#contact_form').validate({
            rules: {
                txtContactName: "required",
                txtContactEmail: {
                    required: true,
                    email: true
                },
                txtContactPhone: {
                    required: true,
                    digits: true,
                    maxlength: 10
                },
                txtContactMessage: "required"
            },
            messages: {
                txtContactName: "Please enter your full name",
                txtContactEmail: {
                    required: "Please enter your email address",
                    email: "Please enter a valid email address"
                },
                txtContactPhone: {
                    required: "Please enter your contact number",
                    digits: "Please enter only digits",
                    maxlength: "Please enter a valid 10-digit phone number"
                },
                txtContactMessage: "Please enter your message"
            },
            errorPlacement: function(error, element) {
                error.appendTo(element.closest('.form-group').find('.error-message'));
            },
            submitHandler: function(form) {
                var formData = $(form).serialize();
                $.ajax({
                    type: 'POST',
                    url: 'mail.php',
                    data: formData,
                    success: function(response) {
                        $('#contact_form').append('<div class="success-message" style="color: green;">Message sent successfully!</div>');
                        setTimeout(function() {
                            $('#contact_form')[0].reset();
                        }, 4000);
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                        alert('Error: ' + xhr.responseText);
                    }
                });
            }
        });
    });
</script>

PHP Miler folder should be there
Create folder name with mail.php and add below code there 
<?php
// Include PHPMailer autoload file

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;

// Load Composer's autoloader
require 'phpmailer/vendor/autoload.php';

// Check if the form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Retrieve form data
    $name = $_POST['txtContactName'];
    $email = $_POST['txtContactEmail'];
    $phone = $_POST['txtContactPhone'];
    $message = $_POST['txtContactMessage'];

    // Initialize PHPMailer
    $mail = new PHPMailer(true);
    try {
        // SMTP settings
		$mail->IsSMTP();        // Sets Mailer to send message using SMTP
		$mail->SMTPAuth = true; // Authentication enabled
		$mail->SMTPSecure = 'tls'; // Secure transfer enabled REQUIRED for Gmail
		$mail->Host = 'smtp-relay.brevo.com';
		$mail->Port = 587;
		$mail->Username = 'advanceindiaprojectltd@gmail.com';
		$mail->Password = 'xsmtpsib-e66045ab99d2f28608d548ca33a5a3ac8cc14a6896d682cbdc5418c80154b5eb-6B5QJOyT18GvbzmZ';
		$mail->SMTPOptions = array(
			'ssl' => array(
				'verify_peer' => false,
				'verify_peer_name' => false,
				'allow_self_signed' => true
			)
		);

        // Recipients
        $mail->setFrom($email, $name);
        $mail->addAddress('roshan@teamvariance.com'); // Add recipient email address

        // Content
        $mail->isHTML(true);
        $mail->Subject = 'Contact Form Submission';
		// Construct HTML table for the email body
        $message = '
            <h3 align="center">Details</h3>
            <table border="1" width="100%" cellpadding="5" cellspacing="5">
                <tr>
                    <td width="30%">Name</td>
                    <td width="70%">' . $name . '</td>
                </tr> 
                <tr>
                    <td width="30%">Email</td>
                    <td width="70%">' . $email . '</td>
                </tr>
                <tr>
                    <td width="30%">Phone</td>
                    <td width="70%">' . $phone . '</td>
                </tr>
                <tr>
                    <td width="30%">Message</td>
                    <td width="70%">' . $message . '</td>
                </tr>
            </table>
        ';
        $mail->Body = $message;

        // Send email
        $mail->send();
        
        // Return success message
        echo "success";
    } catch (Exception $e) {
        // Return error message
        echo "error";
    }
}
?>

#google #apps #script #javascript

Сортировка по 1 параметру

  var newStafflist = [];
  for (var i = 0; i < staffdata.length; i++) {
    var department = staffdata[i][4];
    if (depData.flat().includes(department) && department !== "") {
      newStafflist.push([staffdata[i][2], staffdata[i][3], staffdata[i][4], staffdata[i][5], staffdata[i][8], staffdata[i][9], staffdata[i][10], staffdata[i][7]]);
    }
  }

#javascript #duplicates #map #newset

remove duplicates and create object

 const countries = [...new Set(cities)].map(elem => (
  {
    country: elem.country,
    emoji: elem.emoji
  } 
));

#javascript

TEMP

function extractProductData() {
  const getValueById = (id) => document.getElementById(id) ? document.getElementById(id).value : 'N/A';
  const data = {
    productName: getValueById("productName"),
    item_id: getValueById("productId"),
    price: getValueById("priceInput"),
    item_brand: 'Solskjerming AS', // Questo valore è statico come da tua richiesta
    item_category: getValueById("modelId"),
    item_variant: getValueById("fabricInput"),
  };
  console.log(data);
  return data;
}

extractProductData();

#javascript

Competitor Activity: Monitoring Impression Share Changes

function main() {
  // Settings
  var campaignName = "Campaign Name";
  var significantOverlapChange = 0.1; // 10% change triggers an alert
  var lookbackPeriod = "LAST_30_DAYS";
  var recipientEmail = "your_email@example.com";

  // Get Auction Insights Data
  var report = AdsApp.report(
    "SELECT Domain, ImpressionShare " +
    "FROM AUCTION_INSIGHTS " +
    "WHERE CampaignName = '" + campaignName + "' " +
    "DURING " + lookbackPeriod);

  var rows = report.rows();
  var competitorData = {};

  // Store Impression Share Data
  while (rows.hasNext()) {
    var row = rows.next();
    competitorData[row['Domain']] = row['ImpressionShare'];
  }

  // Compare with Current Data (Simplified)
  var currentCampaign = AdsApp.campaigns().withCondition("Name = '" + campaignName + "'").get().next();
  var competitors = currentCampaign.targeting().auctionInsights().get().results();

  competitors.forEach(function(competitor) {
    var domain = competitor.getDomain();
    var currentImpressionShare = competitor.getStats().getImpressionShare();

    if (domain in competitorData) {
      var previousImpressionShare = competitorData[domain];
      var change = Math.abs(currentImpressionShare - previousImpressionShare);

      if (change >= significantOverlapChange) {
        // Send an alert - Customize this part
        var subject = "Competitor Alert: " + domain;
        var body = "Impression share for " + domain + " has changed significantly in campaign: " + campaignName;
        MailApp.sendEmail(recipientEmail, subject, body);
      }
    }
  });
}

#javascript

Performance Shifts

function main() {
  // Settings
  var campaignName = "Campaign Name";
  var metricsToTrack = ["Clicks", "Conversions", "Cost"]; 
  var changeThreshold = 0.2; // 20% increase or decrease
  var comparisonPeriod = "LAST_7_DAYS"; // Timeframe for comparison
  var recipientEmail = "your_email@example.com";

  // Get the campaign
  var campaign = AdsApp.campaigns().withCondition("Name = '" + campaignName + "'").get().next();

  // Fetch performance data for the current and previous periods
  var currentStats = campaign.getStatsFor("TODAY");
  var previousStats = campaign.getStatsFor("PREVIOUS_" + comparisonPeriod); 

  // Analyze each metric
  for (var i = 0; i < metricsToTrack.length; i++) {
    var metric = metricsToTrack[i];
    var currentValue = currentStats.get(metric);
    var previousValue = previousStats.get(metric);

    var changePercentage = (currentValue - previousValue) / previousValue;

    // Send alert if the change is significant
    if (Math.abs(changePercentage) >= changeThreshold) {
      var direction = changePercentage > 0 ? "increased" : "decreased";
      var subject = "Performance Alert: " + campaignName;
      var body = metric + " has " + direction + " by " + (changePercentage * 100).toFixed(0) + "% compared to the previous " + comparisonPeriod.toLowerCase() + ".";
      MailApp.sendEmail(recipientEmail, subject, body);
    }
  }
}

#javascript

Budget Thresholds: Email Alerts

function main() {
  // Threshold Settings
  var campaignBudgetThreshold = 0.8; // Alert when 80% of the budget is spent
  var sendEmailAlerts = true; // Set to false to disable emails
  var recipientEmail = "your_email@example.com";

  // Get all active campaigns
  var campaignIterator = AdsApp.campaigns()
      .withCondition("Status = ENABLED")
      .get();

  while (campaignIterator.hasNext()) {
    var campaign = campaignIterator.next();
    var campaignName = campaign.getName();
    var budget = campaign.getBudget().getAmount();
    var spendToDate = campaign.getStatsFor("TODAY").getCost();

    var spentPercentage = spendToDate / budget;

    if (spentPercentage >= campaignBudgetThreshold && sendEmailAlerts) {
      var subject = "Budget Alert: " + campaignName;
      var body = "Campaign " + campaignName + " has spent " + (spentPercentage * 100).toFixed(0) + "% of its budget.";
      MailApp.sendEmail(recipientEmail, subject, body);
    }
  }
}

#javascript

Ad Rotation Control

function main() {
  // Campaign Selection
  var campaignName = "Campaign Name"; 

  // Ad Rotation Strategy (Choose one and adjust)
  var rotationStrategy = {
    // 1. Rotate Evenly: Give all ads equal chance
    // "ROTATE_EVENLY" 
    
    // 2. Optimize for Clicks: Show higher-performing ads more often 
    // "OPTIMIZE_FOR_CLICKS"

    // 3. Optimize for Conversions: Prioritize ads driving conversions
    // "OPTIMIZE_FOR_CONVERSIONS" 

    // 4. Rotate Indefinitely: Don't automatically select an ad 
    "ROTATE_INDEFINITELY" 
  }

  // Get the specified campaign
  var campaign = AdsApp.campaigns().withCondition("Name = '" + campaignName + "'").get().next();

   // Set the ad rotation type
  var adRotationType = campaign.getAdRotationType();

  // Apply only if rotation settings need to be changed
  if (adRotationType != rotationStrategy) {
    campaign.setAdRotationType(rotationStrategy); 
  }
}

#javascript

Granular Keyword Management: Negative Keywords from Search Queries

function main() {
  // Settings
  var campaignName = "Campaign Name"; 
  var negativeKeywordListName = "Auto-Generated Negatives";
  var dateRange = "LAST_30_DAYS";

  // Find or create the negative keyword list
  var negativeKeywordList = AdsApp.negativeKeywordLists().withCondition("Name = '" + negativeKeywordListName + "'").get().next();
  if (!negativeKeywordList) {
    negativeKeywordList = AdsApp.newNegativeKeywordListBuilder()
      .withName(negativeKeywordListName)
      .build()
      .getResult();
  }

  // Get search query data 
  var queryReport = AdsApp.searchQueryPerformanceReport()
      .forCampaign(campaignName)
      .withCondition("Status = ENABLED") // Focus on active keywords
      .during(dateRange);

  var queryRows = queryReport.rows();
  while (queryRows.hasNext()) {
    var queryRow = queryRows.next();
    var searchQuery = queryRow.getQuery();
    var impressions = queryRow.getImpressions();
    var clicks = queryRow.getClicks();
    var cost = queryRow.getCost();

    // Add query as a negative keyword if it meets your criteria 
    // Example: High impressions, low CTR, high cost
    if (impressions > 100 && clicks == 0 && cost > 10) {
      negativeKeywordList.addNegativeKeyword(searchQuery);
    } 
  }

  // Apply the negative keyword list to the campaign
  var campaign = AdsApp.campaigns().withCondition("Name = '" + campaignName + "'").get().next();
  campaign.addNegativeKeywordList(negativeKeywordList);
}

#javascript

Granular Keyword Management: Negative Keywords from Search Queries

function main() {
  // Settings
  var campaignName = "Campaign Name"; 
  var negativeKeywordListName = "Auto-Generated Negatives";
  var dateRange = "LAST_30_DAYS";

  // Find or create the negative keyword list
  var negativeKeywordList = AdsApp.negativeKeywordLists().withCondition("Name = '" + negativeKeywordListName + "'").get().next();
  if (!negativeKeywordList) {
    negativeKeywordList = AdsApp.newNegativeKeywordListBuilder()
      .withName(negativeKeywordListName)
      .build()
      .getResult();
  }

  // Get search query data 
  var queryReport = AdsApp.searchQueryPerformanceReport()
      .forCampaign(campaignName)
      .withCondition("Status = ENABLED") // Focus on active keywords
      .during(dateRange);

  var queryRows = queryReport.rows();
  while (queryRows.hasNext()) {
    var queryRow = queryRows.next();
    var searchQuery = queryRow.getQuery();
    var impressions = queryRow.getImpressions();
    var clicks = queryRow.getClicks();
    var cost = queryRow.getCost();

    // Add query as a negative keyword if it meets your criteria 
    // Example: High impressions, low CTR, high cost
    if (impressions > 100 && clicks == 0 && cost > 10) {
      negativeKeywordList.addNegativeKeyword(searchQuery);
    } 
  }

  // Apply the negative keyword list to the campaign
  var campaign = AdsApp.campaigns().withCondition("Name = '" + campaignName + "'").get().next();
  campaign.addNegativeKeywordList(negativeKeywordList);
}

#javascript

Dynamic Campaign Creation: Basic Framework

function main() {
  // 1. Data Source: Google Sheet
  var spreadsheetUrl = "https://docs.google.com/spreadsheets/d/..."; // Replace with your spreadsheet URL
  var dataSheet = SpreadsheetApp.openByUrl(spreadsheetUrl).getSheetByName("CampaignData");

  // 2. Campaign Template Settings
  var campaignNameTemplate = "Dynamic Campaign - {Product Category}";
  var budget = 100; // Daily budget
  // ... other desired campaign settings ...

  // 3. Iterate through Spreadsheet Data 
  var dataRange = dataSheet.getDataRange().getValues(); 
  dataRange.shift(); // Remove header row

  for (var i = 0; i < dataRange.length; i++) {
    var productCategory = dataRange[i][0]; 
    // ... extract other data from the row ...

    // 4. Create New Campaign (Simplified)
    var campaignBuilder = AdsApp.newCampaignBuilder();
    var campaign = campaignBuilder
      .withName(campaignNameTemplate.replace("{Product Category}", productCategory))
      .withBudget({ amount: budget, currencyCode: "USD" })
      .build()
      .getResult(); 

    // 5. (Optional) Create Ad Groups, Keywords, Ads based on Spreadsheet Data
  }
}

#javascript

Automated Structure Updates: Pausing Campaigns on a Schedule

function main() {
  // Define your schedule
  var dayOfWeek = "MONDAY"; 
  var startTime = "00:00"; // Midnight
  var endTime = "06:00";  // 6 AM

  // Campaign Selection 
  var campaignName = "Weekend Campaign";

  // Get the current day of the week and time (adjust the timezone if needed)
  var timeZone = "America/Los_Angeles";  
  var date = new Date();
  var currentDayOfWeek = Utilities.formatDate(date, "EEEE", timeZone);
  var currentTime = Utilities.formatDate(date, "HH:mm", timeZone);

  // Pause or enable the campaign based on the schedule
  var campaign = AdsApp.campaigns().withCondition("Name = '" + campaignName + "'").get().next();

  if (currentDayOfWeek == dayOfWeek && currentTime >= startTime && currentTime <= endTime) {
    campaign.pause();
  } else {
    campaign.enable();
  }
}

#javascript

External Factors: Weather-Based Bid Adjustments

function main() {
  // Get your OpenWeatherMap API key (Sign up for a free account)
  var apiKey = "YOUR_API_KEY"; 

  // Target location (City or Zip Code)
  var targetLocation = "Los Angeles, CA"; 

  // Campaign Selection 
  var campaignName = "Summer Campaign"; 

  // Bid adjustments based on temperature
  var temperatureRanges = {
    "below_70": -0.1,   // Decrease bid by 10% if below 70°F
    "70_to_85": 0.0,    // No change between 70°F and 85°F 
    "above_85": 0.2     // Increase bid by 20% if above 85°F
  };

  // Fetch current weather data
  var weatherUrl = "https://api.openweathermap.org/data/2.5/weather?q=" + targetLocation + "&appid=" + apiKey + "&units=imperial";
  var weatherResponse = UrlFetchApp.fetch(weatherUrl);
  var weatherData = JSON.parse(weatherResponse.getContentText());

  // Extract temperature from the data
  var currentTemperature = weatherData.main.temp;

  // Determine the appropriate bid modifier
  var bidModifier;
  for (var range in temperatureRanges) {
    if (currentTemperature >= range.split("_")[1]) {
      bidModifier = temperatureRanges[range];
      break;
    }
  }

  // Apply the bid modifier at the campaign level
  var campaign = AdsApp.campaigns().withCondition("Name = '" + campaignName + "'").get().next();
  campaign.setBidModifier(1 + bidModifier); 
}

#javascript

Proactive Control: Pausing Underperforming Keywords

function main() {
  // Performance Thresholds
  var maxCPA = 50;  // Your maximum acceptable cost per acquisition
  var minClicks = 50; // Minimum clicks for reliable data

  // Timeframe: Analyze recent performance
  var dateRange = "LAST_30_DAYS"; 

  // Campaign Selection 
  var campaignName = "Campaign Name";

  // Get all the keywords in the specified campaign
  var keywordIterator = AdsApp.campaigns()
      .withCondition("Name = '" + campaignName + "'")
      .get()
      .keywords();

  while (keywordIterator.hasNext()) {
    var keyword = keywordIterator.next();

    // Gather keyword performance data
    var stats = keyword.getStatsFor(dateRange);
    var conversions = stats.getConversions();
    var cost = stats.getCost();
    var clicks = stats.getClicks();
    var currentCPA = cost / conversions;

    // Pause keywords if they exceed max CPA and have sufficient data
    if (currentCPA > maxCPA && clicks >= minClicks) {
      keyword.pause();
    }
  }
}

#javascript

Targeted Optimizations

function main() {
  // Target Locations (Adjust this list!)
  var targetLocations = [
    "California", 
    "New York", 
    "Texas"
  ];

  // Bid Adjustments (Positive = Increase, Negative = Decrease)
  var locationBidModifiers = {
    "California": 0.20,  // Increase bids by 20% in California
    "New York": 0.10,    // Increase bids by 10% in New York
    "Texas": -0.15       // Decrease bids by 15% in Texas
  };

  // Campaign Selection 
  var campaignName = "Campaign Name"; 

  // Get all the location criteria within the specified campaign
  var locationIterator = AdsApp.campaigns()
      .withCondition("Name = '" + campaignName + "'")
      .get()
      .targeting().locations();

 while (locationIterator.hasNext()) {
    var location = locationIterator.next();
    var locationName = location.getName(); 

    // Check if the location is in our target list
    if (targetLocations.indexOf(locationName) !== -1) {
      var bidModifier = locationBidModifiers[locationName];

      // Set the bid modifier only if it exists
      if (bidModifier) {
        location.setBidModifier(1 + bidModifier); 
      }
    }
  }
}

#javascript

Performance-Driven Bidding:

function main() {
  // Performance Metrics
  var targetCPA = 30; // Your desired cost per acquisition
  var minConversions = 10; // Minimum conversions for reliable data

  // Timeframe: Analyze recent performance with flexibility
  var dateRange = "LAST_30_DAYS"; 

  // Campaign Selection 
  var campaignName = "Campaign Name"; 

  // Get relevant keywords
  var keywordIterator = AdsApp.campaigns()
      .withCondition("Name = '" + campaignName + "'")
      .get()
      .keywords();

  while (keywordIterator.hasNext()) {
    var keyword = keywordIterator.next();

    // Gather keyword performance data
    var stats = keyword.getStatsFor(dateRange);
    var conversions = stats.getConversions();
    var cost = stats.getCost();
    var currentCPA = cost / conversions;

    // Apply Bid Adjustments Only If Data is Sufficient 
    if (conversions >= minConversions) {
      if (currentCPA > targetCPA) {
        // Decrease bid if CPA is higher than target
        var newBid = keyword.getMaxCpc() * 0.9; // Example: Reduce by 10%
        keyword.setMaxCpc(newBid);
      } else if (currentCPA < targetCPA) {
        // Increase bid if CPA is lower than target
        var newBid = keyword.getMaxCpc() * 1.1; // Example: Increase by 10%
        keyword.setMaxCpc(newBid);
      }
    } 
  }
}

#javascript

Time-Based Adjustments:

function main() {
  // Set your timezone for accurate time-based adjustments 
  var timeZone = "America/Los_Angeles";  

  // Get the current hour in your specified timezone
  var currentHour = Utilities.formatDate(new Date(), "HH", timeZone);

  // Define your campaign name (replace with your actual campaign)
  var campaignName = "Campaign Name"; 

  // Get all the keywords in the specified campaign
  var keywordIterator = AdsApp.campaigns()
      .withCondition("Name = '" + campaignName + "'")
      .get()
      .keywords();

  while (keywordIterator.hasNext()) {
    var keyword = keywordIterator.next();

    // Example: Increase bids by 20% during peak hours (9 AM to 5 PM)
    if (currentHour >= 9 && currentHour <= 17) {
      keyword.setBidModifier(1.2);  // Increase bid by 20%
    } else {
      keyword.setBidModifier(1.0);  // Reset bid to normal
    }
  }
}

#javascript #date

Format Date to YYYY-MM-DD

/**
 * Format a given date object to YYYY-MM-DD format.
 * 
 * @param {Date} date The date object to be formatted.
 * @returns {string} The formatted date in YYYY-MM-DD format.
 */
function formatDateToYYYYMMDD(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const formattedDate = `${year}-${month}-${day}`;
    return formattedDate;
}

#javascript #gsap

GSAP scroll-slide [Java Script]

//rpf のgsap スライド

const listWrapperEl = document.querySelector('.side-scroll-list-wrapper');
const listEl = document.querySelector('.side-scroll-list');

gsap.to(listEl, {
  x: () => -(listEl.clientWidth - listWrapperEl.clientWidth),
  ease: 'none',
  scrollTrigger: {
    trigger: '.side-scroll',
    start: 'top 20%',
    end: () => `+=${listEl.clientWidth - listWrapperEl.clientWidth}`,
    scrub: true,
    pin: true,
    anticipatePin: 1,
    invalidateOnRefresh: true,
    onUpdate: (scrollTrigger) => {
      const activeIndex = Math.round(scrollTrigger.progress * (listEl.children.length - 1));
      yourOtherFunction(activeIndex);
    },
  },
});



function yourOtherFunction(activeIndex) {
  const myList = document.querySelectorAll('.side-scroll-list li');
  const variableToCompare = activeIndex;

  myList.forEach((item, index) => {
    if (index === variableToCompare) {
      item.classList.add('active');
    }
    else {
      item.classList.remove('active');
    }
  });
  const myList2 = document.querySelectorAll('.side-scroll-status li');
  myList2.forEach((item, index) => {
    if (index === variableToCompare) {
      item.classList.add('current');
    }
    else {
      item.classList.remove('current');
    }
  });
}

#javascript

Progress-bar swiper [Java Script]

var percentTime;
var tick;
var progressBar = document.querySelector('.js-mainvisual-progress');

var mySwiper = new Swiper('.js-mainvisual-container', {
	effect: 'slide',
	loop: true,
	speed: 400,
	slidesPerView: 1,
	spaceBetween: 30,
	grabCursor: false,
	watchOverflow: true,
	easing: 'ease-in',
	keyboard: {
		enabled: true,
		onlyInViewport: true
	},
	watchOverflow: true,
	watchSlidesProgress: true,
	watchSlidesVisibility: true,
	roundLengths: true,
	autoplay: {
		delay: 3000,
		disableOnInteraction: false
	},
	on: {
		slideChange: function () {
			var swiper = this;
			var defaultSlideDelay = swiper.params.autoplay.delay;
			var currentIndex = swiper.realIndex + 1;
			var currentSlide = swiper.slides[currentIndex];
			var currentSlideDelay = currentSlide.getAttribute('data-swiper-autoplay') || defaultSlideDelay;
			updateSwiperProgressBar(progressBar, currentSlideDelay);
		}
	}
});

function updateSwiperProgressBar(bar, slideDelay) {

	let tick;

	function startProgressBar() {
		resetProgressBar();
		tick = requestAnimationFrame(progress);
	}

	function progress() {

		var timeLeft = getTimeout(mySwiper.autoplay.timeout);

		if (mySwiper.autoplay.running && !mySwiper.autoplay.paused) {
			percentTime = sanitisePercentage(100 - (timeLeft / slideDelay * 100));
			bar.style.width = percentTime + 5 + '%';
			bar.style.transition = 'width ' + percentTime + 'ms linear';

			if (percentTime > 100) {
				resetProgressBar();
			}
		}

		if (mySwiper.autoplay.paused) {
			percentTime = 0;
			bar.style.width = 0;
		}

		tick = requestAnimationFrame(progress);
	}

	function resetProgressBar() {
		percentTime = 0;
		bar.style.width = 0;
		cancelAnimationFrame(tick);
	}

	startProgressBar();

}

#javascript

Progress-bar swiper [HTML]

<div class="p-mainvisual slider">
					<div class="p-mainvisual__container swiper-container js-mainvisual-container">
					  	<div class="p-mainvisual__swiper swiper-wrapper">
					  		<div class="p-mainvisual__swiper-slide swiper-slide"  data-swiper-autoplay="3000">
					  		  <img src="<%= getRelativePath('/assets/images/index/img_index_mv1.jpg'); %>" alt="">
					  		</div>
					  		<div class="p-mainvisual__swiper-slide swiper-slide"  data-swiper-autoplay="3000">
					  		  <img src="<%= getRelativePath('/assets/images/index/img_index_mv2.jpg'); %>" alt="">
					  		</div>
					  		<div class="p-mainvisual__swiper-slide swiper-slide"  data-swiper-autoplay="3000">
					  		  <img src="<%= getRelativePath('/assets/images/index/img_index_mv3.jpg'); %>" alt="">
					  		</div>
					  	</div>
				  

						<div class="p-mainvisual__progress swiper-hero-progress js-mainvisual-progress"></div>

						<div class="p-mainvisual__text">人と自然に<br class="u-only-sp">快適な環境を創る</div>
						<div class="p-mainvisual__buttons">
							<span class="c-rounded-btn js-pop-up">
								<picture>
									<source srcset="<%= getRelativePath('/assets/images/index/img_index_mv_logo1-sp.png.webp'); %>" media="(max-width:767px)" type="image/webp">
									<source srcset="<%= getRelativePath('/assets/images/index/img_index_mv_logo1-sp.png'); %>" media="(max-width:767px)">
									<source srcset="<%= getRelativePath('/assets/images/index/img_index_mv_logo1.png.webp'); %>" type="image/webp">
									<img src="<%= getRelativePath('/assets/images/index/img_index_mv_logo1.png'); %>" alt="エコアクション21認定登録">
								</picture>
							</span>
							<div class="c-rounded-btn__group">
								<a href="https://www3.sanpainet.or.jp/chukan2/company/19452/" target="_blank" class="c-rounded-btn">
									<picture>
										<source srcset="<%= getRelativePath('/assets/images/index/img_index_mv_logo2-sp.png.webp'); %>" media="(max-width:767px)" type="image/webp">
										<source srcset="<%= getRelativePath('/assets/images/index/img_index_mv_logo2-sp.png'); %>" media="(max-width:767px)">
										<source srcset="<%= getRelativePath('/assets/images/index/img_index_mv_logo2.png.webp'); %>" type="image/webp">
										<img src="<%= getRelativePath('/assets/images/index/img_index_mv_logo2.png'); %>" alt="優良産廃処理業者認定">
									</picture>
								</a>
								<a href="<%= getRelativePath('/certificate/'); %>" class="c-rounded-btn">
									<picture>
										<source srcset="<%= getRelativePath('/assets/images/index/img_index_mv_logo3-sp.png.webp'); %>" media="(max-width:767px)" type="image/webp">
										<source srcset="<%= getRelativePath('/assets/images/index/img_index_mv_logo3-sp.png'); %>" media="(max-width:767px)">
										<source srcset="<%= getRelativePath('/assets/images/index/img_index_mv_logo3.png.webp'); %>" type="image/webp">
										<img src="<%= getRelativePath('/assets/images/index/img_index_mv_logo3.png'); %>" alt="許可証一覧">
									</picture>	  
								</a>
							</div>
						</div>
					</div> 
				  </div>

#javascript

Swiper Progress Bar [js]



var getTimeout = function(){var e=setTimeout,b={};setTimeout=function(a,c){var d=e(a,c);b[d]=[Date.now(),c];return d};return function(a){return(a=b[a])?Math.max(a[1]-Date.now()+a[0],0):NaN}}();



function sanitisePercentage(i){

    return Math.min(0,Math.max(0,i));

}



// Slider

var percentTime;
10
var tick;

var progressBar = document.querySelector('.swiper-hero-progress');



var mySwiper = new Swiper('.swiper-container', {

    effect: 'slide',

#javascript

Custom Cursor [js]

// got DOM element

const cursor = document.querySelector('#cursor');

const cursorCircle = cursor.querySelector('.cursor__circle');



//variables which defines coordinates of 

const mouse = { x: -0, y: -100 }; // mouse pointer's coordinates

const pos = { x: 0, y: 0 }; // cursor's coordinates

const speed = 0.1; // between 0 and 1


10
const updateCoordinates = e => {

  mouse.x = e.clientX;

#css #javascript

Build an Infinite Blinking Text Animation

https://webdesign.tutsplus.com/build-an-infinite-blinking-text-animation-with-css-and-a-touch-of-javascript--cms-93490t

#javascript

Swiper Slide JS

   var swiper = new Swiper('.js-news-swiper', {
      slidesPerView: 'auto',
      centeredSlides: true,
      spaceBetween: 20,
      speed: 1500,
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      autoplay: {
        delay: 2000,
        disableOnInteraction: false
      },
      loop: true,
      watchSlidesProgress: true
    });

#javascript #swiper

Ticker JS-code

    var mySwiper = new Swiper(".js-ticker", {	
        infinite: true,
        loop: true,
        slidesPerView: 'auto',
        speed: 8000,
        spaceBetween: 32,
        centeredSlides: true,
        autoplay: {
          delay: 0,
          disableOnInteraction: false,
          reverseDirection: false,
        },
      });

#javascript

Javascript Time Difference Using Html Input Type Time

function diff(start, end) {
    start = document.getElementById("start").value; //to update time value in each input bar
    end = document.getElementById("end").value; //to update time value in each input bar
    
    start = start.split(":");
    end = end.split(":");
    var startDate = new Date(0, 0, 0, start[0], start[1], 0);
    var endDate = new Date(0, 0, 0, end[0], end[1], 0);
    var diff = endDate.getTime() - startDate.getTime();
    var hours = Math.floor(diff / 1000 / 60 / 60);
    diff -= hours * 1000 * 60 * 60;
    var minutes = Math.floor(diff / 1000 / 60);

    return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes;
}

#html #javascript #date #format

javascript Date, Today, YMD, format utitity functions

/**
 * dateUtils
 * Format Date using php's format string.  Date to/From ymd. Get Today's date as ymd or Date, with no time.
 *
 * @type {{todayYMD: (function(): string), ymdToDate: (function(*): Date), is_ymd: ((function(*): boolean)|*), today: (function(): Date), format: ((function((Date|string|number), string=, string=): string)|*), dateToYMD: (function(*): string), dateToDay: (function(*): Date), setLanguage(*): ({shortMonth, shortDay, longMonth, longDay})}}
 */
const dateUtils = {
    version: "2024-02-22",

    dateToDay: function(date){return new Date((new Date(date)).setHours(0, 0, 0, 0) );
    },

    dateToYMD: function date(date) {return this.dateToDay(date).toISOString().split('T')[0];},

    today: function() {return new Date((new Date()).setHours(0, 0, 0, 0) );},

    todayYMD: function() {return this.today().toISOString().split('T')[0];},

    ymdToDate: function(ymd) {return ymd.length === 10 ? this.dateToDay(ymd) : new Date(ymd); },

    is_ymd: function(value, dateOnly = true) {
        if(value === null || !isNaN(value) || typeof value !== 'string')
            return false;
        if(dateOnly) {
            if(value.length !== 10)
                return false;
            const regex = /^\d\d\d\d[-.\\\/_](0[1-9]|1[0-2])[-.\\\/_](0[1-9]|[1-2][0-9]|3[0|1])$/gm;
            return value.match(regex) !== null;
        }
        if(value.length < 10 || value.length > 27)
            return false;
        const regex =
           /^\d\d\d\d[-.\\\/_](0[1-9]|1[0-2])[-.\\\/_](0[1-9]|[1-2][0-9]|3[0|1])($|([ T]([0-1]\d|2[0-4]):[0-5]\d:[0-5]\d))/gm;
        return value.match(regex) !== null;
    },

    /**
     * Formats a date according to the given format string in PHP style
     *
     * @param {Date|string|number} inputDate - The date to be formatted. Can be a Date object, a date string, or a timestamp.
     * @param {string} [formatPhpStyle="d/M/y"] - The format string to be used for formatting the date. Defaults to "d/M/y"
     *  https://www.php.net/manual/en/datetime.format.php.
     * @param {string} [language="en"] - Englinsh en, Spanish es
     * @returns {string} - The formatted date string.
     * @throws {Error} - If an error occurs during the formatting process.
     */
    format: function(inputDate, formatPhpStyle = "d/M/y", language = "en")  {
        let lang = this.setLanguage(language);
        if(inputDate === null)
            return "";
        try {
            function padZero(value) {return value < 10  ? `0${value}` : `${value}`;}
            let date;
            if(inputDate instanceof Date)
                date = inputDate;
            else if(typeof inputDate === 'object')
                return "[object]";
            else if(isNaN(inputDate))
                date = this.is_ymd(inputDate) ?
                    new Date(`${inputDate}T00:00:00`) : new Date(inputDate);
            else
                date = new Date(inputDate);

            const parts = {
                d: padZero(date.getDate()),
                j: date.getDate(),
                D: lang.shortDay[date.getDay()],
                l: lang.longDay[date.getDay()],
                w: date.getDay(),

                m: padZero(date.getMonth() + 1),
                n: date.getMonth() + 1,
                M: lang.shortMonth[date.getMonth()],
                F: lang.longMonth[date.getMonth()],

                Y: date.getFullYear(),
                y: date.getFullYear().toString().slice(-2),

                H: padZero(date.getHours()),
                G: date.getHours(),
                h: padZero(date.getHours() > 12 ? date.getHours() - 12 : date.getHours()),
                g: date.getHours() > 12 ? date.getHours() - 12 : date.getHours(),
                i: padZero(date.getMinutes()),
                s: padZero(date.getSeconds()),

                a: date.getHours() < 12 ? 'am' : 'pm',
                A: date.getHours() < 12 ? 'AM' : 'PM',
            };

            let skip = false;
            let ret = [];
            for(let i = 0, len = formatPhpStyle.length; i < len; ++i) {
                let c = formatPhpStyle[i];
                if(c === "\\") {
                    skip = true;
                    continue;
                }
                if(skip) {
                    skip = false;
                    ret.push(c);
                    continue;
                }
                ret.push(parts.hasOwnProperty(c) ? parts[c] : c);
            }
            return ret.join("");
        } catch(error) {
            console.log("ERROR: fmt.date arguments:", arguments);
            console.log("       fmt.date error:", error);
            return inputDate;
        }
    },

    setLanguage(language) {
        switch(language.toLowerCase()) {
            case 'es':
                return {
                    longMonth: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto',
                        'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    shortMonth: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                    longDay: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                    shortDay: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
                };
            case 'en':
            default:
                return {
                    longMonth: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
                        'October', 'November', 'December'],
                    shortMonth: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    longDay: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
                    shortDay: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                };
        }
    },

};

#jquery #javascript

paralax scroll effect

function scrollBanner() {
      jQuery(document).on('scroll', function(){
      var scrollPos = jQuery(this).scrollTop();
        jQuery('.home_banner').css({
          'top' : (scrollPos/4)+'px',
        });
      });    
      }
scrollBanner(); 


// With out function


jQuery(document).ready(function(){
	
	jQuery(window).on('scroll', function(){
		var scrollTop = jQuery(window).scrollTop();
		jQuery('.home_banner').css({'top': (scrollTop/4) +'px'});
		
	});
});

#javascript

Javascript: Class for detecting if images and fonts aer ready

class TLoadComplete{
    constructor( callbackFunc, frequency ){
        this.callback = callbackFunc || (()=>{ console.log("completed")});
        this.frequency = frequency || 500;
    }
 
    start(){
        if (this.started) return;
        this.started = true;
        let me = this;
        this.images = [...document.images];
        this.interval = setInterval(()=>{
            let result = me.images.filter(el => !el.complete).length == 0 && document.fonts.ready;
            if (result) {
                me.callback();
                console.log("completed");
                me.stop();
            }
        }, me.frequency)
    }
 
    stop(){
        clearTimeout(this.interval);
        this.started = false;
    }
}

#javascript

Javascript: Wait until fonts and images loaded

const waitLoad = ( statusFunc )=>{
    var imagesLoaded=false;
    var fontsLoaded=false;

    let interval = setInterval(()=>{
        fontsLoaded = fontsLoaded || document.fonts.ready;
        imagesLoaded = imagesLoaded || ([...document.images].filter(el => !el.complete).length == 0);
        statusFunc( fontsLoaded && imagesLoaded );
        if (fontsLoaded && imagesLoaded) clearInterval(interval);
    }, 500);
}

// use waitLoad( ( state ) => console.log(state) )

#javascript

css

header{
    background-color: #333;
    color: #fff;
    padding: 10px 0;
}

nav ul{
    list-style: none;
    display: flex;
    justify-content: center;
}
nav li{
    margin: 0 20px;
}
nav a{
    text-decoration: none;
    color: #fff;
}

#javascript

last version

const chatInput = document.querySelector(".chat-input textarea");
const sendChatBtn = document.querySelector(".chat-input span");
const chatbox = document.querySelector(".chatbox");

let userMessage;
const API_KEY = "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";

let createChatLi = (message, className) => {
    // Create a chat <li> element with the passed message and className
    const chatLi = document.createElement("li");
    chatLi.classList.add("chat", className);
    let chatContent = className === "outgoing" ? `<p>${message}</p>` : ` <span class="material-symbols-outlined">
    smart_toy
  </span><p>${message}</p>`;
  chatLi.innerHTML = chatContent;
  return chatLi;
}
const generateResponse = (incomingChatLi) => {
    const API_URL = "https://api.openai.com/v1/chat/completions";
    const messageElement = incomingChatLi.querySelector("p");
    const requestOption = {
        method: "POST",
        headers: {
            "Content-Type" : "application/json",
            "Authorization": `Bearer ${API_KEY}`
        },
        body: JSON.stringify({
            model: "gpt-3.5-turbo",
            messages: [{role: "user", content: userMessage}]
        })
            
        
    }
    // Send POST request to API, get response
    fetch(API_URL, requestOption).then(res => res.json()).then(data => {
        messageElement.textContent = data.choices[0].message.content;
    }).catch((error) => {
        messageElement.textContent = "Oops! Something went horribly wrong. Please try again.";
    })
}

const handleChat = () => {
    userMessage = chatInput.value.trim();
    if(!userMessage) return;

    // Append the user's message to the chatbox
    chatbox.appendChild(createChatLi(userMessage, "outgoing"));

    setTimeout(() => {
        const incomingChatLi = createChatLi("...", "incoming")
        chatbox.appendChild(incomingChatLi);
        generateResponse(incomingChatLi);
    },600);

}
sendChatBtn.addEventListener("click", handleChat)

#html #form #javascript

Prevent back causing re-post

try {history.replaceState({content: document.title}, document.title, document.location.href);} catch(e) {}

#html #form #radio_button #javascript #jquery

Radio Button: get or set checked value

/** Vanilla javascript **/

    // Get the value of the checked radio button, undefined on not checked or not found
   let radioButtonValue = (document.querySelector("input[name='radioName']:checked") || {}).value || undefined

    // Check radio button with value ...
    (document.querySelector("input[name='radioName'][value='A']") || {}).checked=true;

/** jQuery **/

    // Get the value of the checked radio button, undefined on not checked or not found
   let radioButtonValue = $("input[name='radioName']:checked").val();

    // Check radio button with value ...
   $("input[name='radioName'][value='A']").prop('checked',true);

#html #css #javascript

Custom Mouse Effect

 //HTML





<div class="custom-mouse"></div>





//CSS


.custom-mouse{
    border: none;
    background-color: #fff;
    transform: translate(-50%, -100%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 0;
}



//JS


let customMouse = document.querySelector(".custom-mouse");
window.addEventListener("mousemove", function(details) {
   let xValue = details.clientX;
   let yValue = details.clientY;

   setTimeout(() => {
       customMouse.style.top = `${yValue}px`;
       customMouse.style.left = `${xValue}px`;
         
   }, 100);


});

#javascript

BabyOne Testkauf

dataLayer.push({
  ecommerce: {
    currencyCode: "EUR",
    purchase: {
      actionField: {
        coupon: "",
        affiliation: "Online Store",
        transaction_id: 4091243,
        revenue: 5.37,
        new: 1,
        shipping: 4.99,
        id: "4091243",
        option: "paypal_payment_method_handler",
        tax: 1.02
      },
      products: [
        {
          quantity: 1,
          item_name: "Baby-Gießer Glitter",
          item_id: 2000578486402,
          id: "2000578486402",
          name: "Baby-Gießer Glitter",
          type: "product",
          p_id: "",
          variant: "",
          brand: "Simba",
          price: 1.4,
          category: "Sandspielzeug"
        }
      ]
    }
  },
  session-: "380c5d93a281755852731a6997eeff34",
  google_tag_params: {ecomm_totalvalue: 6.39, ecomm_pagetype: "purchase"}
})

#html #css #javascript

Animated navigation bar using Gsap

 
HTML

 <nav>
      <ul>
          <li class="item">Home</li>
          <li class="item">Content</li>
          <li class="item">About</li>
          <li class="item">Contact Us</li>

      </ul>
  </nav>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="script.js"></script>


CSS


body{
    background-color: #fff;
    overflow: hidden;
}
.container{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.item{
    color: grey;
    font-size: large;
    font-weight: bolder;
    cursor: pointer;
}


JS


let itemList = document.querySelectorAll(".item");


itemList.forEach(function (item, index) {

    let animation = gsap.to(item, {color: "black",x:3,y: -3, ease: "", duration:0.3, paused:true  })
    
    item.addEventListener("mouseenter", function() {
        animation.play()
    })
    item.addEventListener("mouseleave", function() {
        animation.reverse()
    })
})

#javascript #uuid #number

Random Number generator function

const uuid = () => {
  return Date.now().toString(36) + Math.random().toString(36).substr(2);
}

export default uuid;

#javascript

Replace URL's with Links

function replaceURLTextWithLink(text) {
 
            // Put the URL to variable $1 after visiting the URL
            const Rexp =/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g;
 
            // Replace the RegExp content by HTML element
            return text.replace(Rexp,
                "<a href='$1' target='_blank'>$1</a>");
}

#react.js #javascript

React - useContext

function MyPage() {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext.Provider value={theme}>
      <Form />
      <Button onClick={() => {
        setTheme('light');
      }}>
        Switch to light theme
      </Button>
    </ThemeContext.Provider>
  );
}

#javascript #php

Avia Layout Builder in custom post types (CPT)

// Avia Layout Builder in custom post types

function avf_alb_supported_post_types_mod( array $supported_post_types )
{
  $supported_post_types[] = 'case_studies';
  return $supported_post_types;
}
add_filter('avf_alb_supported_post_types', 'avf_alb_supported_post_types_mod', 10, 1);

function avf_metabox_layout_post_types_mod( array $supported_post_types )
{
 $supported_post_types[] = 'case_studies';
 return $supported_post_types;
}
add_filter('avf_metabox_layout_post_types', 'avf_metabox_layout_post_types_mod', 10, 1);

#javascript

Location <- Navigate

import { useLocation } from "react-router-dom";

const ProfileTwo = () => {
  const location = useLocation();
  const data = location.state;

  return (
    <div>
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
      Hello
    </div>
  );
};

export default ProfileTwo;

#javascript

Navigate JS -> Location

import { useNavigate } from "react-router-dom";

const ProfileOne = () => {
  const navigate = useNavigate();
  const data = { name: "John", age: 30 };

  const handleClick = () => {
    navigate("/profile-two", { state: data });
  };

  return <button onClick={handleClick}>Go to ProfileTwo</button>;
};

export default ProfileOne;

#react.js #javascript #nodejs

React Pagination

// importing
import ReactPaginate from 'react-paginate';

// handling the pagination
const [page, setPage] = useState(0);
const handlePageClick = (num) => {
  setPage(num);
};

// fetching all the employee details from the mongoDB database
const [loadedEmployees, setLoadedEmployees] = useState();
useEffect(() => {
  const fetchEmployees = async () => {
    try {
      const responseData = await sendRequest(
        `http://localhost:5000/api/employees/emp?page=${page}`
      );
      setLoadedEmployees(responseData.employees);
    } catch (err) {
      console.log("Error in fetching employees: "+err);
    }
  };
  fetchEmployees();
}, [sendRequest, page]);


// returning this component
<ReactPaginate
  containerClassName="flex gap-2 justify-center mt-4"
  pageClassName="text-gray-500"
  activeClassName="text-gray-900 border-2 border-black px-2"
  previousClassName="text-gray-500"
  nextClassName="text-gray-500"
  breakLabel="..."
  nextLabel="next >"
  onPageChange={(selected) => handlePageClick(selected.selected + 1)}
  pageRangeDisplayed={2}
  marginPagesDisplayed={1}
  pageCount={pageCount}
  previousLabel="< previous"
  renderOnZeroPageCount={null}
/>



// backend - controller methods
const getEmployeeCount = async (req, res, next) => {
  let employeeCount;
  try {
    employeeCount = await Employee.countDocuments();
  } catch (err) {
    const error = new HttpError(
      'Fetching employee count failed, please try again later.',
      500
    );
    return next(error);
  }

  res.json({ employeeCount });
  console.log("DEBUG -- Employee-Controller - Fetching employee count successful!");
};
const getEmployees = async (req, res, next) => {
  const page = req.query.page || 0;
  const employeesPerPage = 2; 

  let allEmployees;
  try {
    allEmployees = await Employee
      .find()
      .skip(page * employeesPerPage)
      .limit(employeesPerPage);
  } catch (err) {
    const error = new HttpError(
      'Fetching Employees failed, please try again later.',
      500
    );
    return next(error);
  }

  if (!allEmployees || allEmployees.length === 0) {
    return next(new HttpError('No employees found.', 404));
  }

  res.json({
    employees: allEmployees.map((emp) => emp.toObject({ getters: true })),
  });
  console.log("DEBUG -- Employee-Controller - Fetching employees successful!");
};

#html #css #javascript

Determine if an integer is a prime number

var number;
Console.WriteLine("Enter a number:");
number = Convert.ToInt32(Console.ReadLine());
if (IsPrime(number))
{
    Console.WriteLine("**" + number + " is a prime number**");
}
else
{
    Console.WriteLine("**" + number + " is not a prime number**");
}

public static bool IsPrime(int number)
{
    if (number <= 1) return false;
    if (number == 2) return true;
    if (number % 2 == 0) return false;
    var boundary = (int)Math.Floor(Math.Sqrt(number));
    for (int i = 3; i <= boundary; i += 2)
        if (number % i == 0)
            return false;
    return true;
}

#css #javascript

Container Query Button Animation 🤙

https://codepen.io/jh3y/pen/LYaWoRB

#javascript

Js for save status code

import axios from "axios"; //Check this for more information

const [user, SetUser] = useState({
  name = "",
  username = "",
  email = "",
});

const { name, username, email } = user;

const onInputChange = (e) => {
  setUser({ ...user, [e.target.name]: e.target.value }); //This will append info when type
}

const onSubmit = async (e) => {
  e.preventDefault(); //This will prevent showing info in url.
  await axios.post("https://localhost:8080/user") //Link to backend server
  //We use async and await here to guarantee get the data before submit.
};

<form onSubmit = {(e) => onSubmit(e)}>
  <input
	value={name}
	onChange={(e) => onInputChange(e)}
	/>
</form>

#javascript

Books in the Shelf

let shelf = ["Think and Grow Rich", "Four-Hour Work Week", "The Power of I AM", "Eat That Frog", "Harry Potter"];

#javascript

forms - CSS Input with width: 100% goes outside parent's bound - Stack Overflow

input[type=text],
input[type=password] {
    ...
    width: calc(100% - 20px);
}

#javascript

draw doughnut chart with animation in gradient colors using canvas

   <canvas id="my_canvas" width="250" height="250"></canvas>

//To draw the half circle with canvas
  var ctx = document.getElementById("my_canvas").getContext("2d");
  var al = 0;
  var start = 4.72;
  var cw = ctx.canvas.width;
  var ch = ctx.canvas.height;
  var diff;
  var counter = 0;
  var gradient = ctx.createLinearGradient(0, 0, 0, 250);
  gradient.addColorStop("0.0", "white");
  gradient.addColorStop("1.0", "#ae4e86");
  function progressSim() {
    diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2);
    counter = (al * 0.6).toFixed(0);
    $("#clock_text > span").text(counter);
    ctx.clearRect(0, 0, cw, ch);
    ctx.lineWidth = 55;
    ctx.strokeStyle = gradient;
    ctx.beginPath();
    ctx.arc(125, 130, 80, start, diff / 10 + start, false);
    ctx.stroke();
    if (al >= 50) {
      clearTimeout(sim);
      // Add scripting here that will run when progress completes
    }
    al++;
  }
  var sim = setInterval(progressSim, 30);
});

#javascript #limiter #truncatetext

Limits the amount of text

const truncate = (str, n) => {
  return str?.length > n ? str.substr(0, n - 1) + " ..." : str;
}

#solidity #javascript

emit

   function enterTransfer(address to) public payable {
     
    emit EnteredTransfer(block.timestamp, msg.sender, to, msg.value);
    
   }

#solidity #javascript

the anatomy of an event in Solidity

contract Transaction {
    event EnteredTransfer(
        uint256 indexed date,
        address from,
        address indexed to,
        uint256 value
    );
}

#javascript

Add or remove url parameter in javascript

function setUrlParam(param, value) {
    const url = new URL(window.location.href);
    url.searchParams.set(param, value);
    window.history.pushState({}, "", url);
}

function deleteUrlParam(param) {
    const url = new URL(window.location.href);
    url.searchParams.delete(param);
    window.history.pushState({}, "", url);
}

#javascript

The Pitfalls of Async/Await in JavaScript

https://blog.bitsrc.io/pitfalls-of-async-await-in-javascript-7c0678fbc282

#javascript

Bootstrap html snippet. Update user profile

<style>
body{
background:#f9f9fb;    
}
.view-account{
background:#FFFFFF; 
margin-top:20px;
}
.view-account .pro-label {
font-size: 13px;
padding: 4px 5px;
position: relative;
top: -5px;
margin-left: 10px;
display: inline-block
}

.view-account .side-bar {
padding-bottom: 30px
}

.view-account .side-bar .user-info {
text-align: center;
margin-bottom: 15px;
padding: 30px;
color: #616670;
border-bottom: 1px solid #f3f3f3
}

.view-account .side-bar .user-info .img-profile {
width: 120px;
height: 120px;
margin-bottom: 15px
}

.view-account .side-bar .user-info .meta li {
margin-bottom: 10px
}

.view-account .side-bar .user-info .meta li span {
display: inline-block;
width: 100px;
margin-right: 5px;
text-align: right
}

.view-account .side-bar .user-info .meta li a {
color: #616670
}

.view-account .side-bar .user-info .meta li.activity {
color: #a2a6af
}

.view-account .side-bar .side-menu {
text-align: center
}

.view-account .side-bar .side-menu .nav {
display: inline-block;
margin: 0 auto
}

.view-account .side-bar .side-menu .nav>li {
font-size: 14px;
margin-bottom: 0;
border-bottom: none;
display: inline-block;
float: left;
margin-right: 15px;
margin-bottom: 15px
}

.view-account .side-bar .side-menu .nav>li:last-child {
margin-right: 0
}

.view-account .side-bar .side-menu .nav>li>a {
display: inline-block;
color: #9499a3;
padding: 5px;
border-bottom: 2px solid transparent
}

.view-account .side-bar .side-menu .nav>li>a:hover {
color: #616670;
background: none
}

.view-account .side-bar .side-menu .nav>li.active a {
color: #40babd;
border-bottom: 2px solid #40babd;
background: none;
border-right: none
}

.theme-2 .view-account .side-bar .side-menu .nav>li.active a {
color: #6dbd63;
border-bottom-color: #6dbd63
}

.theme-3 .view-account .side-bar .side-menu .nav>li.active a {
color: #497cb1;
border-bottom-color: #497cb1
}

.theme-4 .view-account .side-bar .side-menu .nav>li.active a {
color: #ec6952;
border-bottom-color: #ec6952
}

.view-account .side-bar .side-menu .nav>li .icon {
display: block;
font-size: 24px;
margin-bottom: 5px
}

.view-account .content-panel {
padding: 30px
}

.view-account .content-panel .title {
margin-bottom: 15px;
margin-top: 0;
font-size: 18px
}

.view-account .content-panel .fieldset-title {
padding-bottom: 15px;
border-bottom: 1px solid #eaeaf1;
margin-bottom: 30px;
color: #616670;
font-size: 16px
}

.view-account .content-panel .avatar .figure img {
float: right;
width: 64px
}

.view-account .content-panel .content-header-wrapper {
position: relative;
margin-bottom: 30px
}

.view-account .content-panel .content-header-wrapper .actions {
position: absolute;
right: 0;
top: 0
}

.view-account .content-panel .content-utilities {
position: relative;
margin-bottom: 30px
}

.view-account .content-panel .content-utilities .btn-group {
margin-right: 5px;
margin-bottom: 15px
}

.view-account .content-panel .content-utilities .fa {
font-size: 16px;
margin-right: 0
}

.view-account .content-panel .content-utilities .page-nav {
position: absolute;
right: 0;
top: 0
}

.view-account .content-panel .content-utilities .page-nav .btn-group {
margin-bottom: 0
}

.view-account .content-panel .content-utilities .page-nav .indicator {
color: #a2a6af;
margin-right: 5px;
display: inline-block
}

.view-account .content-panel .mails-wrapper .mail-item {
position: relative;
padding: 10px;
border-bottom: 1px solid #f3f3f3;
color: #616670;
overflow: hidden
}

.view-account .content-panel .mails-wrapper .mail-item>div {
float: left
}

.view-account .content-panel .mails-wrapper .mail-item .icheck {
background-color: #fff
}

.view-account .content-panel .mails-wrapper .mail-item:hover {
background: #f9f9fb
}

.view-account .content-panel .mails-wrapper .mail-item:nth-child(even) {
background: #fcfcfd
}

.view-account .content-panel .mails-wrapper .mail-item:nth-child(even):hover {
background: #f9f9fb
}

.view-account .content-panel .mails-wrapper .mail-item a {
color: #616670
}

.view-account .content-panel .mails-wrapper .mail-item a:hover {
color: #494d55;
text-decoration: none
}

.view-account .content-panel .mails-wrapper .mail-item .checkbox-container,
.view-account .content-panel .mails-wrapper .mail-item .star-container {
display: inline-block;
margin-right: 5px
}

.view-account .content-panel .mails-wrapper .mail-item .star-container .fa {
color: #a2a6af;
font-size: 16px;
vertical-align: middle
}

.view-account .content-panel .mails-wrapper .mail-item .star-container .fa.fa-star {
color: #f2b542
}

.view-account .content-panel .mails-wrapper .mail-item .star-container .fa:hover {
color: #868c97
}

.view-account .content-panel .mails-wrapper .mail-item .mail-to {
display: inline-block;
margin-right: 5px;
min-width: 120px
}

.view-account .content-panel .mails-wrapper .mail-item .mail-subject {
display: inline-block;
margin-right: 5px
}

.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label {
margin-right: 5px
}

.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label:last-child {
margin-right: 10px
}

.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label a,
.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label a:hover {
color: #fff
}

.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label-color-1 {
background: #f77b6b
}

.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label-color-2 {
background: #58bbee
}

.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label-color-3 {
background: #f8a13f
}

.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label-color-4 {
background: #ea5395
}

.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label-color-5 {
background: #8a40a7
}

.view-account .content-panel .mails-wrapper .mail-item .time-container {
display: inline-block;
position: absolute;
right: 10px;
top: 10px;
color: #a2a6af;
text-align: left
}

.view-account .content-panel .mails-wrapper .mail-item .time-container .attachment-container {
display: inline-block;
color: #a2a6af;
margin-right: 5px
}

.view-account .content-panel .mails-wrapper .mail-item .time-container .time {
display: inline-block;
text-align: right
}

.view-account .content-panel .mails-wrapper .mail-item .time-container .time.today {
font-weight: 700;
color: #494d55
}

.drive-wrapper {
padding: 15px;
background: #f5f5f5;
overflow: hidden
}

.drive-wrapper .drive-item {
width: 130px;
margin-right: 15px;
display: inline-block;
float: left
}

.drive-wrapper .drive-item:hover {
box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
z-index: 1
}

.drive-wrapper .drive-item-inner {
padding: 15px
}

.drive-wrapper .drive-item-title {
margin-bottom: 15px;
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}

.drive-wrapper .drive-item-title a {
color: #494d55
}

.drive-wrapper .drive-item-title a:hover {
color: #40babd
}

.theme-2 .drive-wrapper .drive-item-title a:hover {
color: #6dbd63
}

.theme-3 .drive-wrapper .drive-item-title a:hover {
color: #497cb1
}

.theme-4 .drive-wrapper .drive-item-title a:hover {
color: #ec6952
}

.drive-wrapper .drive-item-thumb {
width: 100px;
height: 80px;
margin: 0 auto;
color: #616670
}

.drive-wrapper .drive-item-thumb a {
-webkit-opacity: .8;
-moz-opacity: .8;
opacity: .8
}

.drive-wrapper .drive-item-thumb a:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1
}

.drive-wrapper .drive-item-thumb .fa {
display: inline-block;
font-size: 36px;
margin: 0 auto;
margin-top: 20px
}

.drive-wrapper .drive-item-footer .utilities {
margin-bottom: 0
}

.drive-wrapper .drive-item-footer .utilities li:last-child {
padding-right: 0
}

.drive-list-view .name {
width: 60%
}

.drive-list-view .name.truncate {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}

.drive-list-view .type {
width: 15px
}

.drive-list-view .date,
.drive-list-view .size {
max-width: 60px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}

.drive-list-view a {
color: #494d55
}

.drive-list-view a:hover {
color: #40babd
}

.theme-2 .drive-list-view a:hover {
color: #6dbd63
}

.theme-3 .drive-list-view a:hover {
color: #497cb1
}

.theme-4 .drive-list-view a:hover {
color: #ec6952
}

.drive-list-view td.date,
.drive-list-view td.size {
color: #a2a6af
}

@media (max-width:767px) {
.view-account .content-panel .title {
    text-align: center
}
.view-account .side-bar .user-info {
    padding: 0
}
.view-account .side-bar .user-info .img-profile {
    width: 60px;
    height: 60px
}
.view-account .side-bar .user-info .meta li {
    margin-bottom: 5px
}
.view-account .content-panel .content-header-wrapper .actions {
    position: static;
    margin-bottom: 30px
}
.view-account .content-panel {
    padding: 0
}
.view-account .content-panel .content-utilities .page-nav {
    position: static;
    margin-bottom: 15px
}
.drive-wrapper .drive-item {
    width: 100px;
    margin-right: 5px;
    float: none
}
.drive-wrapper .drive-item-thumb {
    width: auto;
    height: 54px
}
.drive-wrapper .drive-item-thumb .fa {
    font-size: 24px;
    padding-top: 0
}
.view-account .content-panel .avatar .figure img {
    float: none;
    margin-bottom: 15px
}
.view-account .file-uploader {
    margin-bottom: 15px
}
.view-account .mail-subject {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}
.view-account .content-panel .mails-wrapper .mail-item .time-container {
    position: static
}
.view-account .content-panel .mails-wrapper .mail-item .time-container .time {
    width: auto;
    text-align: left
}
}

@media (min-width:768px) {
.view-account .side-bar .user-info {
    padding: 0;
    padding-bottom: 15px
}
.view-account .mail-subject .subject {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}
}

@media (min-width:992px) {
.view-account .content-panel {
    min-height: 800px;
    border-left: 1px solid #f3f3f7;
    margin-left: 200px
}
.view-account .mail-subject .subject {
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}
.view-account .side-bar {
    position: absolute;
    width: 200px;
    min-height: 600px
}
.view-account .side-bar .user-info {
    margin-bottom: 0;
    border-bottom: none;
    padding: 30px
}
.view-account .side-bar .user-info .img-profile {
    width: 120px;
    height: 120px
}
.view-account .side-bar .side-menu {
    text-align: left
}
.view-account .side-bar .side-menu .nav {
    display: block
}
.view-account .side-bar .side-menu .nav>li {
    display: block;
    float: none;
    font-size: 14px;
    border-bottom: 1px solid #f3f3f7;
    margin-right: 0;
    margin-bottom: 0
}
.view-account .side-bar .side-menu .nav>li>a {
    display: block;
    color: #9499a3;
    padding: 10px 15px;
    padding-left: 30px
}
.view-account .side-bar .side-menu .nav>li>a:hover {
    background: #f9f9fb
}
.view-account .side-bar .side-menu .nav>li.active a {
    background: #f9f9fb;
    border-right: 4px solid #40babd;
    border-bottom: none
}
.theme-2 .view-account .side-bar .side-menu .nav>li.active a {
    border-right-color: #6dbd63
}
.theme-3 .view-account .side-bar .side-menu .nav>li.active a {
    border-right-color: #497cb1
}
.theme-4 .view-account .side-bar .side-menu .nav>li.active a {
    border-right-color: #ec6952
}
.view-account .side-bar .side-menu .nav>li .icon {
    font-size: 24px;
    vertical-align: middle;
    text-align: center;
    width: 40px;
    display: inline-block
}
}
</style>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
    <div class="view-account">
        <section class="module">
            <div class="module-inner">
                <div class="side-bar">
                    <div class="user-info">
                        <img class="img-profile img-circle img-responsive center-block" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
                        <ul class="meta list list-unstyled">
                            <li class="name">Rebecca Sanders
                                <label class="label label-info">UX Designer</label>
                            </li>
                            <li class="email"><a href="#">Rebecca.S@website.com</a></li>
                            <li class="activity">Last logged in: Today at 2:18pm</li>
                        </ul>
                    </div>
            		<nav class="side-menu">
        				<ul class="nav">
        					<li class="active"><a href="#"><span class="fa fa-user"></span> Profile</a></li>
        					<li><a href="#"><span class="fa fa-cog"></span> Settings</a></li>
        					<li><a href="#"><span class="fa fa-credit-card"></span> Billing</a></li>
        					<li><a href="#"><span class="fa fa-envelope"></span> Messages</a></li>
        					
        					<li><a href="user-drive.html"><span class="fa fa-th"></span> Drive</a></li>
        					<li><a href="#"><span class="fa fa-clock-o"></span> Reminders</a></li>
        				</ul>
        			</nav>
                </div>
                <div class="content-panel">
                    <h2 class="title">Profile<span class="pro-label label label-warning">PRO</span></h2>
                    <form class="form-horizontal">
                        <fieldset class="fieldset">
                            <h3 class="fieldset-title">Personal Info</h3>
                            <div class="form-group avatar">
                                <figure class="figure col-md-2 col-sm-3 col-xs-12">
                                    <img class="img-rounded img-responsive" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
                                </figure>
                                <div class="form-inline col-md-10 col-sm-9 col-xs-12">
                                    <input type="file" class="file-uploader pull-left">
                                    <button type="submit" class="btn btn-sm btn-default-alt pull-left">Update Image</button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 col-sm-3 col-xs-12 control-label">User Name</label>
                                <div class="col-md-10 col-sm-9 col-xs-12">
                                    <input type="text" class="form-control" value="Rebecca">
                                </div>
                            </div>
        
                            <div class="form-group">
                                <label class="col-md-2 col-sm-3 col-xs-12 control-label">First Name</label>
                                <div class="col-md-10 col-sm-9 col-xs-12">
                                    <input type="text" class="form-control" value="Rebecca">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 col-sm-3 col-xs-12 control-label">Last Name</label>
                                <div class="col-md-10 col-sm-9 col-xs-12">
                                    <input type="text" class="form-control" value="Sanders">
                                </div>
                            </div>
                        </fieldset>
                        <fieldset class="fieldset">
                            <h3 class="fieldset-title">Contact Info</h3>
                            <div class="form-group">
                                <label class="col-md-2  col-sm-3 col-xs-12 control-label">Email</label>
                                <div class="col-md-10 col-sm-9 col-xs-12">
                                    <input type="email" class="form-control" value="Rebecca@website.com">
                                    <p class="help-block">This is the email </p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2  col-sm-3 col-xs-12 control-label">Twitter</label>
                                <div class="col-md-10 col-sm-9 col-xs-12">
                                    <input type="text" class="form-control" value="SpeedyBecky">
                                    <p class="help-block">Your twitter username</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2  col-sm-3 col-xs-12 control-label">Linkedin</label>
                                <div class="col-md-10 col-sm-9 col-xs-12">
                                    <input type="url" class="form-control" value="https://www.linkedin.com/in/lorem">
                                    <p class="help-block">eg. https://www.linkedin.com/in/yourname</p>
                                </div>
                            </div>
                        </fieldset>
                        <hr>
                        <div class="form-group">
                            <div class="col-md-10 col-sm-9 col-xs-12 col-md-push-2 col-sm-push-3 col-xs-push-0">
                                <input class="btn btn-primary" type="submit" value="Update Profile">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
</div>

#javascript

Javascript: Print PDF directly having URL

function printPDFfromURL(pdf) { 
	var iframe = document.createElement('iframe');
	iframe.style.display = 'none';
	document.body.appendChild(iframe);

	iframe.onload = function() {
		iframe.contentWindow.print();
		setTimeout(()=>{
			iframe.remove()
		}, 60000);
	};
	iframe.src = pdf;
}

//use:
//  printPDFfromURL("http://localhost/path_pdf.pdf");

#javascript

What is FLoC? | Articles | web.dev

const { id, version } = await document.interestCohort();
console.log('FLoC ID:', id);
console.log('FLoC version:', version);

#javascript

apollo-client GraphQL in nextJS

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

// Initialize Apollo Client
const client = new ApolloClient({
  uri: 'http://localhost:4000/GraphiQL',
  cache: new InMemoryCache(),
});

// GraphQL query
const GET_BOOKS = gql`
  query {
  getBook(id: 6) {
    author
    name
  }
  getAllBooks {
    name
  }
  bookInfo(id:"book1"){
  name
  author
  }
}
`;

// Function to fetch data
export async function getBooks() {
  const { data } = await client.query({
    query: GET_BOOKS,
  });
  return data;
}


// GraphQL mutation
const CREATE_BOOKS = gql`
mutation{
  createBook(author: "mohsin khan", name: "allah akbar"){
 author
 name
 id
}
}
`;

// Function to fetch data
export async function getBooks() {
  const { data } = await client.mutate({
    mutation: CREATE_BOOKS,
  });
  return data;
}


// call this in page.js

import { getBooks } from './apollo-client';

const graphql = () => {
  getBooks().then((data) => {
    console.log(data);
  });
}

graphql()

#swift #javascript #kotlin #mysql

Web3 Development Company | Web3 Development Services

https://www.dappfort.com/

#javascript

Deprecating and removing Web SQL | Blog | Chrome for Developers

openDatabase(
  // Name
  &#39;mydatabase&#39;,
  // Version
  1,
  // Display name
  &#39;mydatabase&#39;,
  // Estimated size
  5000000,
  // Creation callback
  function (db) {
    db.transaction(
      // Transaction callback
      function (tx) {
        // Execute SQL statement
        tx.executeSql(
          // SQL statement
          &#39;create table rainstorms (mood text, severity int)&#39;,
          // Arguments
          [],
          // Success callback
          function () {
            // Execute SQL statement
            tx.executeSql(
              // SQL statement
              &#39;insert into rainstorms values (?, ?)&#39;,
              // Arguments
              [&#39;somber&#39;, 6],
              // Success callback
              function () {
                // Execute SQL statement
                tx.executeSql(
                  // SQL statement
                  &#39;select * from rainstorms where mood = ?&#39;,
                  // Arguments
                  [&#39;somber&#39;],
                  // Success callback
                  function (tx, res) {
                    // Do something with the result
                    var row = res.rows.item(0);
                    console.log(
                      &#39;rainstorm severity: &#39; +
                        row.severity +
                        &#39;,  my mood: &#39; +
                        row.mood,
                    );
                  },
                );
              },
            );
          },
        );
      },
      // Error callback
      function (err) {
        console.log(&#39;Transaction failed!: &#39; + err);
      },
      // Success callback);
      function () {
        console.log(&#39;Transaction succeeded!&#39;);
      },
    );
  },
);

#html #css #javascript

Progress Bar with Html+CSS+JS

//HTML

<div id="progress-bar"></div>



//CSS

#progress-bar {
  height: 5px;
  background-color: grey;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}




//JS

const progressBar = document.getElementById('progress-bar');

window.addEventListener('scroll', function() {
  const scrollTop = window.scrollY;
  const documentHeight = document.documentElement.scrollHeight;
  const windowHeight = window.innerHeight;
  const progress = scrollTop / (documentHeight - windowHeight);
  progressBar.style.width = `${progress * 100}%`;
});

#react.js #javascript #css

React pass parameter from child --> parent

// ParentComponent.js:


import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [parameterFromChild, setParameterFromChild] = useState('');

  // Callback function to receive the parameter from the child
  const handleChildParameter = (parameter) => {
    setParameterFromChild(parameter);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      
      {/* Render ChildComponent and pass the callback function as a prop */}
      <ChildComponent onParameterChange={handleChildParameter} />

      {/* Display the parameter received from the child */}
      {parameterFromChild && (
        <p>Parameter received from child: {parameterFromChild}</p>
      )}
    </div>
  );
};

export default ParentComponent;




//ChildComponent.js:
import React, { useState } from 'react';

const ChildComponent = ({ onParameterChange }) => {
  const [childParameter, setChildParameter] = useState('');

  const handleButtonClick = () => {
    // Update the childParameter state
    setChildParameter('Hello from ChildComponent!');
    
    // Invoke the callback function in the parent with the parameter
    onParameterChange('Hello from ChildComponent!');
  };

  return (
    <div>
      <h2>Child Component</h2>

      <button onClick={handleButtonClick} className="bg-blue-500 text-white px-4 py-2">
        Click me
      </button>
    </div>
  );
};

export default ChildComponent;

#javascript

How do I write an extension method in JavaScript? - Stack Overflow

Object.defineProperty(String.prototype, "SayHi", {
    value: function SayHi() {
        return "Hi " + this + "!";
    },
    writable: true,
    configurable: true
});

console.log("Charlie".SayHi());

#javascript

Number of Words in After Effects

function getNumWords( string ) {

  // Split the string where there is spaces, then count the array length
  return string.split( ' ' ).length
}

#javascript #dummy

dummy id

function getRandom10CharString() {
    const timestamp = Date.now().toString(36); // Convert timestamp to base 36
    const randomString = Math.random().toString(36).substr(2); // Generate a random base 36 string
    const combinedString = timestamp + randomString; // Combine the two strings
    return combinedString.substr(0, 10); // Return the first 10 characters
}

console.log(getRandom10CharString());

#javascript #array #dummy

Dummy array - list items

 <ul className='rating'>
    {Array.from({ length: 10 }, (_, i) => (
      <li key={`rating-${i + 1}`}>
        <input
          type='radio'
          id={`num${i + 1}`}
          name='rating'
          value={i + 1}
          onChange={handleChange}
          checked={selected === i + 1}
        />
        <label htmlFor={`num${i + 1}`}>{i + 1}</label>
      </li>
    ))}
  </ul>

#seo #javascript #js #google #serp

Extract Title Terms from Google

// Variable 'search' initialized with the string that will be used for the Google search
let search = "Google * and SEO";

// Replace the first space character in the 'search' string with a plus sign
let searchQ = search.replace(' ', '+').trim();
// Construct the Google search URL using the modified 'searchQ' string and setting the results limit to 1000
let searchUrl = `https://www.google.com/search?q=%22${searchQ}%22&num=1000`;

// URL to a raw list of English stop words from the NLTK library hosted on GitHub
let stopwordsUrl = "https://gist.githubusercontent.com/sebleier/554280/raw/7e0e4a1ce04c2bb7bd41089c9821dbcf6d0c786c/NLTK's%20list%20of%20english%20stopwords";

// Initialize 'stopWords' as a Set to store unique stop words
let stopWords = new Set();

// Asynchronously fetch the list of stopwords from the provided URL
fetch(stopwordsUrl)
  .then(response => {
    // Check if the network response is ok; otherwise throw an error
    if (!response.ok) throw new Error('Network response was not ok');
    return response.text(); // Return the response text (stop words) to be processed
  })
  .then(stopwordsData => {
    // Split the stopwords data by newlines and add each trimmed word to the 'stopWords' Set
    stopwordsData.split(/\n/).forEach(word => stopWords.add(word.trim()));
    return fetch(searchUrl); // Fetch the Google search results next
  })
  .then(response => {
    // Check if the network response is ok; otherwise throw an error
    if (!response.ok) throw new Error('Network response was not ok');
    return response.text(); // Return the search HTML to be processed
  })
  .then(data => {
    // Parse the returned HTML string into a DOM Document object
    let _htmlDoc = new DOMParser().parseFromString(data, "text/html");

    // Define a threshold percentile for word frequency analysis
    const bottomPercentile = 0.98;

    // Process and filter h3 text content from the Google search results
    let processedTexts = Array.from(_htmlDoc.querySelectorAll('h3')).map(h3 => 
      h3.textContent.trim().toLowerCase() // Remove whitespace, convert to lower case
      .replace(/[^\w\s]|_/g, "") // Remove punctuation and underscores
      .split(/\s+/).filter(word => !stopWords.has(word)) // Split into words and filter out stop words
    );

    // Count the frequency of each word across all h3 elements
    let wordCounts = processedTexts.flatMap(words => words).reduce((acc, word) => {
        acc[word] = (acc[word] || 0) + 1; // Increment word count or initialize it to 1
        return acc;
    }, {});

    // Sort the frequencies to determine the threshold for common words
    let sortedCounts = Object.values(wordCounts).sort((a, b) => a - b);
    let thresholdIndex = Math.floor(sortedCounts.length * bottomPercentile);
    let thresholdValue = sortedCounts[thresholdIndex];

    // Filter out the words that are more frequent than the threshold
    let frequentWords = new Set(Object.keys(wordCounts).filter(word => wordCounts[word] > thresholdValue));

    // Reconstruct texts by removing the frequent words and ensure they are more than single words
    let reconstructedText = new Set(processedTexts
      .map(words => words.filter(word => !frequentWords.has(word)).join(' '))
      .filter(text => text.split(' ').length > 1));

    // Log each reconstructed text to the console
    reconstructedText.forEach(text => console.log(text));
  })
  .catch(error => console.error('Fetch error:', error)); // Catch and log any errors during the fetch process

#css #javascript

Pointer proximity following glow border ✨

https://codepen.io/jh3y/pen/QWYPaax

#javascript

JS Notes

Math.ceil();
Math.floor();
Math.sqrt();

// Array Length
arrayName.length 

// Push & POP

var myList = ["item1","item2","item3","item4"];

myList.push("item4"); // first
myList.unshift("item0"); // Last

var lastElement = myList.pop(); // first
var firstElement = myList.shift(); // last

// Splice & Slice

var list = [
  "saturday", // 0 = -7
  "sunday", // 1 = -6
  "monday", // 2 = -5
  "tuesday", // 3 = -4
  "wednesday", // 4 = -3
  "thursday", // 5 = -2
  "friday", // 6 = -1
];

var portion = list.slice(2, 5);
console.log(portion);

slice(startingIndex, afterEndingIndex)
splice(startingIndex, numberOfElement)

// shallow copy
// deep copy

// Marge Array - concat()

var list1 =[];
var list2 =[];
var list3 =[];

var list4 = list1.concate(list2);
var list = list1.concate(list2,list3);
var list = [].concate(list1,list2,list3);

// Array Sorting - Number

var list = [
  5,4,18,44,9,4,78,1,68,49,71,7,74
];

var length = list.length-1;

for(var i=0; i<length; i++) {
  for(var j=0; j<length; j++) {
    if(list[j] > list[j+1]) {
      [ list[j], list[j+1] ] = [ list[j+1], list[j] ];
    }
  }
}
console.log(list);

// Split and Join

#javascript

VALIDATE 2 DATES LIE BETWEEN 2 DATES OR NOT || OVERLAPPING CASE ALSO

/**
 * /**
 *@NApiVersion 2.1
 *@NScriptType ClientScript
 */
define(["N/format", "N/search"], function (format, search) {
  validateLine = (context) => {
    try {
      var recObj = context.currentRecord;
      var returnValue = true;
      var alertMessage;

      if (context.sublistId == "recmachcustrecord_hcg_employee3") {
        //get current start and end date, and compare with all the lines start and end date wether it line between those date or not
        var CurrentLineIndex = recObj.getCurrentSublistIndex({
          sublistId: "recmachcustrecord_hcg_employee3",
        });

        log.debug("CurrentLineIndex", CurrentLineIndex);

        var currentLineStartDate = recObj.getCurrentSublistValue({
          sublistId: "recmachcustrecord_hcg_employee3",
          fieldId: "custrecord_hcg_start_date6",
        }); //get current start date

        var currentLineEndDate = recObj.getCurrentSublistValue({
          sublistId: "recmachcustrecord_hcg_employee3",
          fieldId: "custrecord_hcg_end_date6",
        }); //get current end date

        log.debug("current currentLineStartDate ", currentLineStartDate + " currentLineEndDate " + currentLineEndDate);

        var currentLineStartDate = new Date(currentLineStartDate);
        var currentLineEndDate = new Date(currentLineEndDate);

        log.debug("current currentLineStartDate ", currentLineStartDate + " currentLineEndDate " + currentLineEndDate);

        var lineCount = recObj.getLineCount({
          sublistId: "recmachcustrecord_hcg_employee3",
        });
        log.debug("lineCount", lineCount);

        for (var i = 0; i < lineCount; i++) {
          if (i != CurrentLineIndex) {
            //current editing index should not be compared. else it would be comparing same index values that would satisfy the condition.
            log.debug("inside loop i=", i);
            var startDateLine = recObj.getSublistValue({
              sublistId: "recmachcustrecord_hcg_employee3",
              fieldId: "custrecord_hcg_start_date6",
              line: i,
            }); //get start date of line

            var endDateLine = recObj.getSublistValue({
              sublistId: "recmachcustrecord_hcg_employee3",
              fieldId: "custrecord_hcg_end_date6",
              line: i,
            }); //get end date of line

            startDateLine = new Date(startDateLine);
            endDateLine = new Date(endDateLine);

            log.debug("startDateLine ", startDateLine + " endDateLine " + endDateLine);

            //if current start date and current end date  is in between the existing startDateLine and endDateLine then give alert
            if (
              (currentLineStartDate >= startDateLine && currentLineEndDate <= endDateLine) || //current start date and current end date lies between any already present start date and end date.
              (currentLineStartDate >= startDateLine && currentLineStartDate <= endDateLine) || //Current start date lies between any already present start and end date.(this means date is overlapping)
              (currentLineEndDate >= startDateLine && currentLineEndDate <= endDateLine) // Current end date lies between any already present start and end date.(this means date is overlapping)
            ) {
              //|| (currentLineEndDate >= startDateLine && currentLineEndDate <= endDateLine)
              log.debug("condition matched");
              returnValue = false;
              alertMessage = "Start Date and End Date should not be between the existing date range";

              alert(alertMessage);

              break;
            }
          }
        }

        return returnValue;
      }
    } catch (error) {
      log.error("error in validate line =", error);
    }
  };

  return {
    validateLine: validateLine,
  };
});

#javascript

Javascript: Wait until all rendered

document.onreadystatechange = function () {
  if (document.readyState === "complete") {
    // Here fire whatever you want when all rendered
  }
}

#javascript #basicjs

JavaScript Short Circuit Operators Explained: &&, ||, ??

https://www.youtube.com/watch?v

#javascript #basicjs

if else in one line

${true ? "this part run when true" : "this part run when false" }

#javascript

netsuite - Call Suitelet from User Event SS 2 - Stack Overflow

// in UE script, make sure you resolve properly the suitlet external URL:
var suitletURL = url.resolveScript({
        scriptId: 'customscript_your_suitlet_scriptid',
        deploymentId: 'customdeploy_your_suitlet_deploymentid',
        returnExternalUrl: true
});

var response = https.post({
        url : suitletURL,
        headers : myHeaders,
        body : myBody
});

#mailgun #javascript #nodejs

How to Send Email using Mailgun API in Node.js ? - GeeksforGeeks

https://www.geeksforgeeks.org/how-to-send-email-using-mailgun-api-in-node-js/

#javascript

Express - GET route

const express = require('express');
const app = express();

// Our first foute
app.get('/home', (request, response, next) => {
  console.log(request);
  response.send('<h1>Welcome Ironhacker. :)</h1>');
});

// Start the server
app.listen(3000, () => console.log('My first app listening on port 3000! '));

#javascript

Counter example

// ./src/components/Counter.jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div className="Counter">
      <h2>Counter</h2>

      <p>You clicked {count} times</p>

      <button onClick={() => setCount((prevCount) => prevCount - 1)}> - </button>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}> + </button>
    </div>
  );
}

export default Counter;

#javascript

.fetch()

// index.js

fetch("https://api.spacexdata.com/v4/launches")
  .then((response) => { 
    return response.json();
  })
  .then((data) => {
    console.log("Parsed response: ", data);
  })
  .catch( (err) => console.log(err));

// 
// index.js

fetch("https://api.spacexdata.com/v4/launches")
  .then((response) => response.json())
  .then((data) => {

  data.forEach((launchObj) => {
    const patchImage = launchObj.links.patch.small;
    const imgElement = document.createElement("img");

    imgElement.setAttribute("src", patchImage);
    imgElement.setAttribute("width", 200);
    document.body.appendChild(imgElement);
  });

}).catch((err) => console.log(err));

#javascript

How to properly enqueue jQuery in a WordPress Site - ThePixelPixie

function my_scripts() {
     if(!is_admin() {
          wp_deregister_script('jquery');
          wp_enqueue_script('jquery', '//code.jquery.com/jquery-latest.min.js');
     }
}
add_action('wp_enqueue_scripts', 'my_scripts');

#javascript

Sorting, epoch convert, epoch range

//To sort string 
Array.sort((a, b) => ("" + a).localeCompare(b, undefined, { numeric: true }));
//----------------------------------------------------
//To sort numbers
Array.sort((a,b) => a - b)

//----------------------------------------------------
//Convert epoch time to day - month - year
function convertEpochToDMY(epoch) {
    let date = new Date(epoch * 1000); 
    let day = date.getDate();
    let month = date.getMonth() + 1; 
    let year = date.getFullYear();
    day = day < 10 ? '0' + day : day;
    month = month < 10 ? '0' + month : month;

    return day + '-' + month + '-' + year;
}
//----------------------------------------------------
//this takes the start and end epoch val and gives out array of months 
function monthArray(start, end) {
  const arr = [];
  let dt = new Date(start);
  while (dt <= end) {
    arr.push(dt.toLocaleString("en-US", { month: "short" }));
    dt.setMonth(dt.getMonth() + 1);
  }
  return arr;
} // output [Dec, Jan]

//----------------------------------------------
const monthNames = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
];

//function getMonthNames(startMonth, endMonth) {
//  let result = [];
//  for (let i = startMonth; i <= endMonth; i++) {
//    result.push({ label: monthNames[i - 1], value: i });
//  }
//  return result;
// }
// this takes start and end month nos and gives list range of months
function getMonthNames(startMonth, endMonth) {
  let result = [];
  let month = startMonth;

  while (true) {
    result.push({ label: monthNames[month - 1], value: month });
    if (month === endMonth) {
      break;
    }
    month = (month % 12) + 1;
  }
  const sortedRes = result.sort((a, b) => (a.value - b.value) * -1);

  return sortedRes;
}
//---------------------------------------------------

#javascript

Billion Million Thousand Convert

export function convertToBMK(input) {
  return Math.abs(Number(input)) >= 1.0e9
    ? (Math.abs(Number(input)) / 1.0e9).toFixed(2) + " B"
    : Math.abs(Number(input)) >= 1.0e6
    ? (Math.abs(Number(input)) / 1.0e6).toFixed(2) + " M"
    : Math.abs(Number(input)) >= 1.0e3
    ? (Math.abs(Number(input)) / 1.0e3).toFixed(2) + " K"
    : Math.abs(Number(input));

#javascript

slick - the last carousel you'll ever need

// To use lazy loading, set a data-lazy attribute
// on your img tags and leave off the src

<img data-lazy="img/lazyfonz1.png"/>

$('.lazy').slick({
  lazyLoad: 'ondemand',
  slidesToShow: 3,
  slidesToScroll: 1
});

#javascript

Дата и время

let now = new Date();
alert( now ); // показывает текущие дату и время

#javascript

Дата и время

let now = new Date();
alert( now ); // показывает текущие дату и время

#javascript

Javascript: Change object property position

var obj = {
  x: 45,
  b: {
    func: function(){alert('a')},
    name: "b"
  },
  a: "prueba"
};

var nw = moveProp(obj, "a", "x"); //-- move 'a' to position of 'x'
console.log(nw, obj);


//--

function moveProp(obj, moveKey, toKey){
  var temp = Object.assign({}, obj)
  var tobj;
  var resp = {};

  tobj = temp[moveKey];
  delete temp[moveKey];
  for(var prop in temp){
    if (prop===toKey) resp[moveKey] = tobj;
    resp[prop] = temp[prop]; 
  }
  return resp;
}

#javascript

FirebirdSQL 2.x: DATE_TO_CHAR Procedure (like Oracle's TO_CHAR)

CREATE OR ALTER PROCEDURE DATE_TO_CHAR(TDATE TIMESTAMP, FORMAT VARCHAR(100)) RETURNS (
	RESULT VARCHAR(100)
)
AS
DECLARE SDATE VARCHAR(100);
DECLARE DD VARCHAR(2);
DECLARE MM VARCHAR(2);
DECLARE YY VARCHAR(4);
DECLARE HH VARCHAR(2);
DECLARE MI VARCHAR(2);
DECLARE SS VARCHAR(2);
DECLARE ZZZ VARCHAR(3);
DECLARE XFORMAT VARCHAR(100);
DECLARE AM VARCHAR(2);
BEGIN
	XFORMAT = UPPER(FORMAT);
	SDATE = CAST(TDATE AS VARCHAR(100));
	YY = SUBSTRING(SDATE FROM 1 FOR 4);
	MM = SUBSTRING(SDATE FROM 6 FOR 2);
	DD = SUBSTRING(SDATE FROM 9 FOR 2);
	HH = SUBSTRING(SDATE FROM 12 FOR 2);
	MI = SUBSTRING(SDATE FROM 15 FOR 2);
	SS = SUBSTRING(SDATE FROM 18 FOR 2);
	ZZZ = SUBSTRING(SDATE FROM 21 FOR 3);

	XFORMAT = REPLACE(XFORMAT, 'YYYY', YY);
	XFORMAT = REPLACE(XFORMAT, 'MM', MM);
	XFORMAT = REPLACE(XFORMAT, 'DD', DD);
	XFORMAT = REPLACE(XFORMAT, 'YY', SUBSTRING(YY FROM 3 FOR 2));
	XFORMAT = REPLACE(XFORMAT, 'HH24', HH);

	AM = 'AM';

	IF (HH='12') THEN
	BEGIN
		AM = 'M';
		IF (MI > '00') THEN 
		BEGIN
			AM='PM';
		END
	END
	
	IF (HH='00') THEN 
	BEGIN
		HH='12';
		AM='AM';
	END
	
	IF (HH>'12') THEN
	BEGIN
		HH = TRIM(CAST(CAST(HH AS INTEGER)-12 AS VARCHAR(2)));
		IF (CHAR_LENGTH(HH)<2) THEN 
		BEGIN
			HH='0'||HH;
		END
		AM='PM';
	END
	XFORMAT = REPLACE(XFORMAT, 'HH12', HH);
	XFORMAT = REPLACE(XFORMAT, 'HH', HH);
	XFORMAT = REPLACE(XFORMAT, 'MI', MI);
	XFORMAT = REPLACE(XFORMAT, 'SS', SS);
	XFORMAT = REPLACE(XFORMAT, 'ZZZ', ZZZ);

	RESULT = XFORMAT;
	SUSPEND;
END;

#javascript

Basic Web Server

const http = require('http');
const path = require('path');
const fs = require('fs');
const fsPromises = require('fs').promises;
const EventEmitter = require('events');
const logEvents = require('./logEvents'); // custom module

// define the web server port
const PORT = process.env.PORT || 3500;

// event emitter will listen for events and log them to corresponding files
const myEmitter = new EventEmitter();
myEmitter.on('log', (msg, fileName) => logEvents(msg, fileName));


// function that will serve the file (response)
const serveFile = async (filePath, contentType, response) => {
  try {
    const rawData = await fsPromises.readFile(
      filePath, 
      !contentType.includes('image') ? 'utf8' : ''
    );
    const data = contentType === 'application/json' 
      ? JSON.parse(rawData) : rawData;
    response.writeHead(
      filePath.includes('404.html') ? 404 : 200, 
      {'Content-Type': contentType}
    );
    response.end(
      contentType === 'application/json' ? JSON.stringify(data) : data
    );
  } catch (err) {
    console.log(err);
    myEmitter.emit('log', `${err.name}: ${err.message}`, 'errLog.txt');
    response.statusCode = 500; // internal server error
    response.end();
  }
}
// create and configure the server
const server = http.createServer((req, res) => {
  console.log(req.url, req.method);
  myEmitter.emit('log', `${req.url}\t${req.method}`, 'reqLog.txt');

  // store file extension of the request url
  const extension = path.extname(req.url);

  let contentType;

  // manage contentType according to file extension of the url
  switch (extension) {
    case '.css':
      contentType = 'text/css';
      break;
    case '.js':
      contentType = 'text/javascript';
      break;
    case '.json':
      contentType = 'application/json';
      break;
    case '.jpg':
      contentType = 'image/jpeg';
      break;
    case '.png':
      contentType = 'image/png';
      break;
    case '.txt':
      contentType = 'text/plain';
      break;
    default:
      contentType = 'text/html';
  }

  let filePath =
    contentType === 'text/html' && req.url === '/'
      ? path.join(__dirname, 'views', 'index.html')
      : contentType === 'text/html' && req.url.slice(-1) === '/' // if last character in url is '/'
        ? path.join(__dirname, 'views', req.url, 'index.html') // req.url will specify the subdir
        : contentType === 'text/html' // if req.url is not a slash and last char not a slash
          ? path.join(__dirname, 'views', req.url) // just look for url in the views folder
          : path.join(__dirname, req.url); // if url not in views, just use req.url

  // makes .html extension not required int the browser
  if (!extension && req.url.slice(-1) !== '/') filePath += '.html';

  // serve the file if it exists
  const fileExists = fs.existsSync(filePath);
  if (fileExists) {
    serveFile(filePath, contentType, res);
  } 
  // if file does not exist, response will vary
  else {
    switch (path.parse(filePath).base) {
      case 'old-page.html':
        res.writeHead(301, {'Location': 'new-page.html'}); // redirect to new page
        res.end(); // end the response
        break;
      case 'www-page.html':
        res.writeHead(301, {'Location': '/'}); // redirect to root page
        res.end(); // end the response
        break;
      default:
        // serve a 404 response
        serveFile(path.join(__dirname, 'views', '404.html'), 'text/html', res);
    };
    // https://nodejs.org/api/path.html#pathparsepath
  }
});

server.listen(PORT, () => console.log(`Server running and listening on port ${PORT}`));

#javascript

HampLoanerAjaxUtils

var HampLoanerAjaxUtils = Class.create();
HampLoanerAjaxUtils.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {
	validateDates: function() {
		var MAX_MONTHS_START_DATE = 3; // Allow reservations with start date within 3 months
		var MAX_MONTHS_RETURN_DATE = 6; // Allow reservations with return date within 6 months from start date

		var startDateUserFormat = this.getParameter('sysparm_startdate');
		var startDate = HAMUtils.getDateInInternalFormat(startDateUserFormat);

		var returnDateUserFormat = this.getParameter('sysparm_returndate');
		var returnDate = HAMUtils.getDateInInternalFormat(returnDateUserFormat);

		var gDate = new GlideDateTime();
		var currentDate = gDate.getLocalDate();
		var res = {};
		var sdt;
		if (!gs.nil(startDate)) {
			sdt = new GlideDateTime(startDate);
			var cdt = new GlideDateTime(currentDate);
			var maxsdt = new GlideDateTime(currentDate);
			maxsdt.addMonthsUTC(MAX_MONTHS_START_DATE);
			if (sdt.before(cdt)) {
				res.isStartDateValid = false;
				res.startDateErrorMsg = gs.getMessage(
					'{0} is not valid. Select a start date on or after current date', [startDate]
				);
			} else if (sdt.after(maxsdt)) {
				res.isStartDateValid = false;
				res.startDateErrorMsg = gs.getMessage(
					'{0} is not valid. Select a start date within {1} months from current date',
					[startDate, String(MAX_MONTHS_START_DATE)]
				);
			} else {
				res.isStartDateValid = true;
			}
		}
		if (!gs.nil(returnDate)) {
			sdt = new GlideDateTime(startDate);
			var rdt = new GlideDateTime(returnDate);
			var maxrdt = new GlideDateTime(startDate);
			maxrdt.addMonthsUTC(MAX_MONTHS_RETURN_DATE);
			if (rdt.onOrBefore(sdt)) {
				res.isReturnDateValid = false;
				res.returnDateErrorMsg = gs.getMessage(
					'{0} is not valid. Select a return date after the selected start date', [returnDate]
				);
			} else if (rdt.after(maxrdt)) {
				res.isReturnDateValid = false;
				res.returnDateErrorMsg = gs.getMessage(
					'{0} is not valid. Select a return date within {1} months from the selected start date',
					[returnDate, String(MAX_MONTHS_RETURN_DATE)]
				);
			} else {
				res.isReturnDateValid = true;
			}
		}
		return JSON.stringify(res);
	},
	isLoanerModelsExist: function () {
		var location = this.getParameter('sysparm_location');
		if (!gs.nil(this.getParameter('sysparm_model'))) {
			var model = this.getParameter('sysparm_model');
			if (new sn_hamp.HampLoanerUtils().isLoanerAssetExist(location, model)) {
				return 'yes';
			}
		}
		if (new sn_hamp.HampLoanerUtils().isLoanerAssetExist(location)) {
			return 'modelNotPresent';
		}
		return 'noLoanerModels';
	},
	isLoanerAssetAvailable: function () {
		var model = this.getParameter('sysparm_model');
		var location = this.getParameter('sysparm_location');
		var startDateUserFormat = this.getParameter('sysparm_start_date');
		var returnDateUserFormat = this.getParameter('sysparm_return_date');
		var leadTimeInDays = this.getParameter('sysparm_lead_time');

		var startDate = HAMUtils.getDateInInternalFormat(startDateUserFormat);
		var returnDate = HAMUtils.getDateInInternalFormat(returnDateUserFormat);

		var isLoanerAssetAvailable = new sn_hamp.HAMAssetReservationUtils().isLoanerAssetAvailableBetweenDates(
			model,
			location,
			startDate,
			returnDate,
			leadTimeInDays
		);

		var message = '';
		if (!isLoanerAssetAvailable) {
			message = gs.getMessage(
				'There are no loaner assets available for this time period. If you choose to submit, your request will join a waitlist.' // eslint-disable-line
			);
		}

		return JSON.stringify({
			isAvailable: isLoanerAssetAvailable,
			message: message,
		});
	},
	getLoanerOrder: function() {
		var sysId = this.getParameter('sysparm_loaner');
		var loanerId;
		var tableName = this.getParameter('sysparm_table');
		if (tableName === sn_hamp.HampLoanerUtils.LOANER_TASK_TABLE) {
			loanerId = new global.GlideQuery(sn_hamp.HampLoanerUtils.LOANER_TASK_TABLE)
				.withAcls()
				.where('sys_id', sysId)
				.select('loaner_order')
				.toArray(1);
			loanerId = loanerId[0].loaner_order;
		} else {
			loanerId = sysId;
		}
		var response = new global.GlideQuery(sn_hamp.HampLoanerUtils.LOANER_ORDER_TABLE)
			.withAcls()
			.where('sys_id', loanerId)
			.selectOne('asset.sys_id', 'asset.display_name', 'asset_stockroom')
			.get();
		return JSON.stringify(response);
	},
	type: 'HampLoanerAjaxUtils',
});

#javascript

HampLoanerUtils

var HampLoanerUtils = Class.create();
HampLoanerUtils.prototype = {
	initialize: function () { },
	getModelsWithLoanerAssets: function (location) {
		var filter;
		var modelsarray = [];
		var assetsGa = new GlideAggregate('alm_asset');
		HampLoanerUtils.addLoanerBaseQuery(assetsGa, location);
		assetsGa.addQuery('install_status', 'NOT IN', HampLoanerUtils.ASSET_IN_USE_STATUSES);
		assetsGa.addQuery('excluded_from_ham', false);
		assetsGa.setGroup(true);
		assetsGa.groupBy('model.sys_id');
		assetsGa.query();
		while (assetsGa.next()) {
			modelsarray.push(assetsGa.getValue('model.sys_id'));
		}
		var loanerOrdersGa = new GlideAggregate(HampLoanerUtils.LOANER_ORDER_TABLE);
		HampLoanerUtils.addInUseFunctioningAssetsQuery(loanerOrdersGa, location, '');
		loanerOrdersGa.setGroup(true);
		loanerOrdersGa.groupBy('model.sys_id');
		loanerOrdersGa.query();
		while (loanerOrdersGa.next()) {
			modelsarray.push(loanerOrdersGa.getValue('model.sys_id'));
		}
		if(HAMUtils.HAS_ONLY_TNI_ENTITLEMENT) {
			var filteredModels = HAMUtils.filterOutNonTNIModels(modelsarray);
			filter = 'sys_idIN' + filteredModels;
		}
		else {
			filter = 'sys_idIN' + modelsarray;
		}
		return filter;
	},
	getAllLoanerAssetsOfStockroom: function (stockroomGr) {
		var assets = [];
		assets = assets.concat(this.getAllLoanerAssetsInStockroom(stockroomGr));
		assets = assets.concat(this.getAllInUseLoanerAssetsOfAStockroom(stockroomGr));
		return assets;
	},
	getAllLoanerAssetsInStockroom: function (stockroomGr) {
		var eamModelExt = HAMUtils.getEAMModelClasses();
		var eamAssetExt = HAMUtils.getEAMAssetClasses();
		var assetsGa = new GlideAggregate('alm_asset');
		assetsGa.addQuery('asset_function', 'loaner');
		assetsGa.addQuery('stockroom', stockroomGr.getUniqueValue());
		// Exclude EAM assets and EAM models
		assetsGa.addQuery('model.sys_class_name', 'NOT IN', eamModelExt);
		assetsGa.addQuery('sys_class_name', 'NOT IN', eamAssetExt);
		assetsGa.setGroup(true);
		assetsGa.groupBy('sys_id');
		assetsGa.query();

		var assetsarray = [];
		while (assetsGa.next()) {
			assetsarray.push(assetsGa.getValue('sys_id'));
		}
		return assetsarray;
	},
	getAllInUseLoanerAssetsOfAStockroom: function (stockroomGr) {
		var loanerOrdersGa = new GlideAggregate(HampLoanerUtils.LOANER_ORDER_TABLE);
		loanerOrdersGa.addQuery('asset_stockroom', stockroomGr.getUniqueValue());
		loanerOrdersGa.addQuery('asset.install_status', HAMConstants.ASSET_STATUSES.IN_USE);
		loanerOrdersGa.addQuery('asset.asset_function', 'loaner');
		loanerOrdersGa.addQuery('stage', HampLoanerUtils.STAGE_DEPLOYED);
		loanerOrdersGa.setGroup(true);
		loanerOrdersGa.groupBy('asset.sys_id');
		loanerOrdersGa.query();

		var assetsarray = [];
		while (loanerOrdersGa.next()) {
			assetsarray.push(loanerOrdersGa.getValue('asset.sys_id'));
		}
		return assetsarray;
	},
	getFunctioningAssets: function (location, model) {
		var functioningAssets = [];
		functioningAssets = functioningAssets.concat(this.getInStockFunctioningAssets(location, model));
		functioningAssets = functioningAssets.concat(this.getInUseFunctioningAssets(location, model));
		return functioningAssets;
	},
	getInStockFunctioningAssets: function (location, model) {
		var assetsGa = new GlideAggregate('alm_asset');
		HampLoanerUtils.addLoanerBaseQuery(assetsGa, location, model);
		HampLoanerUtils.addInStockFunctioningAssetsQuery(assetsGa);
		assetsGa.setGroup(true);
		assetsGa.groupBy('sys_id');
		assetsGa.query();

		var assetsarray = [];
		while (assetsGa.next()) {
			assetsarray.push(assetsGa.getValue('sys_id'));
		}
		return assetsarray;
	},
	getInUseFunctioningAssets: function (location, model) {
		var loanerOrdersGa = new GlideAggregate(HampLoanerUtils.LOANER_ORDER_TABLE);
		HampLoanerUtils.addInUseFunctioningAssetsQuery(loanerOrdersGa, location, model);
		loanerOrdersGa.setGroup(true);
		loanerOrdersGa.groupBy('asset.sys_id');
		loanerOrdersGa.query();

		var assetsarray = [];
		while (loanerOrdersGa.next()) {
			assetsarray.push(loanerOrdersGa.getValue('asset.sys_id'));
		}
		return assetsarray;
	},
	getActiveAssetAllocations: function (location, model, startDate, returnDate, leadTime, forLoanerOrder) {
		var loanerOrdersGa = new GlideAggregate(HampLoanerUtils.LOANER_ORDER_TABLE);
		loanerOrdersGa.addQuery('location', location);
		loanerOrdersGa.addQuery('model', model);
		if (forLoanerOrder) {
			loanerOrdersGa.addQuery('sys_id', '!=', forLoanerOrder);
		}

		HampLoanerUtils.addLoanerOrdersOverlapQuery(loanerOrdersGa, startDate, returnDate, leadTime);
		HampLoanerUtils.addDomainFilterQuery(loanerOrdersGa);

		var activeStages = [HampLoanerUtils.STAGE_NEW, HampLoanerUtils.STAGE_PREPARE, HampLoanerUtils.STAGE_DEPLOYED];
		loanerOrdersGa.addQuery('stage', activeStages);

		loanerOrdersGa.setGroup(true);
		loanerOrdersGa.groupBy('asset.sys_id');
		loanerOrdersGa.query();

		var assetsarray = [];
		while (loanerOrdersGa.next()) {
			assetsarray.push(loanerOrdersGa.getValue('asset.sys_id'));
		}
		return assetsarray;
	},
	getAssetsAvailableToAllocate: function (location, model, startDate, returnDate, leadTime, forLoanerOrder) {
		var functioningAssets = this.getFunctioningAssets(location, model);
		// eslint-disable-next-line max-len
		var activeAllocations = this.getActiveAssetAllocations(location, model, startDate, returnDate, leadTime, forLoanerOrder);
		var availableAssets = [];
		for (var i = 0; i < functioningAssets.length; i++) {
			if (activeAllocations.indexOf(functioningAssets[i]) === -1) {
				availableAssets.push(functioningAssets[i]);
			}
		}
		return availableAssets;
	},
	getLoanerAssets: function (current) {
		var loanerOrderGr = null;
		if (current.getTableName() === HampLoanerUtils.LOANER_ORDER_TABLE) {
			loanerOrderGr = current;
		} else if (current.getTableName() === HampLoanerUtils.LOANER_TASK_TABLE) {
			loanerOrderGr = current.loaner_order;
		}
		if (gs.nil(loanerOrderGr)) {
			return '';
		}

		var location = loanerOrderGr.location;
		var model = loanerOrderGr.model;
		var startDate = loanerOrderGr.start_date;
		var returnDate = loanerOrderGr.return_date;
		var leadTime = loanerOrderGr.lead_time;

		var assetsarray = this.getAssetsAvailableToAllocate(location, model, startDate, returnDate, leadTime);
		var filter = 'sys_idIN' + assetsarray;
		return filter;
	},
	updateAssetPrepared: function (current) {
		new global.GlideQuery('sn_hamp_loaner_asset_order')
			.where('sys_id', current.loaner_order)
			.update({
				asset_prepared: true,
			});
	},
	updateAssetStockroomOnLoanerOrder: function (loanerTaskGr) {
		var assetStockroom = loanerTaskGr.loaner_order.asset.stockroom;
		if (!gs.nil(assetStockroom)) {
			new global.GlideQuery(HampLoanerUtils.LOANER_ORDER_TABLE)
				.where('sys_id', loanerTaskGr.loaner_order)
				.update({
					asset_stockroom: assetStockroom,
				});
		}
	},
	updateReturnedOn: function (current) {
		var gDate = new GlideDateTime();
		new global.GlideQuery('sn_hamp_loaner_asset_order')
			.where('sys_id', current.loaner_order)
			.update({
				returned_on: gDate.getLocalDate(),
			});
	},
	updateAsset: function (assetId, assetData, isConsumable) {
		if (isConsumable) { delete assetData.work_notes; }

		new global.GlideQuery('alm_asset')
			.where('sys_id', assetId)
			.update(assetData);

		if (assetData.work_notes) {
			var assetGr = HAMUtils.getAsGlideRecord(HAMConstants.ALM_ASSET_TABLE, assetId);
			assetGr.work_notes = assetData.work_notes;
			assetGr.update();
		}
	},
	cancelLoanerOrder: function (loanerOrderId) {
		var isAssetDeployed = new global.GlideQuery(HampLoanerUtils.LOANER_TASK_TABLE)
			.where('loaner_order', loanerOrderId)
			.where('task_name', 'deploy')
			.where('state', 3)
			.selectOne()
			.isPresent();
		if (isAssetDeployed) {
			gs.addErrorMessage(gs.getMessage('Loaner asset order cannot be cancelled once the asset is deployed'));
			return;
		}

		var loanerOrderGr = new global.GlideQuery('sn_hamp_loaner_asset_order')
			.where('sys_id', loanerOrderId)
			.toGlideRecord();
		loanerOrderGr.query();
		loanerOrderGr.next();
		loanerOrderGr.stage = 'cancelled';
		loanerOrderGr.work_notes = gs.getMessage('Loaner order is cancelled by {0}', gs.getUserDisplayName());
		loanerOrderGr.update();

		new global.GlideQuery('sn_hamp_loaner_asset_task')
			.where('loaner_order', loanerOrderId)
			.where('active', true)
			.updateMultiple({
				state: 4,
			});
	},
	triggerLoanerFlow: function (loanerOrder) {
		var defaultFlow = 'sn_hamp.loaner_asset_request_flow';
		var LOANER_DECISION_ID = 'f9a23e38739310107e88ef66fbf6a7db';
		var decisionInputs = {};
		decisionInputs.loaner_asset_order = loanerOrder.sys_id;
		var flow = HAMUtils.getFlowFromDecisionTable(LOANER_DECISION_ID, decisionInputs, defaultFlow);
		var inputs = {};
		inputs.current = loanerOrder;
		inputs.table_name = 'sn_hamp_loaner_asset_order';
		var flowContextID = sn_hamp.HAMUtils.triggerFlowAsyncronously(flow, inputs);
		if (!gs.nil(flowContextID)) {
			new global.GlideQuery(HampLoanerUtils.LOANER_ORDER_TABLE)
				.where('sys_id', loanerOrder.sys_id)
				.update({
					flow_context: flowContextID,
				});
		}
	},
	earlyReturnLoanerAsset: function (loanerOrder, loanerAsset, returnedOn, stockroom, isAssetFunctional) {
		var loanerGq = new global.GlideQuery(HampLoanerUtils.LOANER_ORDER_TABLE)
			.where('sys_id', loanerOrder);
		var loanerGr = loanerGq.toGlideRecord();
		loanerGr.query();
		loanerGr.next();
		var returnedOnInternalFormat = HAMUtils.getDateInInternalFormat(returnedOn);
		loanerGq.update({
			asset_returned: 'Y',
			returned_on: returnedOnInternalFormat,
			is_asset_functional: isAssetFunctional,
		});
		var reclaimTaskId;
		new global.GlideQuery(HampLoanerUtils.LOANER_TASK_TABLE)
			.where('loaner_order', loanerOrder)
			.where('task_name', 'reclaim')
			.selectOne('sys_id')
			.ifPresent(function (task) {
				reclaimTaskId = task.sys_id;
			});
		if (!gs.nil(reclaimTaskId)) {
			new global.GlideQuery(HampLoanerUtils.LOANER_TASK_TABLE)
				.where('sys_id', reclaimTaskId)
				.update({
					state: 3,
					assigned_to: gs.getUserID(),
					return_stockroom: stockroom,
				});
		} else {
			var loanerTaskGr = new GlideRecord('sn_hamp_loaner_asset_task');
			loanerTaskGr.initialize();
			loanerTaskGr.setValue('parent', loanerOrder);
			loanerTaskGr.setValue('loaner_order', loanerOrder);
			loanerTaskGr.setValue('task_name', 'reclaim');
			loanerTaskGr.setValue('state', 3);
			loanerTaskGr.setValue('assigned_to', gs.getUserID());
			loanerTaskGr.setValue('return_stockroom', stockroom);
			loanerTaskGr.setValue('short_description', gs.getMessage('Reclaim loaner asset from user'));
			// eslint-disable-next-line max-len
			loanerTaskGr.setValue('description', gs.getMessage('Reclaim loaner asset from user and return to loaner pool'));
			reclaimTaskId = loanerTaskGr.insert();
		}

		var reclaimLoanerTaskGr = HAMUtils.getAsGlideRecord(HampLoanerUtils.LOANER_TASK_TABLE, reclaimTaskId);
		this.updateAssetOnReturn(reclaimLoanerTaskGr);
	},
	updateAssetOnReturn: function (loanerTaskGr /* reclaim task */) {
		var returnStockroom = String(loanerTaskGr.return_stockroom);

		var loanerOrderGr = loanerTaskGr.loaner_order;
		var isAssetFunctional = String(loanerOrderGr.is_asset_functional);

		var loanerAssetGr = loanerOrderGr.asset;
		var loanerAssetID = loanerAssetGr.sys_id;

		var assetUpdateJSON = {};
		assetUpdateJSON = {
			install_status: parseInt(HAMConstants.ASSET_STATUSES.IN_STOCK, 10),
			substatus: HAMConstants.ASSET_SUB_STATUSES.AVAILABLE,
			stockroom: returnStockroom,
			reserved_for: null,
			assigned_to: null,
			assigned: null,
			install_date: null,
			managed_by: null,
		};

		var msgParams = [loanerAssetGr.getDisplayValue(), loanerTaskGr.getDisplayValue()];
		if (isAssetFunctional === 'N') {
			assetUpdateJSON.substatus = HAMConstants.ASSET_SUB_STATUSES.PENDING_REPAIR;
			// eslint-disable-next-line max-len
			assetUpdateJSON.work_notes = gs.getMessage('Asset {0} updated to state In stock and substate Pending repair as part of task {1}', msgParams);
		} else {
			// eslint-disable-next-line max-len
			assetUpdateJSON.work_notes = gs.getMessage('Asset {0} updated to state In stock and substate Available as part of task {1}', msgParams);
		}

		// Check if the asset is part of another loaner order
		var otherLoanerOrder = HampLoanerUtils.getAnotherLoanerOrderWithAsset(loanerAssetID, loanerOrderGr);

		// If asset is part of another loaner orders, then do not clear process fields
		// as it would result in consumable records getting merged.
		if (gs.nil(otherLoanerOrder)) {
			assetUpdateJSON.process_table = null;
			assetUpdateJSON.process_id = null;
		}

		this.updateAsset(loanerAssetID, assetUpdateJSON, HAMUtils.isConsumableClassAsset(loanerAssetGr));

		// If not part of another loaner order, return. Else stamp other loaner order details on asset
		if (gs.nil(otherLoanerOrder)) { return; }

		var otherLoanerOrderStage = String(otherLoanerOrder.stage);
		if (otherLoanerOrderStage === HampLoanerUtils.STAGE_NEW
			|| otherLoanerOrderStage === HampLoanerUtils.STAGE_PREPARE) {
			assetUpdateJSON = {
				install_status: parseInt(HAMConstants.ASSET_STATUSES.IN_STOCK, 10),
				substatus: HAMConstants.ASSET_SUB_STATUSES.RESERVED,
				stockroom: returnStockroom,
				reserved_for: String(otherLoanerOrder.requested_for),
				assigned_to: null,
				assigned: null,
				install_date: null,
				managed_by: null,
				process_table: otherLoanerOrder.getTableName(),
				process_id: otherLoanerOrder.getUniqueValue(),
			};

			if (isAssetFunctional === 'N') {
				assetUpdateJSON.substatus = HAMConstants.ASSET_SUB_STATUSES.PENDING_REPAIR;
			} else {
				assetUpdateJSON.work_notes = this.getAssetReservedWorkNote(loanerAssetGr, otherLoanerOrder);
			}

			this.updateAsset(loanerAssetID, assetUpdateJSON, HAMUtils.isConsumableClassAsset(loanerAssetGr));
		}
	},
	updateAssetOnPrepareCompletion: function (prepareTaskGr) {
		var loanerOrderGr = prepareTaskGr.loaner_order;
		var requestedFor = String(loanerOrderGr.requested_for);

		var loanerAssetGr = loanerOrderGr.asset;
		var loanerAssetID = String(loanerAssetGr.sys_id);

		var msgParams = [loanerAssetGr.getDisplayValue(), prepareTaskGr.getDisplayValue()];
		// eslint-disable-next-line max-len
		var preparedWorkNote = gs.getMessage('Asset {0} updated to state In stock and substate Pending install as part of task {1}', msgParams);

		var assetUpdateJSON = {
			install_status: parseInt(HAMConstants.ASSET_STATUSES.IN_STOCK, 10),
			substatus: HAMConstants.ASSET_SUB_STATUSES.PENDING_INSTALL,
			reserved_for: requestedFor,
			process_table: HampLoanerUtils.LOANER_ORDER_TABLE,
			process_id: String(loanerOrderGr.sys_id),
			work_notes: preparedWorkNote,
		};

		this.updateAsset(loanerAssetID, assetUpdateJSON, HAMUtils.isConsumableClassAsset(loanerAssetGr));
	},
	updateAssetOnDeployCompletion: function (deployTaskGr) {
		var loanerOrderGr = deployTaskGr.loaner_order;

		var loanerAssetGr = loanerOrderGr.asset;
		var loanerAssetID = String(loanerAssetGr.sys_id);

		var msgParams = [loanerAssetGr.getDisplayValue(), deployTaskGr.getDisplayValue()];
		var deployedWorkNote = gs.getMessage('Asset {0} updated to state In Use as part of task {1}', msgParams);

		var installStatus;
		if (HAMUtils.isConsumableClassAsset(loanerAssetGr)) {
			installStatus = parseInt(HAMConstants.ASSET_STATUSES.CONSUMED, 10);
		} else {
			installStatus = parseInt(HAMConstants.ASSET_STATUSES.IN_USE, 10);
		}

		var timeNow = new GlideDateTime().toString();
		var assetUpdateJSON = {
			install_status: installStatus,
			substatus: null,
			location: String(loanerOrderGr.location),
			work_notes: deployedWorkNote,
			assigned: timeNow,
			install_date: timeNow,
			process_table: HampLoanerUtils.LOANER_ORDER_TABLE,
			process_id: String(loanerOrderGr.sys_id),
		};

		if (String(loanerOrderGr.request_type) !== HampLoanerUtils.LOANER_ORDER_TYPE_THIRD_PARTY) {
			assetUpdateJSON.assigned_to = String(loanerOrderGr.requested_for);
		}

		if (String(loanerOrderGr.request_type) === HampLoanerUtils.LOANER_ORDER_TYPE_THIRD_PARTY) {
			// Explictily marking null to overcome glidequery issue.
			// current.reserved_for.nil() returns false even though reserved_for is null
			assetUpdateJSON.managed_by = String(loanerOrderGr.opened_by);
			assetUpdateJSON.assigned_to = null;
			assetUpdateJSON.reserved_for = null;
		}

		this.updateAsset(loanerAssetID, assetUpdateJSON, HAMUtils.isConsumableClassAsset(loanerAssetGr));
	},
	canOrderBeCancelled: function (loanerOrder) {
		if (gs.hasRole('inventory_user')) {
			return true;
		}
		var canCancel = false;
		new global.GlideQuery('sn_hamp_loaner_asset_order')
			.where('sys_id', loanerOrder)
			.selectOne('opened_by', 'requested_for')
			.ifPresent(function (rec) {
				if (rec.opened_by === gs.getUserID() || rec.requested_for === gs.getUserID()) {
					canCancel = true;
				}
			});
		return canCancel;
	},
	isAssetAvailable: function (current) {
		var loanerOrderGr;
		if (current.getTableName() === HampLoanerUtils.LOANER_ORDER_TABLE) {
			loanerOrderGr = current;
		} else if (current.getTableName() === HampLoanerUtils.LOANER_TASK_TABLE) {
			loanerOrderGr = current.loaner_order;
		}
		var selectedAsset = String(loanerOrderGr.asset);
		var availableAssets = this.getAssetsAvailableToAllocate(
			loanerOrderGr.location,
			loanerOrderGr.model,
			loanerOrderGr.start_date,
			loanerOrderGr.return_date,
			loanerOrderGr.lead_time,
			loanerOrderGr.sys_id
		);
		if (availableAssets.indexOf(selectedAsset) !== -1) {
			return true;
		}
		return false;
	},
	canAccess: function (loanerOrder) {
		var res = new global.GlideQuery(HampLoanerUtils.LOANER_TASK_TABLE)
			.where('loaner_order', loanerOrder.sys_id)
			.where('assigned_to', gs.getUserID())
			.selectOne()
			.isPresent();
		return res;
	},
	isLoanerAssetExist: function (location, model) {
		var assets = new GlideRecord('alm_asset');
		HampLoanerUtils.addLoanerBaseQuery(assets, location, model);
		assets.addQuery('install_status', 'NOT IN', HampLoanerUtils.ASSET_IN_USE_STATUSES);
		assets.addQuery('excluded_from_ham', false)
		assets.query();
		if (assets.hasNext()) {
			return true;
		}

		var loanerOrdersGa = new GlideAggregate(HampLoanerUtils.LOANER_ORDER_TABLE);
		HampLoanerUtils.addInUseFunctioningAssetsQuery(loanerOrdersGa, location, '');
		loanerOrdersGa.query();
		return loanerOrdersGa.hasNext();
	},
	getFunctioningLoanerAssetsCount: function (location, model) {
		var inStockFunctioningAssets = this.getInStockFunctioningLoanerAssetsCount(location, model);
		var inUseFunctioningAssets = this.getInUseFunctioningLoanerAssetsCount(location, model);
		return (inStockFunctioningAssets + inUseFunctioningAssets);
	},
	getInStockFunctioningLoanerAssetsCount: function (location, model) {
		var assetsGa = new GlideAggregate('alm_asset');
		HampLoanerUtils.addLoanerBaseQuery(assetsGa, location, model);
		HampLoanerUtils.addInStockFunctioningAssetsQuery(assetsGa);
		assetsGa.addQuery('excluded_from_ham', false);
		assetsGa.addAggregate('SUM', 'quantity');
		assetsGa.groupBy('model');
		assetsGa.query();
		if (assetsGa.next()) {
			return (parseInt(assetsGa.getAggregate('SUM', 'quantity'), 10));
		}
		return 0;
	},
	getInUseFunctioningLoanerAssetsCount: function (location, model) {
		var loanerOrdersGa = new GlideAggregate(HampLoanerUtils.LOANER_ORDER_TABLE);
		HampLoanerUtils.addInUseFunctioningAssetsQuery(loanerOrdersGa, location, model);
		loanerOrdersGa.addAggregate('COUNT');
		loanerOrdersGa.query();
		if (loanerOrdersGa.next()) {
			return (parseInt(loanerOrdersGa.getAggregate('COUNT'), 10));
		}
		return 0;
	},
	isWaitlistedEditable: function (loanerOrderGr) {
		var stage = loanerOrderGr.getValue('stage');
		if (stage === HampLoanerUtils.STAGE_NEW) {
			return true;
		}
		if (stage === HampLoanerUtils.STAGE_PREPARE) {
			var prepareTask = new global.GlideQuery(HampLoanerUtils.LOANER_TASK_TABLE)
				.where('loaner_order', loanerOrderGr.getUniqueValue())
				.where('task_name', HampLoanerUtils.TASK_PREPARE)
				.select('state')
				.toArray(1);
			if (prepareTask[0] && parseInt(prepareTask[0].state, 10) === HampLoanerUtils.TASK_CLOSED_COMPLETE) {
				return false;
			}
			return true;
		}
		return false;
	},
	isPrepareTaskClosedComplete: function (loanerOrderGr) {
		var stage = loanerOrderGr.getValue('stage');
		if (stage === HampLoanerUtils.STAGE_NEW) {
			return false;
		}
		var prepareTask = new global.GlideQuery(HampLoanerUtils.LOANER_TASK_TABLE)
			.where('loaner_order', loanerOrderGr.getUniqueValue())
			.where('task_name', HampLoanerUtils.TASK_PREPARE)
			.select('state')
			.toArray(1);
		if (prepareTask[0] && parseInt(prepareTask[0].state, 10) === HampLoanerUtils.TASK_CLOSED_COMPLETE) {
			return true;
		}
		return false;
	},
	isLoanerFieldEditable: function (loanerOrderGr, field) {
		switch (field) {
		case 'asset':
			return !this.isPrepareTaskClosedComplete(loanerOrderGr);
		case 'model':
			return !this.isPrepareTaskClosedComplete(loanerOrderGr);
		default:
			return true;
		}
	},
	getAssetReservedWorkNote: function (assetGr, loanerOrderGr) {
		var msgParams = [assetGr.getDisplayValue(), loanerOrderGr.getDisplayValue()];
		// eslint-disable-next-line max-len
		var workNote = gs.getMessage('Asset {0} updated to state In stock and substate Reserved due to selection on loaner asset order {1}', msgParams);
		return workNote;
	},
	compareOrdersStartDates: function (loanerOrder1, loanerOrder2) {
		return HAMUtils.compareDates(String(loanerOrder1.start_date), String(loanerOrder2.start_date));
	},
	setAssetStatusOnSelection: function (loanerOrderGr, selectedAssetGr) {
		var selectedAssetID = selectedAssetGr.sys_id.toString();
		var selectionWorkNote = this.getAssetReservedWorkNote(selectedAssetGr, loanerOrderGr);

		var otherLoanerOrder;
		var assetUpdateJSON = {};

		if (HAMUtils.isConsumableClassAsset(selectedAssetGr)) {
			var processedConsumableID = HampLoanerUtils.splitConsumableOnLoanerOrder(loanerOrderGr);
			if (selectedAssetID !== processedConsumableID) {
				// A new consumable with required attributes record is created in this case.
				loanerOrderGr.setValue('asset', processedConsumableID);
			}
		}
		var setAssetID = loanerOrderGr.getValue('asset');

		// Check if selected asset is already part of another loaner order.
		otherLoanerOrder = HampLoanerUtils.getAnotherLoanerOrderWithAsset(selectedAssetID, loanerOrderGr);

		// If it is part of another loaner order, but the other loaner order start date comes first, do nothing.
		// Else update the consumable with incoming loaner asset order details.
		if (!gs.nil(otherLoanerOrder) && this.compareOrdersStartDates(loanerOrderGr, otherLoanerOrder) !== '>') {
			return;
		}

		assetUpdateJSON = {
			install_status: parseInt(HAMConstants.ASSET_STATUSES.IN_STOCK, 10),
			substatus: HAMConstants.ASSET_SUB_STATUSES.RESERVED,
			reserved_for: String(loanerOrderGr.requested_for),
			process_table: HampLoanerUtils.LOANER_ORDER_TABLE,
			process_id: loanerOrderGr.getUniqueValue(),
			work_notes: selectionWorkNote,
		};
		this.updateAsset(setAssetID, assetUpdateJSON, HAMUtils.isConsumableClassAsset(selectedAssetGr));
	},
	setAssetStatusOnRemoval: function (loanerOrderGr, assetGr, isCancelledOrDeleted) {
		// If loaner asset orders not in New, Prepare are deleted, do nothing.
		if (isCancelledOrDeleted === HampLoanerUtils.LOANER_ORDER_ACTION_DELETED) {
			var loanerOrderStage = String(loanerOrderGr.stage);
			if (!((loanerOrderStage === HampLoanerUtils.STAGE_NEW)
				|| (loanerOrderStage === HampLoanerUtils.STAGE_PREPARE))) { return; }
		}

		var assetId = assetGr.sys_id.toString();
		var otherLoanerOrderStage;
		var dateComp;

		// If the asset is removed from the loaner asset order which is not the one with earliest start date
		// do nothing
		var otherLoanerOrder = HampLoanerUtils.getAnotherLoanerOrderWithAsset(assetId, loanerOrderGr);
		if (!gs.nil(otherLoanerOrder)) {
			otherLoanerOrderStage = String(otherLoanerOrder.stage);
			if (otherLoanerOrderStage === HampLoanerUtils.STAGE_DEPLOYED) { return; }

			dateComp = this.compareOrdersStartDates(loanerOrderGr, otherLoanerOrder);
			if (dateComp === '<' && (otherLoanerOrderStage === HampLoanerUtils.STAGE_NEW
				|| otherLoanerOrderStage === HampLoanerUtils.STAGE_PREPARE)) { return; }
		}

		// If the asset is removed from the loaner asset order with the earliest start date
		// move the asset to a state of available
		var msgParams = [assetGr.getDisplayValue(), loanerOrderGr.getDisplayValue()];
		var removalWorkNote;
		if (isCancelledOrDeleted === HampLoanerUtils.LOANER_ORDER_ACTION_CANCELLED) {
			// eslint-disable-next-line max-len
			removalWorkNote = gs.getMessage('Asset {0} updated to state In stock and substate Available due to cancellation of loaner asset order {1}', msgParams);
		} else if (isCancelledOrDeleted === HampLoanerUtils.LOANER_ORDER_ACTION_DELETED) {
			// eslint-disable-next-line max-len
			removalWorkNote = gs.getMessage('Asset {0} updated to state In stock and substate Available due to deletion of loaner asset order {1}', msgParams);
		} else {
			// eslint-disable-next-line max-len
			removalWorkNote = gs.getMessage('Asset {0} updated to state In stock and substate Available due to removal from loaner asset order {1}', msgParams);
		}

		var assetUpdateJSON = {};
		assetUpdateJSON = {
			install_status: parseInt(HAMConstants.ASSET_STATUSES.IN_STOCK, 10),
			substatus: HAMConstants.ASSET_SUB_STATUSES.AVAILABLE,
			reserved_for: null,
			process_table: null,
			process_id: null,
			work_notes: removalWorkNote,
		};

		this.updateAsset(assetId, assetUpdateJSON, HAMUtils.isConsumableClassAsset(assetGr));

		// If the asset is part of another active loaner order with a greater start date,
		// set the asset as reserved for that order.
		if (!gs.nil(otherLoanerOrder)) {
			otherLoanerOrderStage = String(otherLoanerOrder.stage);
			if (dateComp === '>' && (otherLoanerOrderStage === HampLoanerUtils.STAGE_NEW
				|| otherLoanerOrderStage === HampLoanerUtils.STAGE_PREPARE)) {
				var selectionWorkNote = this.getAssetReservedWorkNote(assetGr, otherLoanerOrder);
				assetUpdateJSON = {
					install_status: parseInt(HAMConstants.ASSET_STATUSES.IN_STOCK, 10),
					substatus: HAMConstants.ASSET_SUB_STATUSES.RESERVED,
					reserved_for: String(otherLoanerOrder.requested_for),
					work_notes: selectionWorkNote,
					process_table: otherLoanerOrder.getTableName(),
					process_id: otherLoanerOrder.getUniqueValue(),
				};
				this.updateAsset(assetId, assetUpdateJSON, HAMUtils.isConsumableClassAsset(assetGr));
			}
		}
	},
	showLoanerAssetOrdersListOnAsset: function (assetGr) {
		/** ***********************************************************************************
			* Hiding loaner order related list for consumables if they are not supported by process columns
			*********************************************************************************** */
		if (HAMUtils.isConsumableClassAsset(assetGr) && !HAMUtils.isConsumablesSupportedByProcess()) {
			return false;
		}
		if (assetGr.getValue('asset_function') === HAMConstants.ASSET_FUNCTION.LOANER) {
			return true;
		}

		var showLoanerAssetOrders = false;
		if (HAMUtils.isConsumableClassAsset(assetGr)) {
			/** ***********************************************************************************
			* Consumable history can only be got in conjunction with install status and stockroom.
			*********************************************************************************** */
			if (assetGr.getValue('install_status') === HAMConstants.ASSET_STATUSES.IN_STOCK) {
				showLoanerAssetOrders = new global.GlideQuery(HampLoanerUtils.LOANER_ORDER_TABLE)
					.whereNotNull('asset')
					.where('model', assetGr.getValue('model'))
					.where('asset_stockroom', assetGr.getValue('stockroom'))
					.selectOne()
					.isPresent();
			}
			return showLoanerAssetOrders;
		}

		/** ***********************************************************************************
		* In case of Asset, Hardware, Facility, Bundle class, check if record is in orders.
		*********************************************************************************** */
		showLoanerAssetOrders = new global.GlideQuery(HampLoanerUtils.LOANER_ORDER_TABLE)
			.where('asset', assetGr.getUniqueValue())
			.selectOne()
			.isPresent();
		return showLoanerAssetOrders;
	},
	type: 'HampLoanerUtils',
};
HampLoanerUtils.addDomainFilterQuery = function (records) {
	if (global.ModelUtils.isDomainSeparationEnabled()) {
		var domainID = new global.AssetManagementBaseJob().getCurrentDomainSysId();
		records.addQuery('sys_domain', domainID);
	}
};
HampLoanerUtils.getLoanerCommonBaseQuery = function (location, model) {
	var assets = new GlideAggregate('alm_asset');
	assets.addQuery('asset_function', 'loaner');
	if (!(HAMUtils.isConsumablesSupportedByProcess())) {
		var consumableExt = HAMUtils.getTableExtensions(HAMConstants.ALM_CONSUMABLE_TABLE);
		assets.addQuery('sys_class_name', 'NOT IN', consumableExt);
	}
	// Exclude EAM assets and EAM models
	var eamModelExt = HAMUtils.getEAMModelClasses();
	assets.addQuery('model.sys_class_name', 'NOT IN', eamModelExt);
	var eamAssetExt = HAMUtils.getEAMAssetClasses();
	assets.addQuery('sys_class_name', 'NOT IN', eamAssetExt);
	assets.addQuery('sys_class_name', '!=', 'alm_license');
	if (!gs.nil(model)) {
		assets.addQuery('model', model);
	}
	HampLoanerUtils.addDomainFilterQuery(assets);
	return assets.getEncodedQuery();
};
HampLoanerUtils.getLoanerBaseQueryWithLocation = function (location, commonBaseQuery) {
	var baseQueryWithLocation = commonBaseQuery;
	if (!gs.nil(location)) {
		baseQueryWithLocation += '^location=' + location;
		baseQueryWithLocation += '^NQ' + commonBaseQuery + '^locationISEMPTY^stockroom.location=' + location;
	}
	return baseQueryWithLocation;
};
HampLoanerUtils.addLoanerBaseQuery = function (assets, location, model) {
	var commonBaseQuery = HampLoanerUtils.getLoanerCommonBaseQuery(location, model);
	var baseQueryWithLocation = HampLoanerUtils.getLoanerBaseQueryWithLocation(location, commonBaseQuery);
	assets.addEncodedQuery(baseQueryWithLocation);
};
HampLoanerUtils.addInStockFunctioningAssetsQuery = function (assets) {
	// Assets are considered functioning if the state and substatus are:
	// state: in_stock (6) | substatus: available, reserved, pending_install
	// OR state: in_use (1)
	var validInstallStatus = HAMConstants.ASSET_STATUSES.IN_STOCK;
	var validSubstatus = [
		HAMConstants.ASSET_SUB_STATUSES.AVAILABLE,
		HAMConstants.ASSET_SUB_STATUSES.RESERVED,
		HAMConstants.ASSET_SUB_STATUSES.PENDING_INSTALL,
	];
	assets.addQuery('install_status', validInstallStatus);
	assets.addQuery('substatus', validSubstatus)
		.addOrCondition('substatus', '');
	HampLoanerUtils.addDomainFilterQuery(assets);
};
HampLoanerUtils.addInUseFunctioningAssetsQuery = function (loanerOrders, location, model) {
	var validStatus = [HAMConstants.ASSET_STATUSES.IN_USE];
	if (HAMUtils.isConsumablesSupportedByProcess()) {
		validStatus.push(HAMConstants.ASSET_STATUSES.CONSUMED);
	}
	loanerOrders.addQuery('location', location);
	if (!gs.nil(model)) {
		loanerOrders.addQuery('model', model);
	}
	loanerOrders.addQuery('asset.install_status', validStatus);
	loanerOrders.addQuery('asset.asset_function', 'loaner');
	loanerOrders.addQuery('stage', HampLoanerUtils.STAGE_DEPLOYED);
	HampLoanerUtils.addDomainFilterQuery(loanerOrders);
};
HampLoanerUtils.convertDateStringToDateObj = function (dateString) {
	var date = new Date();
	date.setFullYear(dateString.substring(0, 4));
	date.setMonth(dateString.substring(5, 7) - 1);
	date.setDate(dateString.substring(8, 10));
	date.setHours(0, 0, 0, 0);
	return date;
};
HampLoanerUtils.convertDateObjToDateString = function (date) {
	var yearStr = String(date.getFullYear());
	var monthStr = String(date.getMonth() + 1);
	if (monthStr.length === 1) { monthStr = '0' + monthStr; }
	var dateStr = String(date.getDate());
	if (dateStr.length === 1) { dateStr = '0' + dateStr; }
	return yearStr + '-' + monthStr + '-' + dateStr;
};
HampLoanerUtils.getPreparationStartDate = function (startDate, leadTime) {
	var leadTimeInDays = parseInt(leadTime, 10);
	var minusDays = 0 - leadTimeInDays;

	var preparationStartDateObj = HampLoanerUtils.convertDateStringToDateObj(String(startDate));
	if (leadTimeInDays > 0) {
		preparationStartDateObj.setDate(preparationStartDateObj.getDate() + minusDays);
	}
	var preparationStartDateStr = HampLoanerUtils.convertDateObjToDateString(preparationStartDateObj);

	var currentDateStr = new GlideDateTime().getLocalDate().toString();
	var currentDateObj = HampLoanerUtils.convertDateStringToDateObj(currentDateStr);

	if ((preparationStartDateObj.getTime() - currentDateObj.getTime()) <= 0) {
		return currentDateStr;
	}
	return preparationStartDateStr;
};
HampLoanerUtils.addLoanerOrdersOverlapQuery = function (loanerOrders, startDate, returnDate, leadTime, isGlideQuery) {
	var preparationStartDate = HampLoanerUtils.getPreparationStartDate(startDate, leadTime);
	if (isGlideQuery) {
		var enhancedQuery = loanerOrders.where('preparation_start_date', '<=', returnDate);
		enhancedQuery = enhancedQuery.where('return_date', '>=', preparationStartDate);
		return enhancedQuery;
	}
	loanerOrders.addQuery('start_date', '<=', returnDate);
	loanerOrders.addQuery('return_date', '>=', preparationStartDate);
	return loanerOrders;
};
HampLoanerUtils.convertUTCtoTimezone = function (utcTime, timeZone) {
	if (!gs.nil(timeZone)) {
		var gr = new GlideScheduleDateTime(utcTime);
		var currentTime = gr.convertTimeZone('UTC', timeZone);
		return new GlideDateTime(currentTime);
	}
	return utcTime;
};
HampLoanerUtils.getTimezoneOfLocation = function (location) {
	var locObj = new global.GlideQuery('cmn_location')
		.get(location, ['time_zone']);
	if (!gs.nil(locObj) && !gs.nil(locObj._value) && !gs.nil(locObj._value.time_zone)) {
		return locObj._value.time_zone;
	}
	return '';
};
HampLoanerUtils.splitConsumableOnLoanerOrder = function (loanerOrderGr) {
	var quantity = 1; // Only consumables with quantity 1 can be requested as of now.

	var consumableID = loanerOrderGr.getValue('asset');
	var consumableGr = HAMUtils.getAsGlideRecord(HAMConstants.ALM_ASSET_TABLE, consumableID);
	var newConsumableID = consumableID;

	if (quantity < parseInt(consumableGr.getValue('quantity'), 10)) {
		newConsumableID = new global.Consumables().split(
			consumableID,
			quantity,
			consumableGr.getValue('install_status'),
			HAMConstants.ASSET_SUB_STATUSES.RESERVED,
			'',
			consumableGr.getValue('stockroom'),
			consumableGr.getValue('location'),
			'',
			'loaner', {
				process_table: loanerOrderGr.getTableName(),
				process_id: loanerOrderGr.getUniqueValue(),
				reserved_for: loanerOrderGr.getValue('requested_for'),
			}
		);
	}
	return newConsumableID;
};
HampLoanerUtils.consumableMergeConditionCheck = function (consumableGr) {
	var canMerge = true;
	if (consumableGr.getValue('process_table') === HampLoanerUtils.LOANER_ORDER_TABLE
		&& !gs.nil(consumableGr.getValue('process_id'))) {
		canMerge = false;
	}
	return canMerge;
};
HampLoanerUtils.getAnotherLoanerOrderWithAsset = function (assetId, excludeLoanerOrderGr) {
	var loanerOrder = '';
	var assetExists = new global.GlideQuery(HampLoanerUtils.LOANER_ORDER_TABLE)
		.where('asset', assetId)
		.where('sys_id', '!=', String(excludeLoanerOrderGr.sys_id))
		.where('stage', 'IN', [
			HampLoanerUtils.STAGE_NEW,
			HampLoanerUtils.STAGE_PREPARE,
			HampLoanerUtils.STAGE_DEPLOYED,
		])
		.where('is_waitlisted', false)
		.orderBy('start_date')
		.toGlideRecord();
	assetExists.setLimit(1);
	assetExists.query();
	if (assetExists.next()) {
		loanerOrder = assetExists;
	}
	return loanerOrder;
};
HampLoanerUtils.canCloseLoanerTask = function (loanerTaskGr) {
	var hasAccess = gs.getUser().hasRole('itil') || gs.hasRole('inventory_user')
	|| String(loanerTaskGr.assigned_to) === gs.getUserID();
	return (hasAccess && (loanerTaskGr.getValue('state') === '1' || loanerTaskGr.getValue('state') === '2'));
};
HampLoanerUtils.validateFieldsForLoaner = function (loanerTaskGr) {
	var message;
	var msgParams = [];
	if ((loanerTaskGr.getValue('task_name') === 'prepare') && loanerTaskGr.getValue('state') !== '4') {
		// check mandatory fields are filled on Prepare task
		if (!loanerTaskGr.loaner_order.asset) {
			msgParams.push(loanerTaskGr.loaner_order.asset.getLabel());
		}
		if (msgParams.length > 0) {
			message = gs.getMessage('The following mandatory fields are not filled in: {0}', msgParams.join(', '));
			gs.addErrorMessage(message);
		}
		if (loanerTaskGr.loaner_order.asset) {
			message = (new sn_hamp.HAMLicensingUtility()).getExcludedAssetErrorMessage(loanerTaskGr.loaner_order.asset);
			if(!gs.nil(message)) {
				msgParams.push(message);
				//Next 2 lines have been added as a workaround to avoid 2 error messages from appearing in Classic workspace, will be removed once platform fix is done.
				var inputURL = String(gs.action.getGlideURI());
				if (inputURL.indexOf('.do?') === -1) {
					gs.addErrorMessage(message);
				}
			}
		}
	} else if ((loanerTaskGr.getValue('task_name') === 'reclaim') && loanerTaskGr.getValue('state') !== '4') {
		// check mandatory fields are filled on Reclaim task
		if (!loanerTaskGr.getValue('return_stockroom')) {
			msgParams.push(loanerTaskGr.return_stockroom.getLabel());
		}
		if (msgParams.length > 0) {
			message = gs.getMessage('The following mandatory fields are not filled in: {0}', msgParams.join(', '));
			gs.addErrorMessage(message);
		}
		var msg;
		if (loanerTaskGr.loaner_order.asset_returned.toString() === 'N') {
			// eslint-disable-next-line max-len
			msg = gs.getMessage('To complete the task, update {0} value to Yes', loanerTaskGr.loaner_order.asset_returned.getLabel());
			msgParams.push(loanerTaskGr.loaner_order.asset_returned.getLabel());
			gs.addErrorMessage(msg);
		}
		if (loanerTaskGr.loaner_order.is_asset_functional.toString() === '') {
			// eslint-disable-next-line max-len
			msg = gs.getMessage('To complete the task, update {0} value to either Yes or No', loanerTaskGr.loaner_order.is_asset_functional.getLabel());
			msgParams.push(loanerTaskGr.loaner_order.is_asset_functional.getLabel());
			gs.addErrorMessage(msg);
		}
	}
	if (msgParams.length === 0) {
		if (loanerTaskGr.getValue('state') !== '4') {
			loanerTaskGr.state = 3;
		}
		loanerTaskGr.update();
	}
	if (loanerTaskGr.getValue('state') !== '3') { // redirect to task page only if its incomplete
		return loanerTaskGr;
	}
	return loanerTaskGr.loaner_order.getRefRecord();
};
HampLoanerUtils.LOANER_ORDER_TABLE = 'sn_hamp_loaner_asset_order';
HampLoanerUtils.LOANER_TASK_TABLE = 'sn_hamp_loaner_asset_task';
HampLoanerUtils.STAGE_NEW = 'new';
HampLoanerUtils.STAGE_PREPARE = 'prepare';
HampLoanerUtils.STAGE_DEPLOYED = 'deployed';
HampLoanerUtils.STAGE_COMPLETED = 'completed';
HampLoanerUtils.STAGE_CANCELLED = 'cancelled';
HampLoanerUtils.TASK_CLOSED_COMPLETE = 3;
HampLoanerUtils.TASK_PREPARE = 'prepare';
HampLoanerUtils.LOANER_ORDER_ACTION_CANCELLED = 'cancelled';
HampLoanerUtils.LOANER_ORDER_ACTION_DELETED = 'deleted';
HampLoanerUtils.LOANER_ORDER_TYPE_THIRD_PARTY = 'for_third_party_user';
HampLoanerUtils.ASSET_IN_USE_STATUSES = [HAMConstants.ASSET_STATUSES.IN_USE,
	HAMConstants.ASSET_STATUSES.CONSUMED];

#javascript

HAMAssetReservationUtils

var HAMAssetReservationUtils = Class.create();
HAMAssetReservationUtils.prototype = {
	initialize: function () { },

	isLoanerAssetAvailableBetweenDates: function (model, location, fromStartDate, toReturnDate, leadTime) { // eslint-disable-line
		var assetsAvailable = new sn_hamp.HampLoanerUtils().getFunctioningLoanerAssetsCount(location, model);
		if (assetsAvailable === 0) { return false; }

		var startDate = String(fromStartDate);
		var returnDate = String(toReturnDate);
		var leadTimeInDays = parseInt(leadTime, 10);
		var preparationStartDate = HampLoanerUtils.getPreparationStartDate(startDate, leadTimeInDays);

		var overlappingOrdersStartDates = [preparationStartDate];
		var overlappingOrdersEndDates = [returnDate];

		var overlappingOrdersGq = new global.GlideQuery('sn_hamp_loaner_asset_order')
			.where('model', model)
			.where('location', location)
			.where('is_waitlisted', false)
			.where('stage', '!=', HampLoanerUtils.STAGE_COMPLETED)
			.where('stage', '!=', HampLoanerUtils.STAGE_CANCELLED);
		overlappingOrdersGq = HampLoanerUtils.addLoanerOrdersOverlapQuery(
			overlappingOrdersGq,
			startDate,
			returnDate,
			leadTimeInDays,
			true /* isGlideQuery */
		);

		overlappingOrdersGq.select('preparation_start_date', 'return_date')
			.forEach(function (loanerOrder) {
				overlappingOrdersStartDates.push(loanerOrder.preparation_start_date);
				overlappingOrdersEndDates.push(loanerOrder.return_date);
			});

		overlappingOrdersStartDates.sort();
		overlappingOrdersEndDates.sort();

		var totalRequests = overlappingOrdersStartDates.length;
		var assetsReturned = 0;
		var assetsDeparted = 0;
		var assetsNeeded = 0;

		while ((assetsDeparted < totalRequests) && (assetsReturned < totalRequests)) {
			if (overlappingOrdersStartDates[assetsDeparted] <= overlappingOrdersEndDates[assetsReturned]) {
				assetsNeeded += 1;
				assetsDeparted += 1;
			} else if (overlappingOrdersStartDates[assetsDeparted] > overlappingOrdersEndDates[assetsReturned]) {
				assetsNeeded -= 1;
				assetsReturned += 1;
			}
			if (assetsNeeded > assetsAvailable) {
				return false;
			}
		}
		return true;
	},

	type: 'HAMAssetReservationUtils',
};

#javascript

SidebarMenu.vue

<script setup lang="ts">
import { shallowRef } from 'vue';
import { RouterLink } from 'vue-router';
import IconAngle from './icons/IconAngle.vue';
import IconEmail from './icons/IconEmail.vue';
import IconEmployeeGroup from './icons/IconEmployeeGroup.vue';
import IconExclamation from './icons/IconExclamation.vue';
import IconHome from './icons/IconHome.vue';

const isSidebarOpen = shallowRef<Boolean>(false)

function toggleSidebar() {
  isSidebarOpen.value = !isSidebarOpen.value;
}

</script>

<template>
  <div class="wrapper">
    <aside :vue:is-open="isSidebarOpen">
      <ul class="sidebar-head">
        <li>
          <img src="@/assets/logo.png" alt="logo" width="32" height="32">
        </li>
        <li>
          <button class="sidebar-toggle" :class="isSidebarOpen ? 'toggle-button' : ''">
            <IconAngle @click="toggleSidebar" />
          </button>
        </li>
      </ul>

      <h4 :transparent="!isSidebarOpen">Menu</h4>

      <ul>
        <li>
          <router-link to="/">
            <IconHome />
            <Transition name="fade">
              <span v-show="isSidebarOpen">Home</span>
            </Transition>
          </router-link>
        </li>
        <li>
          <router-link to="/about">
            <IconExclamation />
            <Transition name="fade">
              <span v-show="isSidebarOpen">About</span>
            </Transition>
          </router-link>
        </li>
        <li>
          <router-link to="/team">
            <IconEmployeeGroup />
            <Transition name="fade">
              <span v-show="isSidebarOpen">Team</span>
            </Transition>
          </router-link>
        </li>
        <li>
          <router-link to="/contact">
            <IconEmail />
            <Transition name="fade">
              <span v-show="isSidebarOpen">Contact</span>
            </Transition>
          </router-link>
        </li>
      </ul>
    </aside>
  </div>
</template>

<style scoped lang="scss">
@use '@/assets/scss/colors' as clr;

$sidebar-width: 4rem;
$toggle-duration: 300ms;
$sidebar-padding-inline-start: 1rem;

aside {
  color: clr.$primary;
  background: clr.$bg-dark;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-block: 1rem;
  transition: all $toggle-duration;
  width: $sidebar-width;
}

aside[vue\:is-open=true] {
  width: 3 * $sidebar-width;
}

ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block-end: 1rem;
}

img {
  object-fit: contain;
}

li {
  min-width: fit-content;
  cursor: pointer;
  padding-inline-start: $sidebar-padding-inline-start;

  &:hover {
    color: clr.$secondary;
    background-color: lighten($color: clr.$bg-dark, $amount: 5);
  }

  & a {
    // border-right: 0.25rem solid white;
    display: flex;
    align-items: center;
    column-gap: 0.75rem;
    position: relative;
    padding-block: 0.5rem;
  }

  a.router-link-exact-active::after {
    content: '';
    position: absolute;
    right: 0;
    width: 0.25rem;
    height: 100%;
    background-color: clr.$secondary;
  }
}
.sidebar-head {
  position: relative;
  // padding-block-end: 4rem;
}

.sidebar-toggle {
  padding-inline-start: $sidebar-padding-inline-start;
}

h4 {
  padding-block-end: 1rem;
  padding-inline-start: $sidebar-padding-inline-start;
  user-select: none;
  pointer-events: none;
  opacity: 0.5;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.125ch;
  transition: opacity $toggle-duration;
}

h4[transparent=true] {
  opacity: 0;
}

button {
  cursor: pointer;
  position: absolute;
  transition-duration: $toggle-duration;
  transition-property: transform, left, top;
  left: 0;
  top: 1rem;
  transform: translateX(0%) translateY(2rem) rotateZ(0deg);

  &.toggle-button {
    left: 100%;
    top: 0;
    transform: translateX(-100%) translateY(0rem) rotateZ(180deg);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition-property: opacity, transform;
  transition-duration: $toggle-duration;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}
</style>

#javascript

ScreenOrientation.ts

import { onMounted, onUnmounted, ref } from 'vue'

function useScreenOrientation() {
  const portrait = window.matchMedia('(orientation: portrait)')
  const orientation = ref(portrait.matches ? 'portrait' : 'landscape')

  function orientationListener(e: MediaQueryListEvent) {
    orientation.value = e.matches ? 'portrait' : 'landscape'
  }

  onMounted(() => {
    portrait.addEventListener('change', orientationListener)
  })

  onUnmounted(() => {
    portrait.removeEventListener('change', orientationListener)
  })

  return orientation
}

export {
  useScreenOrientation,
  useScreenOrientation as default,
}

#javascript

ScrollShadow.vue

<template>
  <div
    :style="styleGeneral"
    aria-label="container-scroll"
    :class="`container ${this.scroll ? 'containerScroll' : ''}`"
  >
    <div
      aria-label="subcontainer-scroll"
      ref="component"
      class="subcontainer"
      :style="styleSubcontainer"
    >
      <slot />
    </div>
  </div>
</template>

<script>
import ResizeObserver from 'resize-observer-polyfill';

export default {
  name: 'ScrollShadow',
  data() {
    let styleGeneral = this.styleContainer;
    styleGeneral += `--scrollColor:${this.scrollColor};`;
    styleGeneral += `--shadow:${this.isShadow ? this.shadow : ''};`;
    styleGeneral += `--scrollPadding:${this.scrollPadding};`;
    styleGeneral += `--scrollWidth:${this.scrollWidth};`;
    styleGeneral += `--scrollColorHover:${this.scrollColorHover}`;

    return {
      scroll: false,
      component: null,
      RO: null,
      styleGeneral,
      classGeneral: 'container'
    };
  },
  props: {
    styleContainer: { type: String, default: '' },
    styleSubcontainer: { type: String, default: '' },
    // Scroll color
    scrollColor: { type: String, default: '#c5c5c5' },
    // Left scroll padding
    scrollPadding: { type: String, default: '0px' },
    // Scroll Width
    scrollWidth: { type: String, default: '8px' },
    // Scroll color when hover
    scrollColorHover: { type: String, default: '#a6a6a6' },
    shadow: {
      type: String,
      default:
        '0 2px 4px rgba(0, 0, 0, 0.2) inset, 0 -2px 4px rgba(0, 0, 0, 0.2) inset'
    },
    // Verify shadow is visible
    isShadow: { type: Boolean, default: true }
  },
  mounted() {
    const refComponent = this.$refs.component;

    const RO = new ResizeObserver(() => {
      if (refComponent.clientHeight < refComponent.scrollHeight) {
        this.scroll = true;
      } else {
        this.scroll = false;
      }
    });

    RO.observe(refComponent);
  }
};
</script>

<style scoped>
.containerScroll {
  box-shadow: var(--shadow);
}
.container {
  width: 100%;
  overflow-y: hidden;
  box-sizing: border-box;
  display: flex;
}
.subcontainer {
  padding-right: var(--scrollPadding);
  overflow-y: auto;
  flex: 1;
  scrollbar-color: var(--scrollColor);
  scrollbar-width: thin;
}
.subcontainer::-webkit-scrollbar {
  width: var(--scrollWidth);
  background: transparent;
}
.subcontainer::-webkit-scrollbar-track {
  background: 'transparent';
}
.subcontainer::-webkit-scrollbar-thumb {
  background: var(--scrollColor);
  border-radius: 5px;
  overflow: hidden;
}
.subcontainer::-webkit-scrollbar-thumb:hover {
  background: var(--scrollColorHover);
}
</style>
 Save

#javascript #random #number

Random Generated Number

const randomID = new Date().getTime().toString().substring(3, 10)

#javascript

matching serial numbers records with no asset

[0:01:10.271] Script completed in scope global: script
Script execution history and recovery available here
Time: 0:00:00.165 id: esri_1[glide.20] primary_hash=-1044066828 (connpid=16123892) for: SELECT cmdb0.`sys_id` FROM cmdb cmdb0  WHERE cmdb0.`sys_class_path` LIKE '/!!%' AND cmdb0.`sys_class_name` = 'cmdb_ci_computer' AND cmdb0.`serial_number` IS NOT NULL  AND cmdb0.`asset` IS NULL  /* esri069, gs:71C93306939A7D102D82BF1C5CBA10DC, tx:6ef93f46939a7d102d82bf1c5cba1041, hash:-1044066828 */ 
[0:00:00.015] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
[0:00:00.015] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
[0:00:00.015] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
[0:00:00.014] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
[0:00:00.015] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
[0:00:00.014] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
[0:00:00.015] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
[0:00:00.014] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
[0:00:00.015] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
[0:00:00.015] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
[0:00:00.380] id: esri_1[glide.2 (connpid=16123874)] for: DBQuery#loadResultSet[alm_asset: ci=NULL^serial_numberISNOTEMPTY]
Time: 0:00:00.115 id: esri_1[glide.2] primary_hash=-1351908010 (connpid=16123874) for: SELECT alm_asset0.`sys_id` FROM alm_asset alm_asset0  WHERE alm_asset0.`ci` IS NULL  AND alm_asset0.`serial_number` IS NOT NULL  /* esri069, gs:71C93306939A7D102D82BF1C5CBA10DC, tx:6ef93f46939a7d102d82bf1c5cba1041, hash:-1351908010 */ 
[0:00:00.002] Expanding large row block (file.read: alm_asset, 10000 rows, 160000 dataSize)
[0:00:00.012] Compacting large row block (file.write: alm_asset 7492 rows 119872 saveSize)
*** Script: Match found: KVP4DGD29L
*** Script: Match found: C02TF7AMGTFM
*** Script: Match found: M7L4HFRXHD
*** Script: Match found: C02NPB7YG3QD
*** Script: Match found: VWV6XW22X1
*** Script: Match found: A92F011004613
*** Script: Match found: KVHH0QQG2X
*** Script: Match found: 632024000026
*** Script: Match found: A7PU011009006
*** Script: Match found: 000000000000000000000000000000000000000000047
*** Script: Match found: C02FN47VMD6R
*** Script: Match found: 12CVBY3
*** Script: Match found: 87
*** Script: Match found: H6GB762
*** Script: Match found: 58CXNH2
*** Script: Match found: CN88EBW0Q6
*** Script: Match found: MMYF.105266..ATI
*** Script: Match found: C02GJ0TXMD6R
*** Script: Match found: MTFYHCDT25
*** Script: Match found: C02DRAZZMD6R
*** Script: Match found: BBEC.502477..ATI
*** Script: Match found: FVFHJ0YVQ05P
*** Script: Match found: MNYF.101492..ATI
*** Script: Match found: FP22PYXQ4Q
*** Script: Match found: 54XXN73
*** Script: Match found: JXPWV6JJW0
*** Script: Match found: CNCCDDN19L
*** Script: Match found: XH9FMFJ7LK
*** Script: Match found: VQGKV4M06K
*** Script: Match found: LX7LD29CJY
*** Script: Match found: C02FN470MD6R
*** Script: Match found: C02FN47UMD6R
*** Script: Match found: X124YW9FNQ
*** Script: Match found: 87
*** Script: Match found: C02FN01MML88
*** Script: Match found: MQ6DY4T3V5
*** Script: Match found: MTF3VKG6LJ
*** Script: Match found: M7L7GH9VP4
*** Script: Match found: GCDJF2PY6N
*** Script: Match found: 81
*** Script: Match found: C44MRXWXW7
*** Script: Match found: XL4L471K9C
*** Script: Match found: YMQWQQKGF2
*** Script: Match found: C02TK2GYHF1R
*** Script: Match found: N2W0CXP2N4
*** Script: Match found: NGF7DW4R2M
*** Script: Match found: C02GJ0TVMD6R
*** Script: Match found: K32QD4J57H
*** Script: Match found: XL6L3906KV
*** Script: Match found: 76L17S2
*** Script: Match found: X7NW6QW291
*** Script: Match found: XL9DFYQHF7
*** Script: Match found: 87YR0S2
*** Script: Match found: H2WH313GQ6P0
*** Script: Match found: TV3V3PJWHL
*** Script: Match found: RV0NL40JLX
*** Script: Match found: FVFGG1C7Q05N
*** Script: Match found: J9H96QQF4X
*** Script: Match found: C02DRAZ6MD6R
*** Script: Match found: N95WP9167Q
*** Script: Match found: 70
*** Script: Match found: 57
*** Script: Match found: 86MWNZ3
*** Script: Match found: C02XK13JJGH6
*** Script: Match found: FTX1639R35M
*** Script: Match found: XWY34GTXM5
*** Script: Match found: C02H325DDV7P
*** Script: Match found: LQJ565TGGN
*** Script: Match found: C02YJ0PCJGH6
*** Script: Match found: 1P5J082
*** Script: Match found: C02DK4JZMD6R
*** Script: Match found: HW59XP92TX
*** Script: Match found: D25LL0J3F8JC
*** Script: Match found: T0WK941VHW
*** Script: Match found: C02G37PEMD6R
*** Script: Match found: C5KPMH3
*** Script: Match found: 64167FB9AD8C
*** Script: Match found: BBEC.509353..ATI
*** Script: Match found: C02X655XJGH6
*** Script: Match found: KVP4DGD29L
*** Script: Match found: 65063D3
*** Script: Match found: T637QHYVGY
*** Script: Match found: C02WL09EHTDF
*** Script: Match found: VVKKXXHHH9
*** Script: Match found: C02FP6P5MD6R
*** Script: Match found: C02G7111MD6R
*** Script: Match found: C02XV34VJHD3
*** Script: Match found: M6XCV9L75C
*** Script: Match found: FTX1607AJH8
*** Script: Match found: P6D4PGXK0J
*** Script: Match found: 80
*** Script: Match found: VK6D96XQLG
*** Script: Match found: FVFHJ2U5Q05P
*** Script: Match found: 80
*** Script: Match found: WDFCWJFQ14
*** Script: Match found: C6TZX23
*** Script: Match found: C02DG12VMD6R
*** Script: Match found: 000000000000000000000000000000000000000000047
*** Script: Match found: C02F75NCQ05N
*** Script: Match found: C02G710QMD6R
*** Script: Match found: C07YD0XYJYVY
*** Script: Match found: H2WHR0QUQ6NW
*** Script: Match found: JR36GH2
*** Script: Match found: A61H011005986
*** Script: Match found: FVFHJ0YZQ05P
*** Script: Match found: C02FN5LRMD6R
*** Script: Match found: H4TH20GRPN7C
*** Script: Match found: 9BDJ0T2
*** Script: Match found: G1C2614P7X
*** Script: Match found: VJ92GLW9Y5
*** Script: Match found: C994WR3FXP
*** Script: Match found: 81
*** Script: Match found: JQ0K44MJWH
*** Script: Match found: C02DC2CBPN7C
*** Script: Match found: GLCM7YL6T7
*** Script: Match found: WDCWV26THJ
*** Script: Match found: C07SN1CUG1J1
*** Script: Match found: 442539942
*** Script: Match found: C02FN47DMD6R
*** Script: Match found: C02DRB00MD6R
*** Script: Match found: 10
*** Script: Match found: IUEC.731218.ATI
*** Script: Match found: D7KQX9GQFV
*** Script: Match found: BFHS9Y2
*** Script: Match found: H4TFD0PHPN7C
*** Script: Match found: C02XV43FJGH6
*** Script: Match found: C02G325SQ05R
*** Script: Match found: 51
*** Script: Match found: XGQGTH29LW
*** Script: Match found: C02FN46DMD6R
*** Script: Match found: YD4WQ3LK9V
*** Script: Match found: GVQ397X30G
*** Script: Match found: JPBCG4W12Z
*** Script: Match found: C02FH82GMD6R
*** Script: Match found: C02FN01SML88
*** Script: Match found: C02DM0XRMD6T
*** Script: Match found: C02GC58WQ05N
*** Script: Match found: WVCJC64L54
*** Script: Match found: TK7K21796N
*** Script: Match found: V59V52CWX6
*** Script: Match found: C02FG6DFMD6R
*** Script: Match found: 81
*** Script: Match found: NHXQ7K92T7
*** Script: Match found: X162DL03XV
*** Script: Match found: GL9QVJ2P40
*** Script: Match found: 81
*** Script: Match found: YJJGR4G9DD
*** Script: Match found: XK1FWXDFX7
*** Script: Match found: WW4PLX2X33
*** Script: Match found: FYVP6RL1F2
*** Script: Match found: C02NQ0D5G3QD
*** Script: Match found: 82
*** Script: Match found: G4FXJFJ2DN
*** Script: Match found: C02WJ37XHTDF
*** Script: Match found: 82
*** Script: Match found: A5C4011118436
*** Script: Match found: A93E011006607
*** Script: Match found: PH9RF722M2
*** Script: Match found: 28LLPN3
[0:00:00.002] Expanding large row block (file.read: alm_asset, 10000 rows, 160000 dataSize)
[0:00:00.015] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
*** Script: Match found: QGPJ7G2V32
*** Script: Match found: PD4NCJJKJ6
*** Script: Match found: H2WFR8DAQ6NV
*** Script: Match found: PW54V3QWKV
*** Script: Match found: 4DZMRQ3
*** Script: Match found: C02FK4MGMD6R
*** Script: Match found: H2WFL0UDPJJ9
*** Script: Match found: Q2KCF2Q3KF
*** Script: Match found: JJ47QD71RH
*** Script: Match found: HTFPKHGCHK
*** Script: Match found: 20
*** Script: Match found: JX0LPN3
*** Script: Match found: PXLC43L30F
*** Script: Match found: RQYC6Q2WC5
*** Script: Match found: C02FL08PMD6R
*** Script: Match found: 792102000543
*** Script: Match found: WNTDT6TFD6
*** Script: Match found: C02DR9KGMD6R
*** Script: Match found: C02FN3XVMD6R
*** Script: Match found: WPKT91FPYF
*** Script: Match found: Q6J5R9NXJP
*** Script: Match found: C07SN0U6G1J2
*** Script: Match found: H4TG815FPN7C
*** Script: Match found: GD700WJPG1
*** Script: Match found: JJ7C3G2
*** Script: Match found: FXF7562
*** Script: Match found: N12HY2VD6P
*** Script: Match found: TKQHK06T4P
*** Script: Match found: H2WHP12QQ6NW
*** Script: Match found: 82
*** Script: Match found: WCAZAA747453
*** Script: Match found: YP6GK0461V
*** Script: Match found: C02G37P6MD6R
*** Script: Match found: W2GTC6JXCF
*** Script: Match found: MJ0G9WFY
*** Script: Match found: 6V4BXG2
*** Script: Match found: C02G711LMD6R
*** Script: Match found: FVFGP4SQQ05N
*** Script: Match found: FYVP6RL1F2
*** Script: Match found: C02FN01JML88
*** Script: Match found: QHX2MP2KTM
*** Script: Match found: A92F011006067
*** Script: Match found: 7B2KNN3
*** Script: Match found: H2WJF0EYQ6P0
*** Script: Match found: C02XV4HFJGH6
*** Script: Match found: R26W1QVKFV
*** Script: Match found: C02F11H2Q05N
*** Script: Match found: 27
*** Script: Match found: C02DF4ECMD6R
*** Script: Match found: LW44M7P73W
*** Script: Match found: G2KXGF3Y3M
*** Script: Match found: KJVNY9097C
*** Script: Match found: P21T2CYLX2
*** Script: Match found: 70
*** Script: Match found: 4NZ31Q2
*** Script: Match found: JJ954J3
*** Script: Match found: Y4475HK333
*** Script: Match found: NDXXPYX276
*** Script: Match found: 46
*** Script: Match found: QY54WWYG9C
*** Script: Match found: XDX44MVKCQ
*** Script: Match found: 06F930G
*** Script: Match found: FVFHJ0ZKQ05P
*** Script: Match found: GG102145
*** Script: Match found: 632016000060
*** Script: Match found: VH242MG2P6
*** Script: Match found: C02DC03NML86
*** Script: Match found: WNTDT6TFD6
*** Script: Match found: WVHT4QKYQ5
*** Script: Match found: Q7H7YJNJ0W
*** Script: Match found: W4TJ3Q13Y1
*** Script: Match found: 29
*** Script: Match found: DTF6WW1
*** Script: Match found: C02RH01JG8WM
*** Script: Match found: XCR9QMM6TV
*** Script: Match found: 27
*** Script: Match found: 9WFL0T2
*** Script: Match found: XH2JQ3C7G2
*** Script: Match found: YC3WDQ03YP
*** Script: Match found: P2PHHY2C9D
*** Script: Match found: WFQGWF9G0V
*** Script: Match found: H2WH312GQ6P0
*** Script: Match found: RXM9XH09QR
*** Script: Match found: JJ47QD71RH
*** Script: Match found: H2WJJ04LQ6P0
*** Script: Match found: 82
*** Script: Match found: C02M61CKFD59
*** Script: Match found: 4P321Q2
*** Script: Match found: C02FN46TMD6R
*** Script: Match found: 721523000029
*** Script: Match found: TJFX1W7Q4X
*** Script: Match found: C02DC02PML86
*** Script: Match found: C02GK0QRMD6T
*** Script: Match found: C07QM0A6G1J1
*** Script: Match found: TQWRWG292J
*** Script: Match found: 1Q5VBY3
*** Script: Match found: H2WJF0H1Q6P0
*** Script: Match found: VDGQ0HFWTY
*** Script: Match found: VDHJ7QK549
*** Script: Match found: 82
*** Script: Match found: FVFHJ0ZPQ05P
*** Script: Match found: WVNQWN66T2
*** Script: Match found: C02Z70KBLVDM
*** Script: Match found: C02DR9KKMD6R
*** Script: Match found: C02NQ0EQG3QD
*** Script: Match found: C02DG12WMD6R
*** Script: Match found: VP7XKW0232
*** Script: Match found: LQJ565TGGN
*** Script: Match found: A5C4011116895
*** Script: Match found: RXYLV6C07P
*** Script: Match found: WP4QYQ9N9D
*** Script: Match found: C02NQ055G3QD
*** Script: Match found: C02G37PAMD6R
*** Script: Match found: 000000000000000000000000000000000000000000047
*** Script: Match found: 27WGLQ2
*** Script: Match found: C07SN0TTG1J2
*** Script: Match found: C02GJ0TTMD6R
*** Script: Match found: C02YJ2JTJGH6
*** Script: Match found: MXF9DK210Q
*** Script: Match found: Q4NNF7L9CF
*** Script: Match found: VNB3Y51823
*** Script: Match found: H2WJF0WVQ6P0
*** Script: Match found: P9L7XWDHVQ
*** Script: Match found: LXMVH6KMH4
*** Script: Match found: C02DT1FEMD6R
*** Script: Match found: C02M60YPFD59
*** Script: Match found: W4R93MH71R
*** Script: Match found: 632024000027
*** Script: Match found: C02DG12NMD6R
*** Script: Match found: C02FN47QMD6R
*** Script: Match found: C02TK249HF1R
*** Script: Match found: X1VQC22GM7
*** Script: Match found: 9ZGPM53
*** Script: Match found: A4Y4011019972
*** Script: Match found: LHXCXQMMPH
*** Script: Match found: V0QPJ6P9HW
*** Script: Match found: QQF9PT94WW
*** Script: Match found: C02G37P7MD6R
*** Script: Match found: C02VL2REHTDF
*** Script: Match found: 51
*** Script: Match found: C02C32EELVDM
*** Script: Match found: XT9KX3XH9X
*** Script: Match found: MXBCMCP0TZ
*** Script: Match found: C02G7119MD6R
*** Script: Match found: FYVP6RL1F2
*** Script: Match found: C07DC09XPJJ9
*** Script: Match found: FVWF9HJ70N
*** Script: Match found: TDLX93TY02
*** Script: Match found: C19KWVY3HK
*** Script: Match found: G17MJP21CP
*** Script: Match found: C02G711AMD6R
*** Script: Match found: C02FN46YMD6R
*** Script: Match found: V4W2T0917F
*** Script: Match found: HTM6NPHT7W
*** Script: Match found: X54WFQLNWM
*** Script: Match found: 6KWL4W3
*** Script: Match found: TMQQH6NV26
*** Script: Match found: XGFWJJ6WM4
*** Script: Match found: NYXVMJ9GH6
*** Script: Match found: JVJC9KQ0QT
*** Script: Match found: C02G7118MD6R
*** Script: Match found: C02FN465MD6R
*** Script: Match found: DYXNHWW73W
*** Script: Match found: C02RH01WG8WM
*** Script: Match found: 66QLRQ2
*** Script: Match found: X19GY2WYLH
*** Script: Match found: NJ6417KLJH
*** Script: Match found: A7AK011001248
[0:00:00.003] Expanding large row block (file.read: alm_asset, 10000 rows, 160000 dataSize)
[0:00:00.016] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
*** Script: Match found: FOC1802U1BW
*** Script: Match found: WCAWZ1332959
*** Script: Match found: A7AK011007413
*** Script: Match found: 54
*** Script: Match found: W4M9561L42
*** Script: Match found: FGHPZ33
*** Script: Match found: 3PMLHR2
*** Script: Match found: QK9QXWXCW4
*** Script: Match found: LPY3H9Y5LX
*** Script: Match found: YT6927PPGP
*** Script: Match found: DFJW4WPG2X
*** Script: Match found: Q00HT0CFCG
*** Script: Match found: C02M60YPFD59
*** Script: Match found: A7AK011001244
*** Script: Match found: R7Q4KVKG9J
*** Script: Match found: P14RYY0WTG
*** Script: Match found: D25V60J5J1GP
*** Script: Match found: 48S07S2
*** Script: Match found: C07FT1VQQ6P0
*** Script: Match found: FVFHJ1GTQ05P
*** Script: Match found: HTF6WW1
*** Script: Match found: J31MVM21WH
*** Script: Match found: PNR46WGMXG
*** Script: Match found: VQXXPNX7M9
*** Script: Match found: C02DG132MD6R
*** Script: Match found: FVFHK3D1Q05P
*** Script: Match found: FVFHJ0ZJQ05P
*** Script: Match found: 82
*** Script: Match found: C02Z70L1LVDM
*** Script: Match found: T75527XTF7
*** Script: Match found: LX97LFCQMC
*** Script: Match found: A7PU011009087
*** Script: Match found: H2WFT0T7Q6P0
*** Script: Match found: H4LY921XV3
*** Script: Match found: VNB3B49463
*** Script: Match found: H2WHK0VEQ6NW
*** Script: Match found: 87KWMR2
*** Script: Match found: XCR9HD6YV7
*** Script: Match found: C02YJ20PJGH6
*** Script: Match found: X939JQGJXD
*** Script: Match found: C02FN47GMD6R
*** Script: Match found: 3952GC2
*** Script: Match found: 47MSMV2
*** Script: Match found: CNGXC24539
*** Script: Match found: H2WJ10ZSQ6P0
*** Script: Match found: HWMQLQWN6J
*** Script: Match found: C02FK1QEMD6R
*** Script: Match found: 9X5S4X3
*** Script: Match found: 27
*** Script: Match found: C02FN01FML88
*** Script: Match found: YL0JFV5WR4
*** Script: Match found: TWG70RVYW3
*** Script: Match found: C02DG12RMD6R
*** Script: Match found: C02FN46PMD6R
*** Script: Match found: HNRGJB2
*** Script: Match found: Q0V7TKX0WJ
*** Script: Match found: J09YFC45P9
*** Script: Match found: C02M60YSFD59
*** Script: Match found: D4X7RLXQRX
*** Script: Match found: 82
*** Script: Match found: H2WJF0LVQ6P0
*** Script: Match found: 26LLPN3
*** Script: Match found: VM2T6KX1XY
*** Script: Match found: P34MCYKQJR
*** Script: Match found: YQ27FH3XL4
*** Script: Match found: CND8F2S0KG
*** Script: Match found: J29N02V70X
*** Script: Match found: JP26HC747T
*** Script: Match found: FVFHN2CQQ05P
*** Script: Match found: W25X46R95X
*** Script: Match found: WGQXW0XC92
*** Script: Match found: 85JLZD3
*** Script: Match found: C02DT0BGMD6R
*** Script: Match found: C02DP89MMD6R
*** Script: Match found: BBEC.538181..ATI
*** Script: Match found: N0G19WNPJL
*** Script: Match found: C02DRAZLMD6R
*** Script: Match found: VQV04JX5N6
*** Script: Match found: C02F30BPMD6R
*** Script: Match found: Y6GCXTLJ7K
*** Script: Match found: R9NFP069VC
*** Script: Match found: 8DGTLS1
*** Script: Match found: JFX6XM43VJ
*** Script: Match found: H2WJJ010Q6P0
*** Script: Match found: PJY9V3HX3T
*** Script: Match found: G7DGMFWJKP
*** Script: Match found: CQ1FTP6KF4
*** Script: Match found: Q7V5H7LPWX
*** Script: Match found: HQM217L09T
*** Script: Match found: QMFWQ425XH
*** Script: Match found: C02G37NUMD6R
*** Script: Match found: V9TT6G7QF1
*** Script: Match found: DD136120226006
*** Script: Match found: NNFGP09G6K
*** Script: Match found: C07QM0A7G1J1
*** Script: Match found: WF4219TK76
*** Script: Match found: C1MPJ6MAG944
*** Script: Match found: JJ2444N3X2
*** Script: Match found: L7QD9LFH12
*** Script: Match found: LVL49RCXL2
*** Script: Match found: WMAZA8295008
*** Script: Match found: C02MD323FD59
*** Script: Match found: 81
*** Script: Match found: HTHQLVVNH7
*** Script: Match found: YVP2H639W3
*** Script: Match found: XP4Y2T97K7
*** Script: Match found: H2WJF0L3Q6P0
*** Script: Match found: H2WJF1GBQ6P0
*** Script: Match found: R59T3C2J4X
*** Script: Match found: CNDX247497
*** Script: Match found: YY39QGJ4N4
*** Script: Match found: XFMGVF499W
*** Script: Match found: V43WP9RXHY
*** Script: Match found: C02FN46AMD6R
*** Script: Match found: CJ4RYQ7WCY
*** Script: Match found: XN65G6X3HT
*** Script: Match found: 000000000000000000000000000000000000000000047
*** Script: Match found: 4BJD2Z3
*** Script: Match found: JMJ6DY4W39
*** Script: Match found: C02G7117MD6R
*** Script: Match found: FVFGP4U2Q05N
*** Script: Match found: C02G6132Q05R
*** Script: Match found: 81
*** Script: Match found: YR372XCY39
*** Script: Match found: VJWNVVQM23
*** Script: Match found: M24CQXYTG2
*** Script: Match found: 12D6SN2
*** Script: Match found: C02CK052MD6R
*** Script: Match found: 632015000581
*** Script: Match found: 632016000061
*** Script: Match found: VT090H62D0
*** Script: Match found: M46233YMVP
*** Script: Match found: 80511200093
*** Script: Match found: YDJ2WH97DP
*** Script: Match found: H2WJH0K8Q6P0
*** Script: Match found: R47WH362G6
*** Script: Match found: CN57DF30BP
*** Script: Match found: C02T5195H040
*** Script: Match found: C07QM0A5G1J1
*** Script: Match found: 27
*** Script: Match found: 2DNC3G2
*** Script: Match found: C02KF1D8FFT4
*** Script: Match found: 9TF6WW1
*** Script: Match found: 27
*** Script: Match found: YK9DN2P6HG
*** Script: Match found: CND9D4GB4R
*** Script: Match found: FNHT6M39TH
*** Script: Match found: R4NY0W029P
*** Script: Match found: KT2HCWC091
*** Script: Match found: 4NZ31Q2
*** Script: Match found: 93N1NV2
*** Script: Match found: QV7VQ0K7D1
*** Script: Match found: FOC1802X1J6
*** Script: Match found: XD23RVW7XM
*** Script: Match found: HPD4YXY42J
*** Script: Match found: 82
*** Script: Match found: FV73QGCXMK
*** Script: Match found: H7GYYDHJ70
*** Script: Match found: 54
*** Script: Match found: H00W2XT72L
*** Script: Match found: H2WF113XQ6NV
*** Script: Match found: PMT2FT9MY9
*** Script: Match found: C02G711DMD6R
*** Script: Match found: H2WJF0FBQ6P0
*** Script: Match found: 7FGZ6S2
*** Script: Match found: HYF4W12DX4
*** Script: Match found: GXRR97F205
*** Script: Match found: 000000000000000000000000000000000000000000047
*** Script: Match found: C02LL723FD59
*** Script: Match found: XGCH7RTXLL
*** Script: Match found: C02GM16EMD6R
*** Script: Match found: Y96KFLVXKM
*** Script: Match found: C02G710LMD6R
*** Script: Match found: C02Z22GNLVCF
*** Script: Match found: VG6XF2JXH5
*** Script: Match found: C02DRCY3MD6R
[0:00:00.002] Expanding large row block (file.read: alm_asset, 10000 rows, 160000 dataSize)
[0:00:00.019] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
*** Script: Match found: M24L7RD2VP
*** Script: Match found: VRCYVYTQKC
*** Script: Match found: TV5VYXNW9P
*** Script: Match found: CNGCQ88043
*** Script: Match found: C02RT2SFG8WM
*** Script: Match found: Q6P1W6TH9P
*** Script: Match found: CW9F2P46Q0
*** Script: Match found: C02G7113MD6R
*** Script: Match found: C07YD0Y1JYVY
*** Script: Match found: K72M7N6H1J
*** Script: Match found: FC7GWCWFTP
*** Script: Match found: C4ZXTQ3
*** Script: Match found: NHYXFKW6WD
*** Script: Match found: C02G37PGMD6R
*** Script: Match found: 88SGN32
*** Script: Match found: TY7DNQ7952
*** Script: Match found: 10C2F8A
*** Script: Match found: C02DT1FGMD6R
*** Script: Match found: C02GD2HCMD6R
*** Script: Match found: QN2PF6V2D0
*** Script: Match found: C02G711JMD6R
*** Script: Match found: 000000000000000000000000000000000000000000047
*** Script: Match found: J4QJGD7K7Q
*** Script: Match found: JX2L3VXPWD
*** Script: Match found: 81
*** Script: Match found: C02DC0YMML86
*** Script: Match found: 70
*** Script: Match found: V73TC7N1XY
*** Script: Match found: X7D91L64DX
*** Script: Match found: FM2NKVCWJ9
*** Script: Match found: A5C4011118467
*** Script: Match found: F79C07LTXN
*** Script: Match found: CN59NFW0VS
*** Script: Match found: QTF43RP0WP
*** Script: Match found: A61D011004605
*** Script: Match found: MXH5XKXVKX
*** Script: Match found: C02FN46ZMD6R
*** Script: Match found: H244GC2
*** Script: Match found: WQP24TW7KK
*** Script: Match found: T90HJCM90P
*** Script: Match found: C07SN0TXG1J2
*** Script: Match found: 55
*** Script: Match found: A5C4011123823
*** Script: Match found: YRCVW0VP36
*** Script: Match found: GCBHMV2
*** Script: Match found: T6JWK057XM
*** Script: Match found: W9HFWNRF2W
*** Script: Match found: CHKP5S3
*** Script: Match found: W0FLMJ70YG
*** Script: Match found: 1
*** Script: Match found: 6X9XFC2
*** Script: Match found: FVFHJ0YYQ05P
*** Script: Match found: WG7DY66G1F
*** Script: Match found: H2WH30QKQ6P0
*** Script: Match found: DD136120224012
*** Script: Match found: C02GK0HDMD6T
*** Script: Match found: FY621R0Q26
*** Script: Match found: 29
*** Script: Match found: CNBH100389
*** Script: Match found: FVFHJ0ZNQ05P
*** Script: Match found: V46VKTVHWL
*** Script: Match found: HPXYVP37RX
*** Script: Match found: 12Q0S22
*** Script: Match found: C02FF0ESMD6R
*** Script: Match found: WC4KVF4F99
*** Script: Match found: QL6F9RM630
*** Script: Match found: H2WJQ03HQ6P0
*** Script: Match found: C02DG139MD6R
*** Script: Match found: 27
*** Script: Match found: X742HYD9MQ
*** Script: Match found: C5TSMH3
*** Script: Match found: FOC1802U1CR
*** Script: Match found: G37RYL9Q0W
*** Script: Match found: RYQ7MFDWY1
*** Script: Match found: QTJNVW67XL
*** Script: Match found: C02FN46WMD6R
*** Script: Match found: A7PU011007186
*** Script: Match found: C02FLAAEMD6R
*** Script: Match found: G4FKJM2
*** Script: Match found: C02G703JML88
*** Script: Match found: FOC1802Y7C4
*** Script: Match found: 6SSKMV2
*** Script: Match found: FVFF699AQ6LR
*** Script: Match found: C77DPY2
*** Script: Match found: A61H011005971
*** Script: Match found: 86
*** Script: Match found: W4Y7H1JFDH
*** Script: Match found: C02G37KQMD6R
*** Script: Match found: 70
*** Script: Match found: YQY6TJ4LYD
*** Script: Match found: 8VTY373
*** Script: Match found: G7DSYD3
*** Script: Match found: C02FN01TML88
*** Script: Match found: C02FN47EMD6R
*** Script: Match found: YQ167QD6RV
*** Script: Match found: D3C2GC2
*** Script: Match found: 87
*** Script: Match found: P4426Y6T4N
*** Script: Match found: H2WJF0L8Q6P0
*** Script: Match found: JLH214PRY9
*** Script: Match found: P9HK3YPL44
*** Script: Match found: C02TK2GYHF1R
*** Script: Match found: C02FN35JQ05N
*** Script: Match found: QL3WNH7Y7Y
*** Script: Match found: WCKPX0Q0QF
*** Script: Match found: 347GQ73
*** Script: Match found: R46Q71F2PW
*** Script: Match found: C02F734PMD6R
*** Script: Match found: C02G132JMD6R
*** Script: Match found: QN6N07CNV9
*** Script: Match found: FG60PFJXH6
*** Script: Match found: H2WH312QQ6P0
*** Script: Match found: C02DG12ZMD6R
*** Script: Match found: LH6N5VKMXX
*** Script: Match found: LVL49RCXL2
*** Script: Match found: R66907XDGQ
*** Script: Match found: WRFPMF7050
*** Script: Match found: Y33V932GY7
*** Script: Match found: A5AY011012590
*** Script: Match found: TWGDGP42HY
*** Script: Match found: CNDCGB8006
*** Script: Match found: YR4D4LFTXN
*** Script: Match found: JMR6RN2
*** Script: Match found: 792108000013
*** Script: Match found: C02DR3BRMD6R
*** Script: Match found: XD2700PH70
*** Script: Match found: VX1X90G6L7
*** Script: Match found: C02DV1L2MD6R
*** Script: Match found: C02DRAYWMD6R
*** Script: Match found: D25QR09YGQ17
*** Script: Match found: XCKQC5707Q
*** Script: Match found: WC435P694R
*** Script: Match found: D25LG2USF8JC
*** Script: Match found: V0VQ95WJNW
*** Script: Match found: HV29PD67TC
*** Script: Match found: DS/NTW-094TKJ-1280
*** Script: Match found: C02D90PYMD6R
*** Script: Match found: C02DT0V4MD6R
*** Script: Match found: W0WXHL79V2
*** Script: Match found: H2WJF1G8Q6P0
*** Script: Match found: X27VXVN77V
*** Script: Match found: Y0H993CQV2
*** Script: Match found: Q1W1Q0QXGC
*** Script: Match found: VWFYCQQJW6
*** Script: Match found: C02DC8B3MD6R
*** Script: Match found: P7HFW2TXGC
*** Script: Match found: MQTXD0YJXP
*** Script: Match found: 81
*** Script: Match found: QVMQQWJKTM
*** Script: Match found: VF5293F41X
*** Script: Match found: C02G711BMD6R
*** Script: Match found: 85
*** Script: Match found: H2WJF04AQ6P0
*** Script: Match found: 18
*** Script: Match found: JH6HF4V264
*** Script: Match found: FX6QK00P6F
*** Script: Match found: PXY29QKJJM
*** Script: Match found: VM9XDH2CX2
*** Script: Match found: WU2Q10076150
*** Script: Match found: 63MSMV2
*** Script: Match found: 7HDKJM2
*** Script: Match found: W1JQCJWFD9
*** Script: Match found: C02DJ0NKMD6R
*** Script: Match found: 70.L1XX.801169..TWCC
*** Script: Match found: 3Y3SVV3
*** Script: Match found: C02RT2PKG8WM
*** Script: Match found: H3KW67P59R
*** Script: Match found: A61H011006924
*** Script: Match found: C07SN0TXG1J2
*** Script: Match found: GQ65900MR6
*** Script: Match found: C02GD0E4ML7M
*** Script: Match found: YV7CYQ5K7M
*** Script: Match found: C02FF1TNMD6T
*** Script: Match found: FVFHJ0ZTQ05P
*** Script: Match found: F5V2MD4G9X
*** Script: Match found: FM5VBY3
*** Script: Match found: C02G7115MD6R
*** Script: Match found: WPWR49QT25
*** Script: Match found: C07YH30BJYW0
[0:00:00.004] Expanding large row block (file.read: alm_asset, 10000 rows, 160000 dataSize)
[0:00:00.016] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
*** Script: Match found: YHY77N47HW
*** Script: Match found: C02FN01HML88
*** Script: Match found: A5C4011110994
*** Script: Match found: R6XVJR7740
*** Script: Match found: KPD46NG634
*** Script: Match found: XDDXP21721
*** Script: Match found: C02DG12TMD6R
*** Script: Match found: 20
*** Script: Match found: 632015000580
*** Script: Match found: XL6NHLH2RF
*** Script: Match found: TH92JJ9H2G
*** Script: Match found: WMHW9GWRXT
*** Script: Match found: JCWQFX6WL6
*** Script: Match found: TR4JR2N9RR
*** Script: Match found: C02TG07ZGY6N
*** Script: Match found: 70
*** Script: Match found: CNBCK8Z133
*** Script: Match found: 9FWTBY3
*** Script: Match found: 255H4E317P260729
*** Script: Match found: WGKXJGXNQM
*** Script: Match found: TNVTVKKWMY
*** Script: Match found: C02GJ0TJMD6R
*** Script: Match found: NX7JQMGKN1
*** Script: Match found: D25XV7U1J1GQ
*** Script: Match found: VWXWFCV7WV
*** Script: Match found: C02FN46RMD6R
*** Script: Match found: 85
*** Script: Match found: JJM4H62FDH
*** Script: Match found: PT9DXWXWXP
*** Script: Match found: 012076570857
*** Script: Match found: IUEC.769364.ATI
*** Script: Match found: C02QJ3PHG8WM
*** Script: Match found: K2M5F6HY9G
*** Script: Match found: QM407WGJGV
*** Script: Match found: MT991G6V6D
*** Script: Match found: W76HJMV43P
*** Script: Match found: Y5HYTXR5G9
*** Script: Match found: 1007P12
*** Script: Match found: C02FN5KCMD6R
*** Script: Match found: Y49TGR6VWY
*** Script: Match found: 31KKJ72
*** Script: Match found: QD3YPVF3V7
*** Script: Match found: C07S80KCG1J1
*** Script: Match found: X676T41KGF
*** Script: Match found: C07XKVHBJYVW
*** Script: Match found: C02FD6JDQ05N
*** Script: Match found: R4MD21V7FY
*** Script: Match found: VNB8H3416G
*** Script: Match found: C02G6133Q05R
*** Script: Match found: 000000000000000000000000000000000000000000047
*** Script: Match found: C02G711GMD6R
*** Script: Match found: FVFHJ0ZEQ05P
*** Script: Match found: 70
*** Script: Match found: BCPPSQ2
*** Script: Match found: LVVXJ5F6LX
*** Script: Match found: QX7MCYFKQH
*** Script: Match found: 54
*** Script: Match found: DMGMC671F1
*** Script: Match found: X3XX36G2YK
*** Script: Match found: T0WFYX9C7N
*** Script: Match found: NC2X921FGP
*** Script: Match found: W7PW6LC743
*** Script: Match found: C02KJ0MTFFT4
*** Script: Match found: 4RBWJ02
*** Script: Match found: C02G710KMD6R
*** Script: Match found: 95
*** Script: Match found: PJVHL0FR9N
*** Script: Match found: C02DG1LXMD6T
*** Script: Match found: C02G90A8MD6R
*** Script: Match found: H2WJH05CQ6P0
*** Script: Match found: C02FN471MD6R
*** Script: Match found: H2WJF0F7Q6P0
*** Script: Match found: C02FK1D2MD6R
*** Script: Match found: HFF996719T
*** Script: Match found: PYJY09Q43F
*** Script: Match found: AA2M011006164
*** Script: Match found: PVPJHGKJ23
*** Script: Match found: C02G37P2MD6R
*** Script: Match found: WCAV55658037
*** Script: Match found: JF5VBY3
*** Script: Match found: VNB3S06397
*** Script: Match found: 721828000008
*** Script: Match found: G17DP9P9DK
*** Script: Match found: FY6LM64076
*** Script: Match found: WJGW62HCVJ
*** Script: Match found: HHG73PJ47Y
*** Script: Match found: C02FN46CMD6R
*** Script: Match found: XRX27M073L
*** Script: Match found: D764M6C627
*** Script: Match found: C02XK19RJGH6
*** Script: Match found: H02MPWLFPF
*** Script: Match found: 10272DP
*** Script: Match found: C02DF2JFMD6R
*** Script: Match found: A5C2011107365
*** Script: Match found: V6954FMYKR
*** Script: Match found: XKRQX6LL6K
*** Script: Match found: C02GJ0TKMD6R
*** Script: Match found: WRW2N2XR6J
*** Script: Match found: H2WJF0CFQ6P0
*** Script: Match found: A7AK011001334
*** Script: Match found: 1VHT3M3
*** Script: Match found: YDY9P4NPJ1
*** Script: Match found: C1FJJRFNJG
*** Script: Match found: NY731YQPWH
*** Script: Match found: 2SS4PX2
*** Script: Match found: TTM271500AC
*** Script: Match found: Y6Q5CQ03PJ
*** Script: Match found: C02DG12MMD6R
*** Script: Match found: C02G37KPMD6R
*** Script: Match found: GWP0D42
*** Script: Match found: NYQR3GPL6W
*** Script: Match found: FV34GC2
*** Script: Match found: C02ZK3ZNLVDQ
*** Script: Match found: 81
*** Script: Match found: K4GQY007L5
*** Script: Match found: 9MQ5QN2
*** Script: Match found: XL4JY3DJRP
*** Script: Match found: T34T59VR4K
*** Script: Match found: C02G711FMD6R
*** Script: Match found: C02VL20PHTDF
*** Script: Match found: C02DT2V0ML7L
*** Script: Match found: C02G711HMD6R
*** Script: Match found: C02GJ0TQMD6R
*** Script: Match found: N0G9369P6K
*** Script: Match found: FVFGH5DMQ05P
*** Script: Match found: FOC1802Y7BG
*** Script: Match found: G0X9VHXJ07
*** Script: Match found: C02XV441JGH6
*** Script: Match found: FHY29GCQ5P
*** Script: Match found: FHPPSQ2
*** Script: Match found: C02F51SKML85
*** Script: Match found: 0
*** Script: Match found: C02G37M3MD6R
*** Script: Match found: H2WHV0TNQ6P0
*** Script: Match found: 3Y4S0G2
*** Script: Match found: 4QVCP72
*** Script: Match found: C02FN01TML88
*** Script: Match found: NY694GQXKD
*** Script: Match found: C02ZQ7VVMD6R
*** Script: Match found: B3DD7Y2
*** Script: Match found: 1007P12
*** Script: Match found: 6X9XFC2
*** Script: Match found: HLHYNK3
*** Script: Match found: C02G37NPMD6R
*** Script: Match found: Y6DXMFH63K
*** Script: Match found: QQDCPWVWGT
*** Script: Match found: 000000000000000000000000000000000000000000047
*** Script: Match found: C07DC00APJJ9
*** Script: Match found: C02G37NXMD6R
*** Script: Match found: C02FL4KMMD6R
*** Script: Match found: KQT4W4XQPK
*** Script: Match found: 4ZS7R53
*** Script: Match found: A4Y4011021594
*** Script: Match found: H2WHV0EFPJJ9
*** Script: Match found: RVQDT4GYYG
*** Script: Match found: C02G7110MD6R
*** Script: Match found: C02G37PCMD6R
*** Script: Match found: XDVHMFJ6RF
*** Script: Match found: C163HQJPGF
*** Script: Match found: C02DG12YMD6R
*** Script: Match found: 81
*** Script: Match found: C07S80L3G1J1
*** Script: Match found: C02FN2HHMD6T
*** Script: Match found: 4H5VBY3
*** Script: Match found: A61F011011875
*** Script: Match found: PGD9MJFCQV
*** Script: Match found: YVHWKG1HXG
*** Script: Match found: C02M60YFFD59
*** Script: Match found: C02DR9HWMD6R
*** Script: Match found: FB0MRL1
*** Script: Match found: CTGDWHFJ0L
*** Script: Match found: NMFWGC76H4
*** Script: Match found: C02GK0QJMD6T
*** Script: Match found: 69B0R72
*** Script: Match found: C02DQ27TMD6R
*** Script: Match found: HK7J33GMVQ
*** Script: Match found: C02XK10XJHD3
*** Script: Match found: M4N4D7X343
[0:00:00.002] Expanding large row block (file.read: alm_asset, 10000 rows, 160000 dataSize)
[0:00:00.014] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
*** Script: Match found: HL9XQT2R03
*** Script: Match found: FK2CXYRWV4
*** Script: Match found: CPYR9Y2
*** Script: Match found: H2WJF048Q6P0
*** Script: Match found: GGX5M4XMPP
*** Script: Match found: QWTGY41WGM
*** Script: Match found: BZZTBY3
*** Script: Match found: C02FN47PMD6R
*** Script: Match found: C02DR9WEMD6R
*** Script: Match found: F0VQ0FHCYF
*** Script: Match found: D25NM00EF8J5
*** Script: Match found: C02DRAZ3MD6R
*** Script: Match found: D25WK06RJ1GQ
*** Script: Match found: C02TF7M7GTFM
*** Script: Match found: 82
*** Script: Match found: 80
*** Script: Match found: FOC1752X04X
*** Script: Match found: C02G703AML88
*** Script: Match found: GGK372W647
*** Script: Match found: G4YVW04QDT
*** Script: Match found: 29
*** Script: Match found: WD7V00X2NH
*** Script: Match found: XHLXYTR20X
*** Script: Match found: R77NTP9265
*** Script: Match found: KP4506QRHC
*** Script: Match found: 81
*** Script: Match found: C07FN1QQQ6P0
*** Script: Match found: D25RH01WGQ17
*** Script: Match found: WM6Y4L4V3F
*** Script: Match found: C02FN01QML88
*** Script: Match found: C02M60WPFD59
*** Script: Match found: QQT6KM7PFD
*** Script: Match found: H2WH30U0Q6P0
*** Script: Match found: KXQ37HR4YG
*** Script: Match found: C02F959EMD6R
*** Script: Match found: 20
*** Script: Match found: HD2NQPJ21M
*** Script: Match found: C02G37KRMD6R
*** Script: Match found: C02YH3EUJHD3
*** Script: Match found: C02NQ05HG3QD
*** Script: Match found: C02G710NMD6R
*** Script: Match found: GY75P67WH9
*** Script: Match found: C02MD325FD59
*** Script: Match found: 12YLR22
*** Script: Match found: H57MXH6374
*** Script: Match found: ESRIINC-1
*** Script: Match found: C02FN47RMD6R
*** Script: Match found: DH85VV3
*** Script: Match found: XVFKYCT4K3
*** Script: Match found: GTF6WW1
*** Script: Match found: H2WG30Y0Q6P0
*** Script: Match found: PMJPL2LK71
*** Script: Match found: CNRXJ84620
*** Script: Match found: 2L1WBY3
*** Script: Match found: CNDF112327
*** Script: Match found: C02FJ3T9MD6R
*** Script: Match found: C07YD0YEJYVY
*** Script: Match found: GX5YY4Y17H
*** Script: Match found: 96
*** Script: Match found: C02DG12LMD6R
*** Script: Match found: R3K0G9N2FY
*** Script: Match found: 41Q9LQ2
*** Script: Match found: W6YQ0NJ63P
*** Script: Match found: 84
*** Script: Match found: C02MD3CEFD59
*** Script: Match found: 4P041Q2
*** Script: Match found: Y9J5W3T5W0
*** Script: Match found: RPQCV4QNW4
*** Script: Match found: A5C4011117186
*** Script: Match found: C02F72UEML85
*** Script: Match found: WD9NNXXFQ2
*** Script: Match found: 8J1HK13
*** Script: Match found: H2WJF0LQQ6P0
*** Script: Match found: C02XJ4EBJGH6
*** Script: Match found: C02DRCN8MD6R
*** Script: Match found: A5C4011122489
*** Script: Match found: C02W52WQHTDF
*** Script: Match found: C02M60XGFD59
*** Script: Match found: C02FN5LUMD6R
*** Script: Match found: C07YH30BJYW0
*** Script: Match found: C02GJ0TUMD6R
*** Script: Match found: W63HPX79D2
*** Script: Match found: C239L33
*** Script: Match found: FOC1802U1E3
*** Script: Match found: XCR9HD6YV7
*** Script: Match found: F194C69FM9
*** Script: Match found: FVFGP4ZQQ05N
*** Script: Match found: C02RF1AGG8WM
*** Script: Match found: C02G37KSMD6R
*** Script: Match found: R27CYR9CYP
*** Script: Match found: XX7713KYQ5
*** Script: Match found: VNB3Y52070
*** Script: Match found: DL1WBY3
*** Script: Match found: W7H0FPDW2H
*** Script: Match found: 4P131Q2
*** Script: Match found: C02G711CMD6R
*** Script: Match found: P4K7YF3P34
*** Script: Match found: JD26M4N9N9
*** Script: Match found: PG94CFX2HP
*** Script: Match found: C02RV22CG8WM
*** Script: Match found: C02DG12MMD6R
*** Script: Match found: XFMG6QRYV6
*** Script: Match found: Y57RJ2V7X4
*** Script: Match found: W4TWKHK40W
*** Script: Match found: YDQ1GD9N4R
*** Script: Match found: 90
*** Script: Match found: C02FN46JMD6R
*** Script: Match found: JD7N0QJ2C7
*** Script: Match found: JPW2K2YWYL
*** Script: Match found: KVQ6GLF7G9
*** Script: Match found: JXRRVV3
*** Script: Match found: C07S80JFG1J1
*** Script: Match found: 1420P73
*** Script: Match found: BBYF.103372..ATI
*** Script: Match found: 82
*** Script: Match found: C02DG136MD6R
*** Script: Match found: XC2CW7T32M
*** Script: Match found: L5J3WRRW2H
*** Script: Match found: QNRY4359XM
*** Script: Match found: 3QZ5GH2
*** Script: Match found: 26
*** Script: Match found: VTQ0WGN4LD
*** Script: Match found: 90
*** Script: Match found: 564W8B3
*** Script: Match found: 1-80-119056
*** Script: Match found: FVFHJ0ZFQ05P
*** Script: Match found: DNBLYY2
*** Script: Match found: VNXV9WV0MX
*** Script: Match found: 20
*** Script: Match found: QXX7F023XH
*** Script: Match found: C02FG13XMD6R
*** Script: Match found: TKHYJPFJ2D
*** Script: Match found: VFJ7LN9264
*** Script: Match found: H2WH30M7Q6P0
*** Script: Match found: KX097DJFY3
*** Script: Match found: Y2N32CVM6J
*** Script: Match found: HNV34X5679
*** Script: Match found: H2WJF0LCQ6P0
*** Script: Match found: 4X1YBY3
*** Script: Match found: LL7DL2K4NT
*** Script: Match found: XRH4H2NQ0L
*** Script: Match found: FOC1802U1EJ
*** Script: Match found: P4G639VY94
*** Script: Match found: PKGW671JPG
*** Script: Match found: H2WJF0WKQ6P0
*** Script: Match found: TH95D1T16P
*** Script: Match found: V47L099XK4
*** Script: Match found: C02DQ04HML86
*** Script: Match found: H2WHJ20SQ6NV
*** Script: Match found: VN7W9DF6XM
*** Script: Match found: C02NQ01AG3QD
*** Script: Match found: C02G6131Q05R
*** Script: Match found: N9WY499521
*** Script: Match found: DKKKN32
*** Script: Match found: Y7HCQC4HT4
*** Script: Match found: CXJM60N006
*** Script: Match found: 442043635
*** Script: Match found: T2QQ4MH656
*** Script: Match found: FVFHJ2TSQ05P
*** Script: Match found: GXH94097XM
*** Script: Match found: 06F931G
*** Script: Match found: 48Y7T13
*** Script: Match found: W2MVF673M9
[0:00:00.003] Expanding large row block (file.read: alm_asset, 10000 rows, 160000 dataSize)
[0:00:00.015] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
*** Script: Match found: KG6DG3J6YQ
*** Script: Match found: AUA343513
*** Script: Match found: X1HJKYF6LD
*** Script: Match found: R5HQ5642RN
*** Script: Match found: 5TF6WW1
*** Script: Match found: C02FN605MD6R
*** Script: Match found: C02CJ075LVDM
*** Script: Match found: D56W2HC4Q2
*** Script: Match found: CXDCQ423TH
*** Script: Match found: NC3W1746P9
*** Script: Match found: C02G7037ML88
*** Script: Match found: 94
*** Script: Match found: C02QW11NG8WM
*** Script: Match found: Y1VX5Y09RG
*** Script: Match found: J7C16RJKWX
*** Script: Match found: 55
*** Script: Match found: 10272DP
*** Script: Match found: C02FL9MQMD6R
*** Script: Match found: 82
*** Script: Match found: CPH7NQF12D
*** Script: Match found: C07FN1GPQ6P0
*** Script: Match found: 5CJD2Z3
*** Script: Match found: C02G711EMD6R
*** Script: Match found: C02FN472MD6R
*** Script: Match found: N1603P440N
*** Script: Match found: C02VL2YBHTDF
*** Script: Match found: C02KJ1QFFFT4
*** Script: Match found: C02FL2USMD6R
*** Script: Match found: HVY22H04RK
*** Script: Match found: RNJM62FHYH
*** Script: Match found: H3HN4X0MWN
*** Script: Match found: C02RG35XG8WM
*** Script: Match found: BBYF.102335..ATI
*** Script: Match found: A5C4011114438
*** Script: Match found: V060HYF2TM
*** Script: Match found: C02FN47TMD6R
*** Script: Match found: NKXQ7XHP3Q
*** Script: Match found: VM294WW4WH
*** Script: Match found: CNGCF8W0M3
*** Script: Match found: 000000000000000000000000000000000000000000047
*** Script: Match found: JL7TJ616XD
*** Script: Match found: A7PU011009096
*** Script: Match found: DJCJJM2
*** Script: Match found: 2UA7062FT3
*** Script: Match found: C02DG134MD6R
*** Script: Match found: V5623T5HJR
*** Script: Match found: C02GH3SHMD6R
*** Script: Match found: 4TF6WW1
*** Script: Match found: PH7G66GYQR
*** Script: Match found: FVFGP4YAQ05N
*** Script: Match found: C02JW0ZDDKQ5
*** Script: Match found: QTYYDJ9VXY
*** Script: Match found: FOC1802U1E0
*** Script: Match found: 7HCKXD3
*** Script: Match found: C02G7116MD6R
*** Script: Match found: N42724D69R
*** Script: Match found: C02YJ0W0JHD3
*** Script: Match found: C02G711MMD6R
*** Script: Match found: D659R4DY7H
*** Script: Match found: A7PU011005282
*** Script: Match found: 7CWXBY3
*** Script: Match found: FXXHGXJ67R
*** Script: Match found: NXWFPRH7F5
*** Script: Match found: G2M0XVFTVH
*** Script: Match found: CXH9V5L9JY
*** Script: Match found: C02YH3ETJHD3
*** Script: Match found: BKBDR73
*** Script: Match found: C02D11U3MD6R
*** Script: Match found: 81
*** Script: Match found: 82
*** Script: Match found: 64167FB9AE07
*** Script: Match found: 33PMQN2
*** Script: Match found: Y13790Q09H
*** Script: Match found: XLLQ4NQWL3
*** Script: Match found: NXPYYHT4JH
*** Script: Match found: AJ101802
*** Script: Match found: 97
*** Script: Match found: 20
*** Script: Match found: C02GJ3B8MD6R
*** Script: Match found: C02FN47CMD6R
*** Script: Match found: 5CZBC42
*** Script: Match found: C02G40JBMD6R
*** Script: Match found: H2WJH0CVQ6P0
*** Script: Match found: 49QYQQ2
*** Script: Match found: CND8F7QB1Z
*** Script: Match found: VWFYCQQJW6
*** Script: Match found: 97
*** Script: Match found: R12XJR3TDW
*** Script: Match found: D8PFHR2
*** Script: Match found: FVFGP4T6Q05N
*** Script: Match found: W4P6X53P3J
*** Script: Match found: GLWXBY3
*** Script: Match found: ACC2011020454
*** Script: Match found: CNBG203206
*** Script: Match found: 29
*** Script: Match found: MXCCF4K193
*** Script: Match found: D359YPKJQX
*** Script: Match found: YFG6N79K0G
*** Script: Match found: H2WJF0CEQ6P0
*** Script: Match found: RTH92662RL
*** Script: Match found: VCT138276
*** Script: Match found: X1KXDD2N9C
*** Script: Match found: 4LSLYY2
*** Script: Match found: BA100562
*** Script: Match found: FVFGP4ZJQ05N
*** Script: Match found: M630NJ1QHQ
*** Script: Match found: XJKXCL25FW
*** Script: Match found: 2JWXBY3
*** Script: Match found: D25XV7TYJ1GQ
*** Script: Match found: H3756MYG65
*** Script: Match found: 2UA75217H6
*** Script: Match found: USQC053754
*** Script: Match found: C02GJ3F3MD6R
*** Script: Match found: WQ699FY3Q3
*** Script: Match found: 000000000000000000000000000000000000000000047
*** Script: Match found: C02FD5UJMD6R
*** Script: Match found: HC546Q04X5
*** Script: Match found: 4T9WJ02
*** Script: Match found: C02DRAZ7MD6R
*** Script: Match found: XTXJJR9165
*** Script: Match found: G7QQMCQ6PN
*** Script: Match found: FOC1803U04J
*** Script: Match found: KG0X4Q5XHV
*** Script: Match found: K0G4VG9MVR
*** Script: Match found: A61H011010603
*** Script: Match found: GV254VLH3J
*** Script: Match found: G70R03X6R5
*** Script: Match found: 26
*** Script: Match found: C02C32EGLVDM
*** Script: Match found: LF7016WF45
*** Script: Match found: VMF7607PTQ
*** Script: Match found: YRW99396F1
*** Script: Match found: WRNYPYH6J9
*** Script: Match found: 792209000770
*** Script: Match found: C02CK051MD6R
*** Script: Match found: V43WP9RXHY
*** Script: Match found: C02DRCZ3MD6R
*** Script: Match found: 80
*** Script: Match found: NVGVXFDQGL
*** Script: Match found: W09WHTKHXD
*** Script: Match found: CCSXFC2
*** Script: Match found: C02QW121G8WM
*** Script: Match found: WQ1XY70RR9
*** Script: Match found: C02QG2AXG8WM
*** Script: Match found: 4Z8TRQ2
*** Script: Match found: 20
*** Script: Match found: 69B0R72
*** Script: Match found: JVK99Y3
*** Script: Match found: XP9M6MW5J9
*** Script: Match found: W9Q5K6D22C
*** Script: Match found: Q22G12P96R
*** Script: Match found: H1X8L13
*** Script: Match found: CBT5K13
*** Script: Match found: C02G710MMD6R
*** Script: Match found: FOC1802U19J
*** Script: Match found: R43J26V55X
*** Script: Match found: N9019R59C4
*** Script: Match found: C02ZK46YLVDQ
*** Script: Match found: HM9TF6JWMG
*** Script: Match found: FXH0J7T7JC
*** Script: Match found: X9572P7Q9R
*** Script: Match found: C02G88PPMD6R
*** Script: Match found: C02DG137MD6R
*** Script: Match found: C02ZK46YLVDQ
*** Script: Match found: 70
*** Script: Match found: C6W9PY2
*** Script: Match found: 10272CP
*** Script: Match found: 36
*** Script: Match found: C1F739R1XP
*** Script: Match found: JHLFCGJWL3
*** Script: Match found: C02DRAZBMD6R
*** Script: Match found: N6NXHFVY41
*** Script: Match found: VWY0X7K4HD
*** Script: Match found: C02FN462MD6R
*** Script: Match found: C02NQ00JG3QD
*** Script: Match found: N40J0X44DP
*** Script: Match found: 3X74QN2
*** Script: Match found: PQ3PMGKQXL
*** Script: Match found: C07DC00BPJJ9
*** Script: Match found: A7PU011008244
*** Script: Match found: C02D8620MD6R
*** Script: Match found: RYW09CH00D
*** Script: Match found: 46TMFB2
*** Script: Match found: BG6NDY3
*** Script: Match found: C02FN47FMD6R
*** Script: Match found: C02G37P4MD6R
*** Script: Match found: C02CJ0K3LVDM
*** Script: Match found: HJLFK63
*** Script: Match found: M6GD9D52TV
*** Script: Match found: VQ05Q79DCR
*** Script: Match found: H244GC2
*** Script: Match found: C02FP1HKMD6R
*** Script: Match found: 82
*** Script: Match found: G4QT956KXF
*** Script: Match found: C02DQ17BMD6R
*** Script: Match found: PQ7KVXX6HW
*** Script: Match found: M7744X42GP
*** Script: Match found: CJWWV4G1V9
*** Script: Match found: F222106930
*** Script: Match found: FLMC3G2
*** Script: Match found: H2WJF0MRQ6P0
*** Script: Match found: 7CMW373
*** Script: Match found: W1K3G6MGJ2
[0:00:00.002] Expanding large row block (file.read: alm_asset, 10000 rows, 160000 dataSize)
[0:00:00.015] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
*** Script: Match found: C02WL0C6HTDF
*** Script: Match found: A5C4011117165
*** Script: Match found: HP26XQC29X
*** Script: Match found: C07SN0TWG1J2
*** Script: Match found: 1NBLYY2
*** Script: Match found: CZC14822SF
*** Script: Match found: YRH647FF6N
*** Script: Match found: 2GHKN7ZQ
*** Script: Match found: MXBPMBC216
*** Script: Match found: A7PU011008933
*** Script: Match found: Q2H76P9RNY
*** Script: Match found: XR2R6DP9M3
*** Script: Match found: YKG21H00WW
*** Script: Match found: S227686X6B35081
*** Script: Match found: C2CVBY3
*** Script: Match found: VLWTJVV6KJ
*** Script: Match found: N335020GQM
*** Script: Match found: A7PY011001404
*** Script: Match found: C6V8PY2
*** Script: Match found: N9KQ0H6XD3
*** Script: Match found: C02GJ0TWMD6R
*** Script: Match found: CGF3FN2P6Q
*** Script: Match found: FY4LMV2
*** Script: Match found: C02FN019ML88
*** Script: Match found: 000000000000000000000000000000000000000000047
*** Script: Match found: C02FN47GMD6R
*** Script: Match found: C02DG135MD6R
*** Script: Match found: XC74Y1J9WJ
*** Script: Match found: 71
*** Script: Match found: 80
*** Script: Match found: FVFHJ0Z9Q05P
*** Script: Match found: 55
*** Script: Match found: C02DV359Q05N
*** Script: Match found: C02DK5GRMD6R
*** Script: Match found: R2FQ9F21N2
*** Script: Match found: GM434WCX9C
*** Script: Match found: XJ2YQ4NQ25
*** Script: Match found: M4T6NP27P0
*** Script: Match found: C02D120BMD6R
*** Script: Match found: G44M79PYTV
*** Script: Match found: C02G3219MD6R
*** Script: Match found: JQD3WV3
*** Script: Match found: XQCQ99P9HP
*** Script: Match found: FVG49R76CR
*** Script: Match found: 000000000000000000000000000000000000000000047
*** Script: Match found: FVFHK09SQ05P
*** Script: Match found: WVFNKH95F4
*** Script: Match found: 6VF6WW1
*** Script: Match found: C02G950DMD6R
*** Script: Match found: NR32LKV22M
*** Script: Match found: C02G7791MD6R
*** Script: Match found: H2WJF0KUQ6P0
*** Script: Match found: CX5PYY1
*** Script: Match found: VWNVF1QJH7
*** Script: Match found: JYR3XWYJ3M
*** Script: Match found: YW06X5XVTY
*** Script: Match found: J48D2J3
*** Script: Match found: Q6Q74F4LLF
*** Script: Match found: NDCWV3CXM7
*** Script: Match found: C02D117CMD6R
*** Script: Match found: H2WJF0B8Q6P0
*** Script: Match found: CND1G31191
*** Script: Match found: Y2V5L93G5W
*** Script: Match found: C02PJ100G3QP
*** Script: Match found: HX95K13
*** Script: Match found: 15PDLQ2
*** Script: Match found: C02QW1D4G8WM
*** Script: Match found: C71DPY2
*** Script: Match found: JPBCC1D22G
*** Script: Match found: 9ZFBG72
*** Script: Match found: FOC1802X1HW
*** Script: Match found: C02DRAYYMD6R
*** Script: Match found: C02FN47JMD6R
*** Script: Match found: HKDFN32
*** Script: Match found: DD136120225010
*** Script: Match found: FD9V6WRXGJ
*** Script: Match found: 7HDKJM2
*** Script: Match found: 5T85GC2
*** Script: Match found: C02C98MDMD6R
*** Script: Match found: 1TF6WW1
*** Script: Match found: A5C4011117775
*** Script: Match found: MJ09A6MA
*** Script: Match found: YKXXVXGWP1
*** Script: Match found: FVFHJ0ZLQ05P
*** Script: Match found: H2WH60C6PJJ9
*** Script: Match found: HYVJKXQW3H
*** Script: Match found: PV623PYTR6
*** Script: Match found: D0Q19D6MPY
*** Script: Match found: 29
*** Script: Match found: C02G7112MD6R
*** Script: Match found: FXXQ421XYW
*** Script: Match found: XLN642N4QJ
*** Script: Match found: 49QYQQ2
*** Script: Match found: C02DG12JMD6R
*** Script: Match found: JTF6WW1
*** Script: Match found: F4JX8Y3
*** Script: Match found: VWR0X99VP9
*** Script: Match found: Y5F97957VY
*** Script: Match found: C02G37P8MD6R
*** Script: Match found: J4XYQ5J3VX
*** Script: Match found: A7PU011004433
*** Script: Match found: D70GXK2
*** Script: Match found: 70
*** Script: Match found: XLPGH6YC7F
*** Script: Match found: CQ9GKW7GY7
*** Script: Match found: HGGF6GWQGJ
*** Script: Match found: YD6R7QXLXM
*** Script: Match found: K596RQLGDM
*** Script: Match found: C02FN01RML88
*** Script: Match found: FOC1803Y0X3
*** Script: Match found: JC4S9Y2
*** Script: Match found: C02ZK40NLVDQ
*** Script: Match found: A7PU011006133
*** Script: Match found: C02Z70D4LVDM
*** Script: Match found: C02G711NMD6R
*** Script: Match found: TYQDKGMGJ0
*** Script: Match found: 81
*** Script: Match found: C02F73UWMD6R
*** Script: Match found: 87
*** Script: Match found: C02DR858MD6R
*** Script: Match found: DNBLYY2
*** Script: Match found: C02QH2PLG8WM
*** Script: Match found: RD2YDWYD72
*** Script: Match found: NXQ70QJD91
*** Script: Match found: C1FJJRFNJG
*** Script: Match found: H2WJF0B3Q6P0
*** Script: Match found: CCZRRF2
*** Script: Match found: FVFGV1YDQ05Q
*** Script: Match found: C02DG131MD6R
*** Script: Match found: W4FQD4L7W7
*** Script: Match found: C02FN01KML88
*** Script: Match found: 51
*** Script: Match found: CNBH111369
*** Script: Match found: C02G711PMD6R
*** Script: Match found: JRLKMV2
*** Script: Match found: H27F3Y4NX3
*** Script: Match found: C1MPJ6MCG944
*** Script: Match found: JAE214104V4
*** Script: Match found: JPRC98Z07Q
*** Script: Match found: 9VF6WW1
*** Script: Match found: T749VW149Y
*** Script: Match found: C02G703HML88
*** Script: Match found: H2WFM16NPJJ9
*** Script: Match found: V0M4D2KXXV
*** Script: Match found: RTHHGX6JH1
*** Script: Match found: 1
*** Script: Match found: YVXJL7V1Q3
*** Script: Match found: LD79VTYYV0
*** Script: Match found: 5QKFZV1
*** Script: Match found: FSF6WW1
*** Script: Match found: GJ6T46W4VM
*** Script: Match found: C02DQ201MD6R
*** Script: Match found: CDWXBY3
*** Script: Match found: C02FN5KFMD6R
*** Script: Match found: C02FN01DML88
*** Script: Match found: WV56YXP0GG
*** Script: Match found: H2WH30MEQ6P0
*** Script: Match found: PC7R1PXJ2N
*** Script: Match found: 346SHM2
*** Script: Match found: C02QG2AXG8WM
*** Script: Match found: C02DRAYXMD6R
*** Script: Match found: P047LKXLG4
*** Script: Match found: NX4V0QWFM2
*** Script: Match found: PC4CQDHJ06
*** Script: Match found: 4RLQJ02
*** Script: Match found: C02G710ZMD6R
*** Script: Match found: T9WC6LGXFJ
*** Script: Match found: C02NPB98G3QD
*** Script: Match found: A7AK011002770
*** Script: Match found: YYXFXG779T
*** Script: Match found: FOC1803U05H
*** Script: Match found: H2WJF0CDQ6P0
*** Script: Match found: C02DQ27SMD6R
*** Script: Match found: H12DHJYZPN7C
*** Script: Match found: 2GFZBY3
*** Script: Match found: JK216FFHL2
*** Script: Match found: B9Q5K13
[0:00:00.003] Expanding large row block (file.read: alm_asset, 10000 rows, 160000 dataSize)
[0:00:00.015] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
*** Script: Match found: FOC1749Y1E5
*** Script: Match found: R9FR4NMW9L
*** Script: Match found: 85
*** Script: Match found: R6YPF0JWY9
*** Script: Match found: C02G710XMD6R
*** Script: Match found: 1
*** Script: Match found: HY55264KHY
*** Script: Match found: J9D4YXM36F
*** Script: Match found: 4QN6WW1
*** Script: Match found: GK7H9R3
*** Script: Match found: A7PU011009169
*** Script: Match found: HP1VYVYW24
*** Script: Match found: N96J2X9N9X
*** Script: Match found: 7HCKXD3
*** Script: Match found: C02XV42XJGH6
*** Script: Match found: V2HXV09914
*** Script: Match found: C02FN477MD6R
*** Script: Match found: 5V4PL33
*** Script: Match found: 29
*** Script: Match found: C02ZX4WWMD6T
*** Script: Match found: JPBCC520QB
*** Script: Match found: A5C4011121722
*** Script: Match found: C02NQ0DLG3QD
*** Script: Match found: C02KJ1R2FFT4
*** Script: Match found: H2WHP0K8Q6NW
*** Script: Match found: C02XT3ZNJGH5
*** Script: Match found: C02XK11WJHD3
*** Script: Match found: L023TDQ6QF
*** Script: Match found: JM6G9R7MLV
*** Script: Match found: X2C4C02NJK
*** Script: Match found: YJXRL2YGQM
*** Script: Match found: 20
*** Script: Match found: C02G711QMD6R
*** Script: Match found: GQD616HXGK
*** Script: Match found: H2WJF0LXQ6P0
*** Script: Match found: PTPCGGWG62
*** Script: Match found: CND0353DFM
*** Script: Match found: JLC72TJ25D
*** Script: Match found: C02YJ2KZJGH6
*** Script: Match found: P2JWT700DK
*** Script: Match found: 10JN6Y2
*** Script: Match found: C02GD0DUML7M
*** Script: Match found: 5CG0286P3M
*** Script: Match found: YQJLY494RT
*** Script: Match found: VLW6JG6CQQ
*** Script: Match found: H2WJF0LDQ6P0
*** Script: Match found: H2WJF0MZQ6P0
*** Script: Match found: V3W2NX7W5G
*** Script: Match found: C02DT1FTMD6R
*** Script: Match found: 49.HMXX.000863.COXC
*** Script: Match found: FWPVHW532P
*** Script: Match found: GRWSFC2
*** Script: Match found: PMHFW0JR9J
*** Script: Match found: H2WG72SBQ6NY
*** Script: Match found: GW4TV3W494
*** Script: Match found: QTLCFH7WML
*** Script: Match found: C02FN01NML88
*** Script: Match found: C02FN47LMD6R
*** Script: Match found: 64167FB892D8
*** Script: Match found: HXYH4756DN
*** Script: Match found: T5W5C29D4Q
*** Script: Match found: WGLC9CR32W
*** Script: Match found: C02DG133MD6R
*** Script: Match found: CND8F1Q628
*** Script: Match found: FW5C7VC2YF
*** Script: Match found: 5VF6WW1
*** Script: Match found: WWY3Y2KWRL
*** Script: Match found: 3VY03W2
*** Script: Match found: RD6C49F7KF
*** Script: Match found: CNDCGB80TT
*** Script: Match found: P56YM07T6X
*** Script: Match found: 80
*** Script: Match found: QTFCU30210014
*** Script: Match found: XCRHH67XFH
*** Script: Match found: C07J106DPJJ9
*** Script: Match found: 82
*** Script: Match found: FVFHJ0ZMQ05P
*** Script: Match found: XH02X56VD2
*** Script: Match found: C4Q713567
*** Script: Match found: GW2VWWR7J0
*** Script: Match found: C02FC3XPMD6R
*** Script: Match found: 77GCY33
*** Script: Match found: 6KQ2GC2
*** Script: Match found: GK9721N7JW
*** Script: Match found: C02YJ2HPJGH6
*** Script: Match found: 48Y9T13
*** Script: Match found: P9T0H2WQN6
*** Script: Match found: JGGRZD3
*** Script: Match found: FTF6WW1
*** Script: Match found: YHX7F6K7Q0
*** Script: Match found: FOC1803U001
*** Script: Match found: D5737JT72L
*** Script: Match found: K640YX516L
*** Script: Match found: NLFYFVF091
*** Script: Match found: HPN6WW1
*** Script: Match found: C02FN474MD6R
*** Script: Match found: VL99NG0G63
*** Script: Match found: VGPHWQXGTC
*** Script: Match found: C02FN46UMD6R
*** Script: Match found: F141M63
*** Script: Match found: C07D92FPPJJ9
*** Script: Match found: R40KN7M70K
*** Script: Match found: TXF7NKW7QG
*** Script: Match found: X6QNQG6LM9
*** Script: Match found: C02G37NSMD6R
*** Script: Match found: V4H3HJC6QC
*** Script: Match found: FOC1802Y2AE
*** Script: Match found: C02S33EMG8WM
*** Script: Match found: PN2M2CH6XD
*** Script: Match found: WX7R466T2H
*** Script: Match found: H2CG6T07Q2
*** Script: Match found: 5X8DR73
*** Script: Match found: 9BJD2Z3
*** Script: Match found: VT4GK66DQL
*** Script: Match found: C02FN5KVMD6R
*** Script: Match found: C02FN604MD6R
*** Script: Match found: H2WJQ054Q6P0
*** Script: Match found: 000000000000000000000000000000000000000000047
*** Script: Match found: T63044Y1VX
*** Script: Match found: VVVQN4DX4N
*** Script: Match found: FM2M934YX3
*** Script: Match found: Y62CV2KE
*** Script: Match found: C07DC0EMPJJ9
*** Script: Match found: A61H011006926
*** Script: Match found: C02FN5KDMD6R
*** Script: Match found: FOC1748Z56F
*** Script: Match found: BKKBRQ3
*** Script: Match found: XQNWQXD46J
*** Script: Match found: C07YD0YDJYVY
*** Script: Match found: JN6349GCFD
*** Script: Match found: P7X36VYY24
*** Script: Match found: 2GHLZQ3M
*** Script: Match found: C02FN47NMD6R
*** Script: Match found: DD136120226002
*** Script: Match found: H2WFK02APJJ9
*** Script: Match found: QTFCU3021003F
*** Script: Match found: A7R0017013089
*** Script: Match found: 720VBY3
*** Script: Match found: C02G7114MD6R
*** Script: Match found: J363YY3YXM
*** Script: Match found: H2WJH06TQ6P0
*** Script: Match found: JPBFR11456
*** Script: Match found: C02DRCN9MD6R
*** Script: Match found: XRQY29QT54
*** Script: Match found: Y6QQCH4QRX
*** Script: Match found: A61H011011320
*** Script: Match found: 442593696
*** Script: Match found: C02GJ0TSMD6R
*** Script: Match found: C02FN467MD6R
*** Script: Match found: 70
*** Script: Match found: C02DRAZXMD6R
*** Script: Match found: C02JJHKJ77
*** Script: Match found: XGWMHYHGD2
*** Script: Match found: CFVP37GWCJ
*** Script: Match found: P211FQCLY6
*** Script: Match found: K6L61LC6TQ
*** Script: Match found: 0643F4A
*** Script: Match found: HT6D9RLVJV
*** Script: Match found: VX910JC2FR
*** Script: Match found: C02G710TMD6R
*** Script: Match found: 4Z8TRQ2
*** Script: Match found: C02G37PBMD6R
*** Script: Match found: 950A9157
[0:00:00.002] Expanding large row block (file.read: alm_asset, 10000 rows, 160000 dataSize)
[0:00:00.016] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
*** Script: Match found: CNDF112387
*** Script: Match found: H6YV0F927G
*** Script: Match found: HCV2X65GXT
*** Script: Match found: H2WH313QQ6P0
*** Script: Match found: DGVJHJN7FX
*** Script: Match found: 81
*** Script: Match found: V7LYVX1WGM
*** Script: Match found: D43CHQQ3YN
*** Script: Match found: LMHG1HWHX5
*** Script: Match found: 440819944
*** Script: Match found: KMQKN93993
*** Script: Match found: 6BLVZH3
*** Script: Match found: G6MC4J7GFT
*** Script: Match found: 70
*** Script: Match found: C02XN4EGJGH6
*** Script: Match found: 4KKQ0Z2
*** Script: Match found: XYW57CJPX7
*** Script: Match found: H2WJH0EGQ6P0
*** Script: Match found: C02GD0DNML7M
*** Script: Match found: C6TCPY2
*** Script: Match found: FRXYQTJ3J0
*** Script: Match found: 27
*** Script: Match found: H2WJF0M6Q6P0
*** Script: Match found: 4P041Q2
*** Script: Match found: H2WHV0U5Q6P0
*** Script: Match found: 87
*** Script: Match found: H7Y02H75H9
*** Script: Match found: C07D92ZBPJJ9
*** Script: Match found: JZM1NV2
*** Script: Match found: XDL7LL7C30
*** Script: Match found: A4Y4011003708
*** Script: Match found: FW0QLX2
*** Script: Match found: A61H011010566
*** Script: Match found: HD65F0WQMT
*** Script: Match found: G16XXYL77H
*** Script: Match found: J6LPY9775Y
*** Script: Match found: C07QM0A2G1J1
*** Script: Match found: HXTJQ6667K
*** Script: Match found: FOC1803X04N
*** Script: Match found: T9G4YDQDX4
*** Script: Match found: 4KKQ0Z2
*** Script: Match found: H2WH30TFQ6P0
*** Script: Match found: QNH3YD06TM
*** Script: Match found: BCWN3132
*** Script: Match found: C02FN464MD6R
*** Script: Match found: 7HDKJM2
*** Script: Match found: C02DC0YPML86
*** Script: Match found: GN5VBY3
*** Script: Match found: 4SF6WW1
*** Script: Match found: FOC1802X1GY
*** Script: Match found: FVFHJ0Z2Q05P
*** Script: Match found: 35TJMV2
*** Script: Match found: R2QKPWY91J
*** Script: Match found: GMXQPVVQTT
*** Script: Match found: C02G703BML88
*** Script: Match found: 99X1L33
*** Script: Match found: FOC1802U1CZ
*** Script: Match found: R37CR46HJ7
*** Script: Match found: C02GJ0TRMD6R
*** Script: Match found: C02C9AHTMD6R
*** Script: Match found: 20
*** Script: Match found: 80511200121
*** Script: Match found: 2MFR4X3
*** Script: Match found: C02FN01AML88
*** Script: Match found: C02C40NTMD6R
*** Script: Match found: C02NQ0DPG3QD
*** Script: Match found: BSF6WW1
*** Script: Match found: JTFJ7MM93Y
*** Script: Match found: P2Q1H72619
*** Script: Match found: A7PU011006104
*** Script: Match found: PV75FHL2DF
*** Script: Match found: NTQPY4M17J
*** Script: Match found: 81
*** Script: Match found: FOC1802Y79N
*** Script: Match found: JPDCDCQ16W
*** Script: Match found: J17YH16L4H
*** Script: Match found: V9T69KQ3CP
*** Script: Match found: 80
*** Script: Match found: C02F959BMD6R
*** Script: Match found: C02CCDNXMD6M
*** Script: Match found: T7RQP9PVDQ
*** Script: Match found: C02FN01BML88
*** Script: Match found: H2WGN1ZRQ6P0
*** Script: Match found: C07SN0TTG1J2
*** Script: Match found: C02FL4UAMD6R
*** Script: Match found: PDY71F02L0
*** Script: Match found: C02FN473MD6R
*** Script: Match found: 1
*** Script: Match found: GSF6WW1
*** Script: Match found: C02DRAZTMD6R
*** Script: Match found: PP2FV5V6FT
*** Script: Match found: KVKXMT99HK
*** Script: Match found: C02FJ3DUMD6R
*** Script: Match found: VQX626XQ2J
*** Script: Match found: C02G37PDMD6R
*** Script: Match found: V4NVG2RCP7
*** Script: Match found: WFX9921JP4
*** Script: Match found: A5C4011115513
*** Script: Match found: D6K7M72
*** Script: Match found: FOC1802U1DT
*** Script: Match found: MJ05VG98
*** Script: Match found: RQ60PJH6JF
*** Script: Match found: 5WN6H62
*** Script: Match found: C07S80L4G1J1
*** Script: Match found: C02GK0QSMD6T
*** Script: Match found: TQ9VFH93D7
*** Script: Match found: THYF7PVWJ9
*** Script: Match found: C02C9AGAMD6R
*** Script: Match found: 6SJFQ53
*** Script: Match found: C02TF3UFGTFM
*** Script: Match found: C02GG2PTMD6R
*** Script: Match found: Q0V7TKX0WJ
*** Script: Match found: 2WVS9Y2
*** Script: Match found: 10272CP
*** Script: Match found: W3WTGV21N9
*** Script: Match found: C02DG12SMD6R
*** Script: Match found: C02DT1FUMD6R
*** Script: Match found: VDGQ0HFWTY
*** Script: Match found: C02GJ1CJML85
*** Script: Match found: C02FF38JMD6T
*** Script: Match found: VT2D7MGK2J
*** Script: Match found: MQHR9G721V
*** Script: Match found: D67D269T7L
*** Script: Match found: FOC1915R28T
*** Script: Match found: C02GC5GGQ05N
*** Script: Match found: C02FN47AMD6R
*** Script: Match found: A7AK011002096
*** Script: Match found: WL7XKF7L44
*** Script: Match found: 44CJ3F3
*** Script: Match found: 7823D0P
*** Script: Match found: C02GJ0TNMD6R
*** Script: Match found: LQHXHP6D91
*** Script: Match found: C02DG12XMD6R
*** Script: Match found: QRYWKPFCYF
*** Script: Match found: PCWCW9F2VQ
*** Script: Match found: H2WH30TBQ6P0
*** Script: Match found: C02DR8HTMD6T
*** Script: Match found: JQ6CQQHR7Q
*** Script: Match found: A5C4011118439
*** Script: Match found: WGJPLQ6YH1
*** Script: Match found: LDW4Q043F1
*** Script: Match found: 81
*** Script: Match found: CNCCDB30HQ
*** Script: Match found: C02GD1Q3Q05N
*** Script: Match found: C02FN47HMD6R
*** Script: Match found: H4492Y332T
*** Script: Match found: C02CK0DFMD6R
*** Script: Match found: C02FC0UJMD6T
*** Script: Match found: LNQ6DK4QP4
*** Script: Match found: YYH2R14V2Q
*** Script: Match found: H2WHR0TMQ6P0
*** Script: Match found: KN2J4GPWGP
*** Script: Match found: QQN4LFHWKP
*** Script: Match found: WV09TP7P7R
*** Script: Match found: JSF6WW1
*** Script: Match found: MLYF.115768..ATI
*** Script: Match found: FVFHJ0YSQ05P
*** Script: Match found: 5CG8125XTL
*** Script: Match found: H2WJF0K6Q6P0
*** Script: Match found: C02DQ1RRMD6R
*** Script: Match found: GW3N2C2XJJ
*** Script: Match found: C02D90W5MD6R
*** Script: Match found: C02F55REMD6R
*** Script: Match found: C02DT1FFMD6R
*** Script: Match found: GG3L1M2
*** Script: Match found: G17CM619TK
*** Script: Match found: C02DH1DMMD6R
*** Script: Match found: C02DC0YNML86
*** Script: Match found: 8CG83335KL
*** Script: Match found: DNQVD9H44P
*** Script: Match found: C02KJ1Q7FFT4
*** Script: Match found: C02FN466MD6R
[0:00:00.002] Expanding large row block (file.read: alm_asset, 7492 rows, 119872 dataSize)
[0:00:00.015] Compacting large row block (file.write: alm_asset 10000 rows 160000 saveSize)
*** Script: Match found: CN0CS02637
*** Script: Match found: BTF6WW1
*** Script: Match found: C02G711KMD6R
*** Script: Match found: KT25FPPVQ0
*** Script: Match found: VTR2410F23
*** Script: Match found: H1959JYT23
*** Script: Match found: 7MN9KD3
*** Script: Match found: 70
*** Script: Match found: W4PJLF95RY
*** Script: Match found: QQ01QJXY0J
*** Script: Match found: C02FN479MD6R
*** Script: Match found: 87KWMR2
*** Script: Match found: FVFHJ2U6Q05P
*** Script: Match found: C02DRCZ8MD6R
*** Script: Match found: C02CK0FJMD6T
*** Script: Match found: N9CJGDH9NQ
*** Script: Match found: KY9QP5P6P0
*** Script: Match found: C02FN5LSMD6R
*** Script: Match found: MG7329P0RT
*** Script: Match found: CNDF245911
*** Script: Match found: N6XWKLGKVF
*** Script: Match found: 3VPR4X3
*** Script: Match found: 86
*** Script: Match found: C2FD3J3
*** Script: Match found: VJ9KMXXWHK
*** Script: Match found: PWFK72FHYR
*** Script: Match found: J69JFVWXHP
*** Script: Match found: CM86CP2
*** Script: Match found: H4C0D3W7F1
*** Script: Match found: N4CYYP4F33
*** Script: Match found: J36WHWYXJ2
*** Script: Match found: 2GQRYD3
*** Script: Match found: 5GZC0N2
*** Script: Match found: A5C4011118473
*** Script: Match found: H2WJF0MYQ6P0
*** Script: Match found: C02YW35RLVDQ
*** Script: Match found: WTWWXL4W5P
*** Script: Match found: C02G703KML88
*** Script: Match found: C02G37P1MD6R
*** Script: Match found: T9GJD2LTWY
*** Script: Match found: GV206WMYY9
*** Script: Match found: QVV6KP2R63
*** Script: Match found: T0YXR59FJD
*** Script: Match found: L9YVWJ5G6C
*** Script: Match found: 3TF6WW1
*** Script: Match found: C02CH2R6JV40
*** Script: Match found: HJQVQMM61W
*** Script: Match found: 81
*** Script: Match found: C02FN460MD6R
*** Script: Match found: FOC1915R23Z
*** Script: Match found: V2QCTP4X15
*** Script: Match found: RQ2T297GXD
*** Script: Match found: QV9W63XL2R
*** Script: Match found: C02YH3EUJHD3
*** Script: Match found: 792209000878
*** Script: Match found: 627WXY2
*** Script: Match found: FOC1803X057
*** Script: Match found: C02DG138MD6R
*** Script: Match found: C02CJ0JZLVDM
*** Script: Match found: A7PU011007166
*** Script: Match found: C02QN21MG8WL
*** Script: Match found: P03T24L2YM
*** Script: Match found: H4TGV1PGPN7C
*** Script: Match found: XRVQWQVV6N
*** Script: Match found: C02FN46GMD6R
*** Script: Match found: Q7XLFJ9TLX
*** Script: Match found: C02C9AP6MD6R
*** Script: Match found: B14650355
*** Script: Match found: 97
*** Script: Match found: 27
*** Script: Match found: YN3LY72LR6
*** Script: Match found: 55
*** Script: Match found: Y5XK9J5F9C
*** Script: Match found: FOC1802X1GK
*** Script: Match found: C02DG12PMD6R
*** Script: Match found: CQ1FTP6KF4
*** Script: Match found: 18
*** Script: Match found: NIT206949
*** Script: Match found: C02G710SMD6R
*** Script: Match found: C02FN018ML88
*** Script: Match found: A90H041002771
*** Script: Match found: A4Y4011006641
*** Script: Match found: C1MRT459H3QK
*** Script: Match found: H2WFL0W3PJJ9
*** Script: Match found: FOC1803U003
*** Script: Match found: WPX47RM61X
*** Script: Match found: C02FN46VMD6R
*** Script: Match found: J0N9QYMXY7
*** Script: Match found: C02G710PMD6R
*** Script: Match found: 4Q56L33
*** Script: Match found: VD907HJP2G
*** Script: Match found: 6TF6WW1
*** Script: Match found: DD136120224014
*** Script: Match found: C02FN469MD6R
*** Script: Match found: C02G83QKMD6R
*** Script: Match found: H2WF10K7Q6P0
*** Script: Match found: BKPZ6S2
*** Script: Match found: C02K80H0FFT4
*** Script: Match found: 6BJD2Z3
*** Script: Match found: AA2J041009708
*** Script: Match found: FOC1802Y30D
*** Script: Match found: CNDG154057
*** Script: Match found: JAE21400372
*** Script: Match found: HCG6VDJKFF
*** Script: Match found: VQK7QH63JQ
*** Script: Match found: XDQ6902RYM
*** Script: Match found: C34NXV3PQW
*** Script: Match found: C07SN0TWG1J2
*** Script: Match found: XL1F3FQXTR
*** Script: Match found: Y14F96YKFG
*** Script: Match found: 2M5VBY3
*** Script: Match found: C07DC06VPJJ9
*** Script: Match found: C02DR9VUMD6R
*** Script: Match found: A5C4011118462
*** Script: Match found: WJKCFYXG32
*** Script: Match found: 2VF6WW1
*** Script: Match found: PKW49PVT7R
*** Script: Match found: CR3HT9MCF6
*** Script: Match found: FT5N1T3
*** Script: Match found: CZC5062QCZ
*** Script: Match found: 5XLF7Y2
*** Script: Match found: XJ7V4VHFFP
*** Script: Match found: A61H011007824
*** Script: Match found: XYVYM92QXT
*** Script: Match found: C02FN46EMD6R
*** Script: Match found: 55
*** Script: Match found: 37SBCP2
*** Script: Match found: HYY2YTVFQQ
*** Script: Match found: C02FP160Q05N
*** Script: Match found: 29
*** Script: Match found: FOC1803U056
*** Script: Match found: 73
*** Script: Match found: GWPWC42
*** Script: Match found: FXNQ4X3
*** Script: Match found: C07SN0U6G1J2
*** Script: Match found: W2X9HCF477
*** Script: Match found: Y4PJ4M2VFY
*** Script: Match found: A5C4011122198
*** Script: Match found: VTJVXFVXYN
*** Script: Match found: C69V76YQR2
*** Script: Match found: KJF9Q0TW9V

#javascript

Assets and CI that do not match but have matching serial numbers

// Create a GlideRecord for the 'cmdb_ci' table
var cmdbCiGr = new GlideRecord('cmdb_ci');
cmdbCiGr.addEncodedQuery('sys_class_name=cmdb_ci_computer^serial_numberISNOTEMPTY^assetISEMPTY');
cmdbCiGr.query();

// Create a GlideRecord for the 'alm_asset' table
var almAssetGr = new GlideRecord('alm_asset');
almAssetGr.addEncodedQuery('ci=NULL^serial_numberISNOTEMPTY');
almAssetGr.query();

// Loop through 'alm_asset' records and check for matching serial numbers in 'cmdb_ci'
while (almAssetGr.next()) {
    var serialNumber = almAssetGr.serial_number;

    // Create a new GlideRecord for 'cmdb_ci' and query based on serial number
    var cmdbCiGrBySerial = new GlideRecord('cmdb_ci');
    cmdbCiGrBySerial.addQuery('serial_number', serialNumber);
    cmdbCiGrBySerial.query();

    if (cmdbCiGrBySerial.next()) {
        // Do something with the matching records
        gs.log('Match found: ' + serialNumber);
    }
}

#javascript #express #zod #backend

express-zod request validation

const express = require("express");
const { z } = require("zod");

const app = express();

app.use(express.json());

const LoginSchema = z.object({
  // In this example we will only validate the request body.
  body: z.object({
    // email should be valid and non-empty
    email: z.string().email(),
    // password should be at least 6 characters
    password: z.string().min(6),
  }),
});

const validate = (schema) => (req, res, next) => {
  try {
    schema.parse({
      body: req.body,
      query: req.query,
      params: req.params,
    });

    next();
  } catch (err) {
    return res.status(400).send(err.errors);
  }
};

app.post("/login", validate(LoginSchema), (req, res) => {
  return res.json({ ...req.body });
});

app.listen(1337, () => console.log(`> Ready on http://localhost:${1337}`));

#javascript

Offset Effect Animation in After Effects

size_x = transform.position[0]*2;
size_y = transform.position[1];

x_offset = effect("Offset")("Shift Center To")[0]+(time*(size_x/thisComp.duration));

if(time < (thisComp.duration/2)){
	y_offset = ease(time, 0, thisComp.duration/2, size_y, size_y*2);
} else {
	y_offset = ease(time, thisComp.duration/2, thisComp.duration, size_y*2, size_y);
}

[x_offset, y_offset];

#javascript #next.js #knex #postgressql

Postgressql connection in next js using knex

import React from 'react';
const knex = require('knex');

// we require this pakages to use this - knex , oracledb , pg , pg-query-stream
// we tried with prisma but got stucked in fetching data


function page() {
  const db = async () => {
    const database = knex({
      client: 'pg',
      connection: {
        host: '1.2.3.4',
        port: 5432,
        user: 'username',
        password: 'password',
        database: 'databasename'
      }
    });

    const a = await database.from('analytics.u_kpi_essentialdata').select();
    console.log('test---', a);
  };
  db();

  return (
    <div>
      <div>page</div>
      <div> naks</div>
    </div>
  );
}

export default page;

#javascript

Custom function quickstart | Apps Script | Google for Developers

/**
 * Calculates the sale price of a value at a given discount.
 * The sale price is formatted as US dollars.
 *
 * @param {number} input The value to discount.
 * @param {number} discount The discount to apply, such as .5 or 50%.
 * @return The sale price formatted as USD.
 * @customfunction
 */
function salePrice(input, discount) {
  let price = input - (input * discount);
  let dollarUS = Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
});
  return dollarUS.format(price);
}

#apex #javascript

NFe0579 - Request corrigido

<x:Envelope
    xmlns:x="http://schemas.xmlsoap.org/soap/envelope/"
    xmlns:ws="http://www.nfevargem.com.br/ws.vargem/">
    <x:Header/>
    <x:Body>
        <ws:setInvoice>
            <ws:strJsonInvoice>[
   {
      "im":"002269",
      "NumeroNota":"004009",
      "DataEmissao":"2023-10-30",
      "NomeTomador":"INSTITUTO BRASILEIRO DE CIENCIA E TECNOLOGIA MAHARISHI IBCTM",
      "tipoDocTomador":"J",
      "documentoTomador":"31533629000120",
      "InscricaoEstadualTomador":"",
      "logradouroTomador":"Avenida Nove de Julho",
      "numeroTomador":"5955",
      "complementoTomador":"Loja A1 A15",
      "bairroTomador":"Jardim Paulista",
      "CEPTomador":"01407200",
      "cidadeTomador":"Sao Paulo",
      "ufTomador":"SP",
      "PAISTomador":"BRASIL",
      "emailTomador":"flavia.baptista@yahoo.com.br",
      "logradouroServico":"Estrada das Furnas",
      "numeroServico":"SN",
      "complementoServico":"",
      "bairroServico":"Bairro das Furnas",
      "CEPServico":"37640000",
      "cidadeServico":"Extrema",
      "ufServico":"MG",
      "issRetido":"1",
      "devidoNoLocal":"1",
      "observacao":"-",
      "INSS":"0.00",
      "IRPJ":"0.00",
      "CSLL":"0.00",
      "COFINS":"0.00",
      "PISPASEP":"0.00",
      "PAISServico":"BRASIL",
      "descricao":"FCK 25,0 MPA  BRITA 0\/1 ABAT. 10+-2 = 42,00 m3 x 440,00 = R$ 18.480,00 REM 11631-11632-11634-11635-11638-11640-11643-Estrada das Furnas, S\/N  Bairro das Furnas - Extrema\r\nTAXA DE BOMBA = 1,00 m3 x 2.400,00 = R$ 2.400,00 REM 11631-11632-11634-11635-11638-11640-11643-742 (DIA 20\/10 - 48,00 m3 - BOMBA ESTACIONARIA)\r\nTAXA DE BOMBA = 1,00 tx x 300,00 = R$ 300,00 DIFERENCA DE TAXA REF REMESSA 620 DE 20\/09\/2023\r\nREMESSA  DE MATERIAL R$ 10.590,00\r\nEXECUCAO DE SERVICOS R$ 10.590,00\r\nRETENCAO ISS R$ 211,80 (2.00%)\r\nVENCIMENTOS:\r\n004009 - R$ 20.968,20 - 26\/10\/2023 - CARTEIRA\r\nPredio 2\r\nVENDEDOR: Eliano Alves Martins",
      "atividade":"00702",
      "valor":"21180.00",
      "aliquota":"2.00",
      "deducaoMaterial":"10590.00",
      "descontoCondicional":"0.00",
      "descontoIncondicional":"0.00",
      "valorDeducao":"10590.00",
      "baseCalculo":"10590.00",
      "valorIss":"211.80",
      "valorTotalNota":"21180.00",
      "tipoEnquadramento":"",
      "tipoIss":"M",
      "hashMd5":""
   }
]</ws:strJsonInvoice>
            <ws:strToken>d439eb5be97874d72569582b84ebc8ba</ws:strToken>
        </ws:setInvoice>
    </x:Body>
</x:Envelope>

#javascript

multer image

import express from "express";
const router = express.Router();
import multer from "multer";
import productModel from "../model/productModel.js";

const Storage = multer.diskStorage({
  destination: "upload",
  filename: (req, file, cb) => {
    cb(null, file.originalname);
  },
});

const upload = multer({
  storage: Storage,
}).single("image");

router.post("/product", (req, res) => {
  upload(req, res, (err) => {
    if (err) {
      console.log(err);
    } else {
      const product = new productModel({
        name: req.body.name,
        image: {
          data: req.file.filename,
          contentType: "image/png",
        },
      });
      product
        .save()
        .then(() => res.send("successfully created"))
        .catch((err) => res.send("error in creating product"));
    }
  });
});

export default router;

#javascript #java

crawlbase+java+sdk

https://repo1.maven.org/maven2/com/crawlbase/crawlbase-java-sdk-pom/1.1/

#html #css #javascript

Zoom Image On Hover - js-image-zoom | CSS Script

https://www.cssscript.com/zoom-image-on-hover/

#javascript

SDG Cards JavaScript

const text3 = document.querySelector('.text3');
const img3 = document.querySelector('.img3');

function animateElement(element, offset) {
    const elementPosition = element.getBoundingClientRect().top;
    const screenPosition = window.innerHeight / offset;

    if (elementPosition < screenPosition) {
        element.classList.add('animate');
    } else {
        element.classList.remove('animate');
    }
}

function animate() {
    animateElement(text3, 1.3);
    animateElement(img3, 1.3);
}

window.addEventListener('scroll', animate);

#javascript

ES6 Syntax and Feature Overview | Tania Rascia

class Func {
  constructor(a, b) {
    this.a = a
    this.b = b
  }

  getSum() {
    return this.a + this.b
  }
}

let x = new Func(3, 4)

#javascript

ES6 Syntax and Feature Overview | Tania Rascia

let arr1 = [1, 2, 3]
let arr2 = ['a', 'b', 'c']
let arr3 = [...arr1, ...arr2]

console.log(arr3) // [1, 2, 3, "a", "b", "c"]

#javascript

ES6 Syntax and Feature Overview | Tania Rascia

let obj = {
  a(c, d) {},
  b(e, f) {},
}

#javascript #reac #jest

Replace Textarea with Codemirror editor

<link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css"> <body>	<textarea class="codemirror-textarea"></textarea></body> <script> $(document).ready(function(){    var codeText = $(".codemirror-textarea")[0];    var editor = CodeMirror.fromTextArea(codeText, {        lineNumbers : true    });}); </script> <script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>

#javascript #reac #jest

How to store fetch response in javascript variable - Stack Overflow

async function fun() {  return fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());} const data  = await fun();

#javascript

process - How do I run a node.js app as a background service? - Stack Overflow

[Unit]
Description=My app

[Service]
ExecStart=/var/www/myapp/app.js
Restart=always
User=nobody
# Note Debian/Ubuntu uses 'nogroup', RHEL/Fedora uses 'nobody'
Group=nogroup
Environment=PATH=/usr/bin:/usr/local/bin
Environment=NODE_ENV=production
WorkingDirectory=/var/www/myapp

[Install]
WantedBy=multi-user.target

#javascript #generator #higher-order-function

generator using higher order functions, not using yield

function el(arr) {
  let i = 0;
  return function gen() {
    if (i < arr.length) {
      let val = arr[i];
      i += 1;
      return val;
    }
  }
}
const myArray = [1, 2, 3];
const myGenerator = el(myArray);

console.log(myGenerator()); // 1
console.log(myGenerator()); // 2
console.log(myGenerator()); // 3
console.log(myGenerator()); // undefined

#javascript #generator #higher-order-function

generator using higher order functions, not using yield

function el(arr) {
  let i = 0;
  return function gen() {
    if (i < arr.length) {
      let val = arr[i];
      i += 1;
      return val;
    }
  }
}
const myArray = [1, 2, 3];
const myGenerator = el(myArray);

console.log(myGenerator()); // 1
console.log(myGenerator()); // 2
console.log(myGenerator()); // 3
console.log(myGenerator()); // undefined

#javascript #generator #higher-order-function

generator using higher order functions, not using yield

function el(arr) {
  let i = 0;
  return function gen() {
    if (i < arr.length) {
      let val = arr[i];
      i += 1;
      return val;
    }
  }
}
const myArray = [1, 2, 3];
const myGenerator = el(myArray);

console.log(myGenerator()); // 1
console.log(myGenerator()); // 2
console.log(myGenerator()); // 3
console.log(myGenerator()); // undefined

#javascript #html

Basic HTML start-up snippet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB TITLE</title>
    <!-- CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- FONT AWESOME -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- MATERIAL ICON -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
    <!-- AOS LINK -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>
<body>


    <!-- WEB CONTENTS GOES HERE -->
    
    

    <!-- JAVASCRIPT -->
    <script src="script.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init();
      </script>
</body>
</html>

#javascript #html

It is a basic HTML structure with a few libraries links such as Material Icon and AOS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Snippet</title>
    <!-- CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- MATERIAL ICON -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
    <!-- AOS LINK -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>
<body>
    

    <!-- JAVASCRIPT -->
    <script src="script.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init();
      </script>
</body>
</html>

#javascript #ondomready #readystate #defer #domcontentloaded

onDomReady() Function

(function (root, factory) {
	if (typeof define === "function" && define.amd) {
		define("onDomReady", factory(root));
	} else if (typeof exports === "object") {
		module.onDomReady = factory(root);
	} else {
		root.onDomReady = factory(root);
	}
})(this, function (root) {
    "use strict";
    
    var win = window,
        doc = win.document,
        docElem = doc.documentElement,
        
        LOAD = "load",
        FALSE = false,
        ONLOAD = "on"+LOAD,
        COMPLETE = "complete",
        READYSTATE = "readyState",
        ATTACHEVENT = "attachEvent",
        DETACHEVENT = "detachEvent",
        ADDEVENTLISTENER = "addEventListener",
        DOMCONTENTLOADED = "DOMContentLoaded",
        ONREADYSTATECHANGE = "onreadystatechange",
        REMOVEEVENTLISTENER = "removeEventListener",
        
        isEventListener = ADDEVENTLISTENER in doc,
        isDomReady = FALSE,
        domReadyCallBacks = [];
        
    var exports = function (func) {
        function defer (func, wait) {
            setTimeout(func, +wait >= 0 ? wait : 1);
        }
        
        function ready (func) {
            if (!isDomReady) {
                if (!doc.body) {
                    return defer(ready);
                }
                
                isDomReady = true;

                while (func = domReadyCallBacks.shift()) {
                    defer(func);
                }
            }
        }
        
        function detach() {
            if (isEventListener) {
                doc[REMOVEEVENTLISTENER](DOMCONTENTLOADED, completed, FALSE);
                win[REMOVEEVENTLISTENER](LOAD, completed, FALSE);
            } else {
                doc[DETACHEVENT](ONREADYSTATECHANGE, completed);
                win[DETACHEVENT](ONLOAD, completed);
            }
        }
        
        function completed (event) {
            if (isEventListener || event.type === LOAD || doc[READYSTATE] === COMPLETE) {
                detach();
                ready();
            }
        }
        
        if (doc[READYSTATE] === COMPLETE) {
            defer(ready);
        } else if (isEventListener) {
            doc[ADDEVENTLISTENER](DOMCONTENTLOADED, completed, FALSE);
            win[ADDEVENTLISTENER](LOAD, completed, FALSE);
        } else {
            doc[ATTACHEVENT](ONREADYSTATECHANGE, completed);
            win[ATTACHEVENT](ONLOAD, completed );
        }
        
        isDomReady ? defer(func) : domReadyCallBacks.push(func);
    };
    
    return exports;
});

// An example of the use of function onDomReady.
onDomReady(function(){
    console.log("DOM IS READY");
});

#javascript #module #async #script

Module for Loading Scripts Asynchronously

/**
 *    @module
 *    @author daemon.devin <daemon.devin@gmail.com>
 *
 *    @param {String}   file - The path of the file you want to load.
 *    @param {Function} callback (optional) - Called after script load.
 */
var loader = loader || (Function() {
    return {
    	
    	load: function(file, callback) {

            var script = document.createElement('script');
            script.src = file, script.async = true;
            
  			// If defined, execute the callback after checking 
  			// if the script has been successfully loaded.
            if (callback !== undefined) {
            	
            	// IE calls `script.onreadystatechange()` continuously
            	// as the script loads. Use `script.onreadystatechange()`
            	// to check if the script has finished loading.
	        script.onreadystatechange = function() {
	                
	            // When the script finishes loading, IE sets 
	            // `script.readyState` to either 'loaded' or 'complete'.
	            if (script.readyState === 'loaded' ||
	                script.readyState === 'complete') {
	                    
                  	// Set `onreadystatechange()` to null to prevent 
                  	// it from firing again.
	                script.onreadystatechange = null;
	                    
	                // Execute the callback.
	                callback (file );
	            }
	        };
	            
	        // The following is one of the reasons IE is infereor
            // to all modern browsers.
	        script.onload = function () {
	            callback ( file );
	        };
            }
            
  			// Add the loaded script to the end of the document 
  			// so it won't hinder the rest of the page from loading.
            document.body.appendChild(script);
        } 
    };
}());

#javascript #amd #commonjs #module

Module supporting CommonJS, AMD, and Global/Window

// Define your class
class MyModule {
  constructor($) {
    this.$ = $;
  }
  
  // Add methods and properties here
}

// Environment detection and initialization
(function() {
  if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
    // CommonJS
    module.exports = MyModule;
  } else if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], function($) {
      return new MyModule($);
    });
  } else {
    // Global
    if (typeof window.jQuery !== 'undefined') {
      window.MyModule = MyModule;
    }
  }
})();

#javascript

Scraping guides

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.common.exceptions import NoSuchElementException, TimeoutException
import csv

URL = "https://www.theinfatuation.com/new-york/guides"

chrome_options = webdriver.ChromeOptions()
chrome_options.add_experimental_option("detach", True)

print("Starting the browser...")
driver = webdriver.Chrome(options=chrome_options)
driver.get(URL)

# Close the modal if it appears
try:
    wait = WebDriverWait(driver, 10)
    no_thanks_button = wait.until(
        EC.element_to_be_clickable(
            (By.CSS_SELECTOR, "button[data-click='close'][aria-label='No thanks; close the dialog']"))
    )
    no_thanks_button.click()
    print("Closed the modal!")
except TimeoutException:
    print("No modal to close!")

# close the bottom overlay
try:
    overlay_close_button = WebDriverWait(driver, 10).until(
        EC.element_to_be_clickable((By.ID, "bx-close-inside-2272826"))
    )
    driver.execute_script("arguments[0].click();", overlay_close_button)
    print("Closed the overlay!")
except TimeoutException:
    print("Overlay not found or already closed.")


# Click load more 10 times
for _ in range(10):
    try:
        load_more_button = WebDriverWait(driver, 10).until(
            EC.element_to_be_clickable((By.CSS_SELECTOR, "div.css-xi606m"))
        )
        load_more_button.click()
        print(f"Clicked load more {_+1} times.")

        # Adding a sleep duration to allow data to be rendered
        time.sleep(5)
    except TimeoutException:
        print(
            f"Couldn't click 'load more' the {_+1}-th time. Continuing with the available data.")
        break

# Extract data
guide_elements = driver.find_elements(
    By.CSS_SELECTOR, "a[data-testid='detailedStory-link']")
guide_data = [guide.get_attribute('href') for guide in guide_elements]

# CSV output setup
with open("output.csv", "w", newline="") as csvfile:
    fieldnames = ["Article Title", "URL", "Restaurants", "Date"]
    writer = csv.DictWriter(csvfile, fieldnames=fieldnames)
    writer.writeheader()

    for link in guide_data:
        driver.get(link)
        try:
            # CSS selector to get the article title
            title = driver.find_element(
                By.CSS_SELECTOR, "h1 > .styles_title__QfDF5").text
            # Extracting the date
            date_element = driver.find_element(
                By.CSS_SELECTOR, "div.styles_contributorsList__EKq26 time")
            date = date_element.get_attribute("datetime")
            # CSS selector to get restaurant names
            restaurants = [restaurant.text for restaurant in driver.find_elements(
                By.CSS_SELECTOR, "h2.chakra-heading.styles_mainHeading__e4VAy.flatplan_venue-heading.css-67umdg")]

            # Print data
            print("Article Title:", title)
            print("URL:", link)
            print("Restaurants:", ", ".join(restaurants))
            print("Date:", date)
            print("------")

            writer.writerow({"Article Title": title, "URL": link,
                            "Restaurants": ", ".join(restaurants), "Date": date})
        except NoSuchElementException:
            print(
                f"Couldn't retrieve complete data for article at URL: {link}")

driver.quit()

#javascript

How to send 50000 emails at once in queue node js | by Suneel Kumar | Medium

const kue = require('kue');
const queue = kue.createQueue();

const addEmailJob = (email, subject, html) => {
  const job = queue.create('email', {
    email,
    subject,
    html
  })
    .save((error) => {
      if (error) {
        console.error(error);
      } else {
        console.log(`Email job added to queue: ${email}`);
}
});
};

// Add 50,000 email jobs to the queue
const emailList = [
{ email: 'recipient1@example.com', subject: 'Test email 1', html: '<p>This is a test email 1</p>' },
{ email: 'recipient2@example.com', subject: 'Test email 2', html: '<p>This is a test email 2</p>' },
// ...
{ email: 'recipient50000@example.com', subject: 'Test email 50000', html: '<p>This is a test email 50000</p>' }
];

emailList.forEach((emailData) => {
addEmailJob(emailData.email, emailData.subject, emailData.html);
});

#javascript

How to send 50000 emails at once in queue node js | by Suneel Kumar | Medium

const kue = require('kue');
const queue = kue.createQueue();
const sendEmail = require('./send-email'); // The script from step 3

queue.process('email', (job, done) => {
sendEmail(job.data.email, job.data.subject, job.data.html);
done();
});

#react.js #javascript

this is a for loop for an array

for (int index = 0; index < array.length; index++){
  
}

#react.js #javascript

Chart js Line chart React

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js';
import { Line } from 'react-chartjs-2';       


function HraHero() {
  return (
    <Line
      className='bg-white h-3/4 w-full'
      options={{
        responsive: true,
        plugins: {
          legend: false
        },
        scales: {
          x: {
            ticks: {
              color: 'orange'
            },
            title: {
              display: true,
              text: 'Years of Growth',
              color: '#00aeef',
              font: {
                size: 14
              }
            }
          },
          y: {
            ticks: {
              callback: function (value, i) {
                if (i == 0) {
                  return value + ' k';
                }

                return value + ' Lakhs';
              }
            },
            title: {
              display: true,
              text: 'Amount Invested',
              color: '#154d83',
              font: {
                size: 14
              }
            },
            border: {
              dash: [6, 4]
            }
          }
        }
      }}
      data={{
        labels: [
          2022, 2024, 2026, 2028, 2030, 2032, 2034, 2036, 2038, 2040, 2042
        ],
        datasets: [
          {
            data: [0, 2, 3, 5, 10, 15, 20, 25, 30, 35],
            borderColor: '#f47920',
            tension: 0.1,
            pointRadius: '6',
            pointHoverRadius: '6',
            pointBackgroundColor: '#00aeef',
            pointHoverBackgroundColor: '#f47920'
          }
        ]
      }}
    />
  );
}

export default HraHero

#react.js #javascript

Chart js Line chart React

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js';
import { Line } from 'react-chartjs-2';       


function HraHero() {
   ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
  );
  
  return (
    <Line
      className='bg-white h-3/4 w-full'
      options={{
        responsive: true,
        plugins: {
          legend: false
        },
        scales: {
          x: {
            ticks: {
              color: 'orange'
            },
            title: {
              display: true,
              text: 'Years of Growth',
              color: '#00aeef',
              font: {
                size: 14
              }
            }
          },
          y: {
            ticks: {
              callback: function (value, i) {
                if (i == 0) {
                  return value + ' k';
                }

                return value + ' Lakhs';
              }
            },
            title: {
              display: true,
              text: 'Amount Invested',
              color: '#154d83',
              font: {
                size: 14
              }
            },
            border: {
              dash: [6, 4]
            }
          }
        }
      }}
      data={{
        labels: [
          2022, 2024, 2026, 2028, 2030, 2032, 2034, 2036, 2038, 2040, 2042
        ],
        datasets: [
          {
            data: [0, 2, 3, 5, 10, 15, 20, 25, 30, 35],
            borderColor: '#f47920',
            tension: 0.1,
            pointRadius: '6',
            pointHoverRadius: '6',
            pointBackgroundColor: '#00aeef',
            pointHoverBackgroundColor: '#f47920'
          }
        ]
      }}
    />
  );
}

export default HraHero

#javascript #array

Create a dummy array with numbers

 const numbersArray = Array.from({length: 20}, ((_, index) => index + 1));

#react.js #css #javascript

How to Permanently Remove Git Credentials from Your System

1.To check which Git credentials are configured in your system, you can use the following command in the terminal:

```bash
git config --list
```

2. To permanently remove the user.email and user.name settings from your Git configuration, you can use the following commands in the terminal:

```bash
git config --global --unset user.email
git config --global --unset user.name
```

3. Then run the git config --list command to check your Git configuration, the output will not include the user.email and user.name settings.

#javascript

jquery - How to set time delay in javascript - Stack Overflow

var delayInMilliseconds = 1000; //1 second

setTimeout(function() {
  //your code to be executed after 1 second
}, delayInMilliseconds);
//var is not required. ,1000 is OK

#javascript

chat gpt func

async function gptFunctions(prompts, model, functions){
    const plan = readFile("public/generated/shared_deps.md")
    await openai.chat.completions.create({
        messages: [{ role: "system", content: s.appSystemPrompt+"Given the prompt and the plan, return a list of strings corresponding to the new files that will be generated."}
        ,
            {
                "role": "user",
                "content": " I want a:" +s.prompt,
            },
            {
                "role": "user",
                "content": " The plan we have agreed on is:"+s.plan,
            },
        ],
        model: model,
        functions: [{'name': 'file_paths', 'description': 'Construct a list of file names.', 'parameters': {'type': 'object', 'properties': {'files_to_edit': {'type': 'array', 'items': {'type': 'string'}}}, 'required': ['files_to_edit']}}],
        function_call:{"name":"file_paths"}
      }).then((response) => {       
        let temp = JSON.parse(response.choices[0].message.function_call.arguments).files_to_edit;
        
        console.log(temp);
        
        
      }).catch((error) => {
        console.log(error);
      });
}

#javascript

javascript - How to play audio? - Stack Overflow

var audio = new Audio('audio_file.mp3');
audio.play();

#html #css #javascript

ReplaceMe -Script

/*!
 *  replaceme.js - text rotating component in vanilla JavaScript
 *  @version 1.1.0
 *  @author Adrian Klimek
 *  @link https://adrianklimek.github.io/replaceme/
 *  @copyright Addrian Klimek 2016
 *  @license MIT
 */
!function(a,b){"use strict";function c(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function d(){"function"==typeof b&&b.fn.extend({ReplaceMe:function(a){return this.each(function(){new e(this,a)})}})}function e(a,b){var d={animation:"animated fadeIn",speed:2e3,separator:",",hoverStop:!1,clickChange:!1,loopCount:"infinite",autoRun:!0,onInit:!1,onChange:!1,onComplete:!1};if("object"==typeof b?this.options=c(d,b):this.options=d,"undefined"==typeof a)throw new Error('ReplaceMe [constructor]: "element" parameter is required');if("object"==typeof a)this.element=a;else{if("string"!=typeof a)throw new Error('ReplaceMe [constructor]: wrong "element" parameter');this.element=document.querySelector(a)}this.init()}e.prototype.init=function(){"function"==typeof this.options.onInit&&this.options.onInit(),this.words=this.escapeHTML(this.element.innerHTML).split(this.options.separator),this.count=this.words.length,this.position=this.loopCount=0,this.running=!1,this.bindAll(),this.options.autoRun===!0&&this.start()},e.prototype.bindAll=function(){this.options.hoverStop===!0&&(this.element.addEventListener("mouseover",this.pause.bind(this)),this.element.addEventListener("mouseout",this.start.bind(this))),this.options.clickChange===!0&&this.element.addEventListener("click",this.change.bind(this))},e.prototype.changeAnimation=function(){this.change(),this.loop=setTimeout(this.changeAnimation.bind(this),this.options.speed)},e.prototype.start=function(){this.running!==!0&&(this.running=!0,this.changeWord(this.words[this.position]),this.position++),this.loop=setTimeout(this.changeAnimation.bind(this),this.options.speed)},e.prototype.change=function(){return this.position>this.count-1&&(this.position=0,this.loopCount++,this.loopCount>=this.options.loopCount)?void this.stop():(this.changeWord(this.words[this.position]),this.position++,void("function"==typeof this.options.onChange&&this.options.onChange()))},e.prototype.stop=function(){this.running=!1,this.position=this.loopCount=0,this.pause(),"function"==typeof this.options.onComplete&&this.options.onComplete()},e.prototype.pause=function(){clearTimeout(this.loop)},e.prototype.changeWord=function(a){this.element.innerHTML='<span class="'+this.options.animation+'" style="display:inline-block;">'+a+"</span>"},e.prototype.escapeHTML=function(a){var b=/<\/?\w+\s*[^>]*>/g;return b.test(a)===!0?a.replace(b,""):a},a.ReplaceMe=e,d()}(window,window.jQuery);

#javascript #ignorewrapper #click

ignores wrapping element on click

   const sibling = el.previousElementSibling; // parent wrapper
    
      if (sibling) {
        const classList = sibling.getAttribute('class');
        if (classList !== null && classList !== undefined && classList !== '') {
          if (sibling.classList.contains(navLinkClass)) {
           	// do something
          }
        }
      }

#apex #javascript

Consciente - processo a mais de 2 meses

SELECT C.CON_IN_CODIGO,     
       (SELECT MAX(FA.PFA_DT_INICIAL)
          FROM GLO_PROCESSO_FLUXO_ANDA FA
         INNER JOIN GLO_PROCESSO_FLUXO FL
            ON FA.PFLU_IN_CODIGO = FL.PFLU_IN_CODIGO
           AND FL.PFLU_CHAVE_PK = C.CON_IN_CODIGO
           AND FL.PFLU_NOMETABELA = 'RH_FORM_CONTRATACAO') DATA_MOV
  FROM RH_FORM_CONTRATACAO C  
 WHERE UPPER(c.CON_ST_STATUS) NOT IN('FINALIZADO','CANCELADO')
 and (SELECT MAX(FA.PFA_DT_INICIAL)
          FROM GLO_PROCESSO_FLUXO_ANDA FA
         INNER JOIN GLO_PROCESSO_FLUXO FL
            ON FA.PFLU_IN_CODIGO = FL.PFLU_IN_CODIGO
           AND FL.PFLU_CHAVE_PK = C.CON_IN_CODIGO
           AND FL.PFLU_NOMETABELA = 'RH_FORM_CONTRATACAO') < ADD_MONTHS(SYSDATE,-2);

#html #css #javascript

Onscreen Counter - JavaScript

function incrementStats() {
    const counters = document.querySelectorAll('.counter');

    counters.forEach((counter) => {
        counter.innerText = 0;

        const updateCounter = () => {
            const target = +counter.getAttribute('data-target'); // the "+" here casts the returned text to a number
            const c = +counter.innerText;
            const increment = target / 200;

            if (c < target) {
                counter.innerText = Math.ceil(c + increment);
                setTimeout(updateCounter, 1);
                // here the function is calling itself until "c"
                // reaches the "data-target", making it recursive
            } else {
                counter.innerText = target;
            }
        };

        updateCounter();
    });
}

document.addEventListener('DOMContentLoaded', incrementStats);

#apex #javascript

URL customizada Oracle Apex

  '<a href="' ||
          APEX_UTIL.PREPARE_URL(p_url           => 'f?p=' || :APP_ID ||
                                                   ':836:' || :APP_SESSION ||
                                                   '::NO:836:P836_ID:' ||
                                                   (SELECT ID
                                                      FROM SGQ_VISITA_OBRA_ITENS_CHECK
                                                     WHERE ID_SGQ_VISITA_OBRA_ITENS = I.ID),
                                p_checksum_type => 'SESSION') ||
          '"><span aria-hidden="true" class="fa fa-check-square-o"></span></i></i></a>'

#javascript

Offset Randomness in Symbols Grid

// #1 Main Composition

// Offset > Shift Center To
x_offset = effect("Offset")("Shift Center To")[0];
y_offset = effect("Offset")("Shift Center To")[1];
posterizeTime(thisComp.layer("Null 7").effect("posterize adjusment 2, 15")("Slider"));
x = Math.round(random(-10,10));
y = x*240;
[x_offset, y_offset+y];

// Adjustment Layer Position
temp = transform.position[0];
[temp + (240*index)-240, transform.position[1]]

// #2 Inside Each Pre-Composed Row of Squares with Random Opacity

// Each Square Position
offset = 240;
[position[0]+offset*index-120,position[1]];

// Each Square Opacity
posterizeTime(thisComp.layer("Null 5").effect("posterize")("Slider"));
seedRandom(index+thisComp.layer("Null 5").effect("seed")("Slider"));
random(0,100);

// #3 Inside Pre-Composition of Rows

// Each Row Position
offset = 240;
[position[0],position[1]+offset*index-240];

#javascript

trova risorse e immagini in background

/* log all background images on a page to the console */
let bgimg = performance.getEntriesByType('resource')
  .filter(rs => rs.initiatorType == 'css')
  .map(rs => {
  return {
    name: rs.name,
    initiator: rs.initiatorType
  }
}) || [];

(bgimg.length > 0)?
    console.table(bgimg):
    console.log('No background images on this page!');

#javascript

Capas desplazadas y transición brusca cada medio segundo

x = 0;
modulo = thisComp.layer("Null 3").effect("modulo (recomienzo)")("Slider"); // segundos en la timeline

for (x; x <= time; x += 0.5) {
	if ((x - inPoint) % modulo == 0){
		if(time >= x + 0.5){
			transform.opacity = 0;
		} else {
			transform.opacity = 100;
		}
	}
}

#javascript

Onscreen text-typing effect

function runTypingEffect() {
    const text = 'I am Chuck Winters.';
    const typingElement = document.getElementById('typing-text');
    const typingDelay = 100;

    typeText(text, typingElement, typingDelay);
}

function typeText(text, typingElement, typingDelay) {
  for (let i = 0; i < text.length; i++) {
    setTimeout(() => {
      typingElement.textContent += text.charAt(i);
    }, typingDelay * i);
  }
}

document.addEventListener('DOMContentLoaded', runTypingEffect)

#react.js #css #javascript

Passport Number - Input Fields Validation - User OnBoarding

const [formErrors, setFormErrors] = useState<Partial<UserRegistrationFormAddressInfoDetails>>({
  address: '',
  countryName: '',
  nationalityName: '',
  cityName: '',
  passportNo: '',
  passportExpiryDate: '',
  // nationality: '',
  resident: '',
  companyAdd: '',
});


handleEmptyField('passportNo', userData.passportNumber || passportNo, 'Passport No is required');


useEffect(() => {
  if (passportNo) {
    setFormErrors((prevErrors) => ({ ...prevErrors, passportNo: '' }));
  }
}, [passportNo]);

<input
      type="text"
      className={`form-control passport-number-input ${formErrors.passportNo ? 'input-error' : ''}`}
      id="passportNumber"
      placeholder="Enter Your Passport Number"
      defaultValue={userData.passportNumber}
      maxLength={12}
      onChange={(e) => {
        setPassportNo(e.target.value);
        if (e.target.value) {
        setFormErrors((prevErrors) => ({ ...prevErrors, passportNo: '' }));
        }
        }}
      onInput={(e) => {
        const input = e.target as HTMLInputElement;
        input.value = input.value.replace(/[^a-zA-Z0-9 ]/g, '');
        setPassportNo(input.value);
        }}
      {...register('passportNo', {
      required: true,
      })}
/>

#javascript

Iterate list and inner list from inner SOQL

public static List<Account> parentWithChildren() {
    List<Account> accounts = [SELECT Name, AccountSource, (SELECT Name FROM Contacts) FROM Account];

    for(Account nextAcct :accounts) {
        for(Contact nextContact :nextAcct.Contacts) {
            System.Debug(nextContact);
        }
    }

  return accounts;
}

// To access value from a lookup inside the inner query
List<Case> cases = [SELECT Id, CaseNumber, Subclassificacao__c, Status, (SELECT Id, Produto__r.Name FROM ProdutosDoCaso__r) FROM 
                    Case WHERE NTrackwise__c = '' and CreatedDate >= 2023-11-01T00:00:00.000+0000 and Status = 'MTO'];

for (Case c : cases) {
    System.debug('Case Number: ' + c.CaseNumber);
    System.debug('Subclassificacao: ' + c.Subclassificacao__c);
    System.debug('Status: ' + c.Status);

    // Iterate over related Produto__r records
    for (ProdutoDoCaso__c produto : c.ProdutosDoCaso__r) {
        System.debug('Produto Name: ' + produto.Produto__r.Name);
    }
}

#javascript

js UserScroll

function userScroll() {
  const navbar = document.querySelector('.navbar');

  window.addEventListener('scroll', () => {
    if (window.scrollY > 50) {
      navbar.classList.add('bg-dark');
    } else {
      navbar.classList.remove('bg-dark');
    }
  });
}

document.addEventListener('DOMContentLoaded', userScroll);

#javascript

Email cleanup

var grSysEmail = new GlideRecord('sys_email');
grSysEmail.addEncodedQuery("type=send-ready");
grSysEmail.query();
while (grSysEmail.next()) {
grSysEmail.state = 'processed';
grSysEmail.type= 'sent';
grSysEmail.update();
}

#javascript

javascript - Why do the CORS settings for my Express.js backend not work? - Stack Overflow

var whiteList = {
    "http://localhost:5000": true,
    "https://example-url.herokuapp.com": true
};
var allowCrossDomain = function(req, res, next) {    
        if(whiteList[req.headers.origin]){            
            res.header('Access-Control-Allow-Credentials', true);
            res.header('Access-Control-Allow-Origin', req.headers.origin);
            res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
            res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With, Origin, Accept');        
            next();
        } 
};
app.use(allowCrossDomain);

#javascript

Posterize Opacity Simple Random Animation

posterizeTime(thisComp.layer("Null 3").effect("posterize")("Slider"));
seedRandom(index+thisComp.layer("Null 3").effect("seed")("Slider"));
random(0,100);

#javascript

Debug INP in the field

function logINPDebugInfo(inpEntry) {
  console.log('INP target element:', inpEntry.target);
  console.log('INP interaction type:', inpEntry.name);

  const navEntry = performance.getEntriesByType('navigation')[0];
  const wasINPBeforeDCL =
    inpEntry.startTime < navEntry.domContentLoadedEventStart;

  console.log('INP occurred before DCL:', wasINPBeforeDCL);
}

#javascript

Find CLS

new PerformanceObserver((list) => {
  for (const {value, startTime, sources} of list.getEntries()) {
    // Log the shift amount and other entry info.
    console.log('Layout shift:', {value, startTime});
    if (sources) {
      for (const {node, curRect, prevRect} of sources) {
        // Log the elements that shifted.
        console.log('  Shift source:', node, {curRect, prevRect});
      }
    }
  }
}).observe({type: 'layout-shift', buffered: true});

#javascript

Capas desplazadas con interpolación

x = 0;
menu = thisComp.layer("Null 3").effect("Dropdown Menu Control")("Menu").value;

for (x; x <= time; x += 0.5) {
	if ((x - inPoint) % 2 == 0){
		switch(menu){
		case 1:
		transform.opacity = linear(time, x, x + 0.5, 100, 0);
		break;
		case 2:
		transform.opacity = easeOut(time, x, x + 0.5, 100, 0);
		break;
		case 3:
		transform.opacity = easeIn(time, x, x + 0.5, 100, 0);
		break;
		case 4:
		transform.opacity = ease(time, x, x + 0.5, 100, 0);
		break;
		};
	};
};

#javascript

4 Ways to Generate Random Strings in JavaScript - Sling Academy

import { v4 as uuidv4 } from 'uuid';

const randomString1 = uuidv4();
const randomString2 = uuidv4();

console.log(randomString1);
console.log(randomString2);

#react.js #css #javascript

RESENT OTP SNACKBAR MESSAGE -

  props,
  ref,
) => <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />);

export default function PhoneOTPVerification() {
  const [inputValue, setInputValue] = useState(['', '', '', '', '', '']);
  const [isVerified, setIsVerified] = useState(false);
  const [showInvalidOTPModal, setShowInvalidOTPModal] = useState(false);
  const [open, setOpen] = React.useState(false);
  const [errorMessage, setErrorMessage] = React.useState('');
  const [phoneNumber, setPhoneNumber] = useState('');
  const [snackbarSeverity, setSnackbarSeverity] = React.useState('success');
  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
  const [snackbarMessage, setSnackbarMessage] = React.useState('');

  const navigate = useNavigate();

  const handleClose = (event?: React.SyntheticEvent | Event, reason?: string) => {
    if (reason === 'clickaway') {
      return;
    }

    setOpen(false);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
    // Only allow digit characters
    const value = e.target.value.replace(/\D/g, '');
    // Create a new array with the updated value
    const newValue = [...inputValue];
    newValue[index] = value;
    setInputValue(newValue);
  };

  const handleKeyDown = (e: { key: string; }) => {
    if (e.key === 'Backspace') {
      setInputValue(inputValue.slice(0, -1)); // Remove the last character from the input value
    }
  };
  const { userGuid } = useParams();
  const verifyPhoneNumber = async () => {
    // Join the inputValue array into a single string
    const userOtp = inputValue.join('');
    // Check if the length is 6 (since we have 6 input fields)
    if (userOtp.length === 6) {
      const response = await trackPromise(api.verifyOtp(userOtp, userGuid));
      if (response?.data?.Output?.phoneVerified) {
        setIsVerified(true);
        navigate(`/accounts/signup/identity-verification/${userGuid}`);
      } else {
        setOpen(true);
        setErrorMessage('Invalid OTP');
      }
    } else {
      setIsVerified(false);
    }
  };

  const resentOtp = async () => {
    const response = await trackPromise(api.resendOtp(userGuid));
    console.log('otp resend response:', response);
    // show success sbackbart nessga if otp resend successfully
    if (response?.data?.Output?.phoneNumber) {
      setPhoneNumber(response?.data?.Output?.phoneNumber);
      setSnackbarSeverity('success');
      setSnackbarMessage('OTP resend successfully');
      setSnackbarOpen(true);
    } else {
      setSnackbarSeverity('error');
      setSnackbarMessage('OTP resend failed. Try again.');
      setSnackbarOpen(true);
    }
  };

  // useEffect(() => {
  //   resentOtp();
  // }, []);

  return (
    <>
      <main className="otp-verify-container">
        <header className="header">
          <img src={Headericon} alt="Header Image" />
        </header>
        <section className="verification-section">
          <h1 className="verification-title">Phone Number Verification</h1>
          <article className="verification-content">
            <div className="verification-icon">
              <img src={SMSIcon} alt="SMS Icon" />
            </div>
            <div className="verification-subtitle">Enter 6 Digit OTP</div>
            <div className="verification-message">
              <span className="verification-message-text">
                We have sent an OTP on
                {' '}
                <span className="verification-message-phone">{phoneNumber}</span>
              </span>
              <button
                onClick={resentOtp}
                className="resend-link"
              >
                Resend OTP
              </button>
            </div>
            <div className="verification-input mb-5">
              {[...Array(6)].map((_, index) => (
                <input
                  key={index}
                  type="text"
                  maxLength={1}
                  className="otp-input"
                  value={inputValue[index] || ''}
                  onChange={(e) => handleChange(e, index)}
                />
              ))}
              <button type="button" onClick={verifyPhoneNumber}>
                Verify
              </button>
            </div>
          </article>
        </section>
        <InvalidOTPModal
          show={showInvalidOTPModal}
          handleClose={() => setShowInvalidOTPModal(false)}
        />

      </main>
      <Snackbar
        open={open}
        autoHideDuration={3000}
        onClose={handleClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      >
        <Alert onClose={handleClose} severity="error" sx={{ width: '100%', backgroundColor: '#C13254' }}>
          {/* Oops! Something went wrong. Please try again later. */}
          {errorMessage}
        </Alert>
      </Snackbar>

      {/* snacbar for otp resend */}
      <Snackbar
        open={snackbarOpen}
        autoHideDuration={3000}
        onClose={() => setSnackbarOpen(false)}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      >
        <MuiAlert
          onClose={() => setSnackbarOpen(false)}
          variant="filled"
          elevation={6}
          severity={snackbarSeverity as MuiAlertProps['severity']}
          sx={{ width: '100%' }}
        >
          {snackbarMessage}
        </MuiAlert>
      </Snackbar>

    </>
  );
}

#javascript

price formatting

const formatPrice = (price) => {
  let formattedPrice = new Intl.NumberFormat('en-AU', { // comes from the Numberforamatted API JS
    style: 'currency',
    currency: 'AUD'
  }).format((price/100).toFixed(2));
  return formattedPrice;
}

#javascript

Dark/Light Mode Toggle - JavaScript

/*!
 * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
 */

(() => {
  'use strict';

  const storedTheme = localStorage.getItem('theme');

  const getPreferredTheme = () => {
    if (storedTheme) {
      return storedTheme;
    }

    return window.matchMedia('(prefers-color-scheme: dark)').matches
      ? 'dark'
      : 'light';
  };

  const setTheme = function (theme) {
    if (
      theme === 'auto' &&
      window.matchMedia('(prefers-color-scheme: dark)').matches
    ) {
      document.documentElement.setAttribute('data-bs-theme', 'dark');
    } else {
      document.documentElement.setAttribute('data-bs-theme', theme);
    }
  };

  setTheme(getPreferredTheme());

  const showActiveTheme = (theme, focus = false) => {
    const themeSwitcher = document.querySelector('#bd-theme');

    if (!themeSwitcher) {
      return;
    }

    const themeSwitcherText = document.querySelector('#bd-theme-text');
    const activeThemeIcon = document.querySelector('.theme-icon-active use');
    const btnToActive = document.querySelector(
      `[data-bs-theme-value="${theme}"]`
    );
    const svgOfActiveBtn = btnToActive
      .querySelector('svg use')
      .getAttribute('href');

    document.querySelectorAll('[data-bs-theme-value]').forEach((element) => {
      element.classList.remove('active');
      element.setAttribute('aria-pressed', 'false');
    });

    btnToActive.classList.add('active');
    btnToActive.setAttribute('aria-pressed', 'true');
    activeThemeIcon.setAttribute('href', svgOfActiveBtn);
    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel);

    if (focus) {
      themeSwitcher.focus();
    }
  };

  window
    .matchMedia('(prefers-color-scheme: dark)')
    .addEventListener('change', () => {
      if (storedTheme !== 'light' || storedTheme !== 'dark') {
        setTheme(getPreferredTheme());
      }
    });

  window.addEventListener('DOMContentLoaded', () => {
    showActiveTheme(getPreferredTheme());

    document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
      toggle.addEventListener('click', () => {
        const theme = toggle.getAttribute('data-bs-theme-value');
        localStorage.setItem('theme', theme);
        setTheme(theme);
        showActiveTheme(theme, true);
      });
    });
  });
})();

#javascript

vue.js - How do I fix a "Vue packages version mismatch" error on Laravel Spark v4.0.9? - Stack Overflow

Update the package with a lower version number. In this case, npm update vue. Optionally, you may want to npm update vue-loader too

#javascript

laravel - webpack.mix.js Not mix?

webpack.mix.js
اضف .vue()    عمل تغير فقط اضف ----
----------------------------------------------------------







const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

#javascript

bytes to MB GB conversion

      const units = ["bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];

      function niceBytes(x) {
        let l = 0,
          n = parseInt(x, 10) || 0;
        while (n >= 1000 && ++l) {
          n = n / 1000;
        }
        return n.toFixed(n < 10 && l > 0 ? 1 : 0) + " " + units[l];
      }

#javascript

JS Currency Formatter utility function

const formatter = new Intl.NumberFormat("en-IN", {
  style: "currency",
  currency: "INR",
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
  notation: "compact",
  compactDisplay: "short",
});

const rtf = new Intl.RelativeTimeFormat("en", {numeric: "auto"})

#javascript

Rotate a Layer 360 Degrees Throughout the Duration of the Composition

transform.rotation+(time*(360/thisComp.duration))

#javascript

reactjs - React - How do you cleanup useEffect() after fetching data and setting a state with that data? - Stack Overflow

import React, { useEffect, useState } from 'react';
import { Redirect, Route } from 'react-router-dom';

import Loading from './Loading';
import Error from './Error';

export default function ProtectedRoute({ component: Component, ...rest }) {
    
    const [ user, setUser ] = useState('');
    const [ fetchingUser, setFetchingUser ] = useState(true);
    const [ noError, setNoError ] = useState(true);

    useEffect(() => {
        const fetchUser = async () => {
            try {
                const response = await fetch('http://localhost:5000/user', {
                    credentials: 'include'
                });

                if (fetchingUser) {
                    const data = await response.json();
                    setUser(data.session.passport.user);
                }

                setFetchingUser(false);

            } catch {
                setNoError(false);
            }
        }

        fetchUser();
    }, [])

    return (

        <div>
            <Route { ...rest } render={ () => { if (!noError) return <Error />} }/>
            <Route { ...rest } render={ () => { if (fetchingUser && noError) return <Loading />} }/>
            <Route { ...rest } render={ () => { if (user && !fetchingUser && noError) return <Component />} }/>
            <Route { ...rest } render={ () => { if (!user && !fetchingUser && noError) return <Redirect to="/login" />} }/>
        </div>
    )
}

#javascript

Async utils

export function asyncSequence(items, method) {
    if (!items) {
        return Promise.resolve();
    }
    return new Promise((resolve, reject) => {
        let index = 0;
        const results = [];
        const next = () => {
            // console.info(index, 'of', items.length);
            if (index === items.length) {
                resolve(results);
            } else {
                method(items[index], index, items)
                    .then((result) => {
                        results.push(result);
                        index += 1;
                        next();
                    })
                    .catch((error) => reject(error));
            }
        };
        next();
    });
}

export function asyncFilter(items, method) {
    return new Promise((resolve, reject) => {
        Promise.all(items.map((item) => method(item)))
            .then((decisions) => {
                const results = [];
                decisions.forEach((decision, index) => {
                    if (decision) {
                        results.push(items[index]);
                    }
                });
                resolve(results);
            })
            .catch(reject);
    });
}

export function callbackToPromise(method, ...args) {
    return new Promise((resolve, reject) => {
        method(...args, (error, result) => {
            if (error) {
                reject(error);
            } else {
                resolve(result);
            }
        });
    });
}

#javascript

Can I use conditional statements with EJS templates (in JMVC)? - Stack Overflow

<% if(true){ %>
   <h1>foo</h1>
 <% } else{ %>  
   <h1>bar</h1>
<% } %>

#javascript

reactjs - Typescript input onchange event.target.value type - Stack Overflow

const onChange = (e: React.FormEvent<HTMLInputElement>) => {
  const newValue = e.currentTarget.value;
}

#javascript

Copy as HTML

// Iterate over each element with the '.group' class
document.querySelectorAll('.markdown').forEach(function(group) {
    // Create the copy button
    let copyBtn = document.createElement('button');
    copyBtn.innerText = 'Copy';
    
    // Add click event to the copy button
    copyBtn.addEventListener('click', function() {
        // Clone the group element to avoid modifying the original content
        let clonedGroup = group.cloneNode(true);
        
        // Remove all button elements from the cloned group
        clonedGroup.querySelectorAll('button').forEach(function(button) {
            button.remove();
        });

        // Copy the innerHTML of the cloned group (without buttons) to the clipboard
        let textArea = document.createElement('textarea');
        textArea.value = clonedGroup.innerHTML;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
    });
    
    // Append the copy button to the '.group' class
    group.appendChild(copyBtn);
});

#html #css #javascript

Background Color Change on scroll

<!DOCTYPE html>
<html>

<body>
The content of the body element is displayed in your browser.
</body>

</html>

#javascript

k

fetch('www.example.com/data')
    .then((res) => {
        if (!res.ok) {
            throw new Error('Error' + res.status)
        }
        return res.json()
    }).then((data) => {
        console.log('Data', data)
    }).catch((error) => {
        console.error('Error', error)
    })

#javascript

Prompts

Short notes format


Condense down the above information in easy to read format with short notes for revision. 
Make sure to include all the important facts, figures and keywords

 Add a section in the end of any Important dates / Personalities / Quotations if applicable


From the above questions asked. Create a syllabus to pass the test in which these questions will be asked

Above are questions with the text in brackets meaning (year/paper I or paper II, Question no, Marks. Sanitize the above data. The numbers 1. , 2. etc correspond to a single question unit. Now give me exact questions. 

OP ED ARTICLES REWRITING
I am preparing for the UPSC exam and I find this op-ed article difficult to understand. Could you please rewrite it in a simple and straightforward manner to help me better grasp its content?
After the article please mention any figures or facts that have been provided in the content

#javascript

Track Whatsapp

function performActions() {
    // First operation: click the first selector
    const button1 = document.querySelector("#app > div > div > div._2QgSC > div._2Ts6i._3RGKj._318SY > span > div > span > div > div > div > div:nth-child(2) > button:nth-child(2) > span.enbbiyaj.r5qsrrlp.l7jjieqr");
    if (button1) {
        button1.click();
    }

    // Wait for 50ms
    setTimeout(() => {
        // Second operation: extract the innerText of the second selector
        const headerElement = document.querySelector("#main > header");
        if (headerElement) {
            const extractedText = headerElement.innerText;
            
            const currentTime = new Date();
            const formattedTime = `${String(currentTime.getHours()).padStart(2, '0')}:${String(currentTime.getMinutes()).padStart(2, '0')}`;
            
            console.log(`[${formattedTime}] Extracted Text:`, extractedText);
        }

        // Wait for another 50ms
        setTimeout(() => {
            // Third operation: click the third selector
            const button2 = document.querySelector("#app > div > div > div._2QgSC > div._2Ts6i._3RGKj._318SY > span > div > span > div > div > div > div:nth-child(2) > button:nth-child(4)");
            if (button2) {
                button2.click();
            }
        }, 500);

    }, 500);
}

// Initial call
performActions();

// Set an interval to perform these actions every 5 minutes
setInterval(performActions, 5 * 60 * 1000);

#javascript

hffhhf

function* gen() {
  try {
    let result = yield "2 + 2 = ?"; // (1)

    alert("The execution does not reach here, because the exception is thrown above");
  } catch(e) {
    alert(e); // shows the error
  }
}

let generator = gen();

let question = generator.next().value;

generator.throw(new Error("The answer is not found in my database")); // (2)

#javascript

Generators

function* gen() {
  try {
    let result = yield "2 + 2 = ?"; // (1)

    alert("The execution does not reach here, because the exception is thrown above");
  } catch(e) {
    alert(e); // shows the error
  }
}

let generator = gen();

let question = generator.next().value;

generator.throw(new Error("The answer is not found in my database")); // (2)

#javascript

Generators

function* gen() {
  // Pass a question to the outer code and wait for an answer
  let result = yield "2 + 2 = ?"; // (*)

  alert(result);
}

let generator = gen();

let question = generator.next().value; // <-- yield returns the value

generator.next(4); // --> pass the result into the generator

#react.js #javascript #ubuntu #apache #linux #var/www/htm

Comma seprated number (india and us currency)

// for india currency ruppes
  commaSeparatedNumber: (number) => {
    return (
      number
        ?.toString()
        ?.replaceAll(",", "")
        // ?.replace(/(\.\d{2})\d*/, "$1,")
        ?.replace(/(\d)(?=(\d\d)+\d$)/g, "$1,")
    );
  },

// for us currency ruppes 
  commaSeparatedNumber: (number) => {
    return (
      number
        ?.toString()
        ?.replaceAll(",", "")
        // ?.replace(/(\.\d{2})\d*/, "$1,")
           ?.replace(/(\d)(?=(\d{3})+\b)/g, "$1,")

    );

#javascript #svelte

Svelte: Dynamic component rendering

<script>
  import ExperimentOne from './ExperimentOne.svelte';
  import ExperimentTwo from './ExperimentTwo.svelte';
 
  let component = (Math.random() * 100) > 50 ? 
    ExperimentTwo :
    ExperimentOne;
</script>
 
<svelte:component this={component} />

#javascript

generator combo

function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) yield i;
}

function* generateAlphaNum() {

  // 0..9
  yield* generateSequence(48, 57);

  // A..Z
  yield* generateSequence(65, 90);

  // a..z
  yield* generateSequence(97, 122);

}

let str = '';

for(let code of generateAlphaNum()) {
  str += String.fromCharCode(code);
}

alert(str); // 0..9A..Za..z

#javascript

gen it

function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

let generator = generateSequence();

for(let value of generator) {
  alert(value); // 1, than 2, than 3
}

#javascript

gen it

function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

let generator = generateSequence();

for(let value of generator) {
  alert(value); // 1, затем 2, затем 3
}

#javascript

gen it

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

let generator = generateSequence();

for(let value of generator) {
  alert(value); // 1, than 2
}

#javascript

Генераторы

function* f() {
  // star after keyword function
}

function *f() {
  // star befor function name
}

#javascript

Generator

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

let generator = generateSequence();

let one = generator.next();
alert(JSON.stringify(one)); // {value: 1, done: false}
let two = generator.next();
alert(JSON.stringify(two)); // {value: 2, done: false}
let three = generator.next();
alert(JSON.stringify(three)); // {value: 3, done: true}

#javascript

Генераторы

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

#javascript

Add delete to GPT4

// Add delete buttons below div.markdown elements
        const markdownDivs = document.querySelectorAll('.group');

        markdownDivs.forEach((div, index) => {
            const deleteButton = document.createElement('button');
            deleteButton.textContent = 'Delete';
            deleteButton.classList.add('delete-button');
            deleteButton.addEventListener('click', () => {
                // Remove the corresponding div when the delete button is clicked
                div.remove();
            });

            // Append the delete button to the div
            div.appendChild(deleteButton);
        });

#javascript

ESA_WorldCover_v200

// Definir región de interés
var countries = ee.Filter.expression('ADM2_CODE == 31823')
var paises = ee.FeatureCollection("FAO/GAUL/2015/level2").filter(countries)
var roi = paises.geometry()

//Seleccionar Colección de imágenes utilizada como base para el remuestreo
var dataset = ee.ImageCollection("MODIS/061/MOD13Q1").filter(ee.Filter.date('2002-05-01','2023-05-25')).filterBounds(roi);

//Definir máscara agrícola
var v200 = ee.ImageCollection("ESA/WorldCover/v200").filterBounds(roi).median()
var AgMask = v200.eq(40).clip(roi)

// Cambiar proyección de la máscara, reducir su resolución espacial y remuestrear
var crsDS = dataset.first().projection()
var AgMask_250 = AgMask.setDefaultProjection({crs :crsDS, scale: 10}).reduceResolution({
      reducer: ee.Reducer.mean(),
      maxPixels: 625
    })
    .reproject({
      crs: crsDS
    }).gte(0.5);

// Definir parametros visualizacion
var empty = ee.Image().byte();
var outline = empty.paint({
  featureCollection: paises,
  color: 1,
  width: 1
});

//Agregar capas al mapa
Map.setOptions("SATELLITE")
Map.centerObject(roi, 12);
Map.addLayer(dataset.first().select('NDVI').clip(roi), {min: 5000, max: 8000}, "NDVI", false);
Map.addLayer(AgMask, {}, "AgMask_10m", false);
Map.addLayer(AgMask_250, {}, "AgMask_250m", false);
Map.addLayer(outline, {palette: 'ff0000'}, 'Deptos');
//Map.addLayer(paises, {}, 'paises')

//Exportar la máscara
crsDS.evaluate(function(proj_obj) {
  Export.image.toAsset({
    image: AgMask_250,
    description: 'AgMask_250',
    assetId: 'AgMask_250',  // modificar ID
    region: roi,
    //scale: 250, // No definir la escala porque reproyecta la imagen y la modifica 
    crs: proj_obj.crs,
    crsTransform: proj_obj.transform
    });
});

#react.js #javascript #ubuntu #apache #linux #var/www/htm

Hide Server name (banner) from apache server.

https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/deploying_different_types_of_servers/setting-apache-http-server_deploying-different-types-of-servers

Install ModSecurity on CentOS 7

1. Enter the following into a terminal window:
sudo yum install mod_security

If prompted, pres y and hit Enter to allow the process to complete.
2. Restart the Apache service:

sudo systemctl restart httpd.service
3. Check the software version (should be 2.8.0 or later):

yum info mod_security
Step: 3 Configure ModSecurity

Upon installation, ModSecurity is set to log events according to default rules. You’ll need to edit the configuration file to adjust the rules to detect and block traffic.

The default configuration file is /etc/modsecurity/modsecurity.conf-recommended.
1. Copy and rename the file:
sudo cp /etc/modsecurity/modsecurity.conf-recommended /etc/modsecurity/modsecurity.conf

2. Next, change the ModSecurity detection mode. First, move into the /etc/modsecurity folder:
sudo cd /etc/modsecurity

3. Open the configuration file in a text editor (we will be using nano):
sudo nano modsecurity.conf
___________________________________________________________________________________________________
Now after installation 

Add this line in httpd.conf (full path-> /etc/httpd/conf/httpd.conf)
SecRuleEngine on
SecServerSignature " "
ServerSignature On
ServerTokens Prod

#javascript #array #filter

FIlter array or return full array

function filterAndCheckValue(array, valueToCheck) {
  const filteredArray = array.filter(item => item === valueToCheck);

  if (filteredArray.length === 0) {
    return array;
  }

  return filteredArray;
}

const myArray = [1, 2, 3, 4, 5];
const valueToFind = 6;

const result = filterAndCheckValue(myArray, valueToFind);
console.log(result); // Output: [1, 2, 3, 4, 5]

#javascript

Find Async JS Presentations

function fetchData(callback) {
  setTimeout(function () {
    const data = { id: 1, name: 'Example Data' };
    callback(data);
  }, 2000); // Simulating of 2 second delay
}

// callback
function processData(result) {
  console.log('Succesfull:', result);
}

// call function fetchData with transfer function processData like a callback
fetchData(processData);

console.log('Inquiry was sended.');

#react.js #css #javascript

COUNTRY CITY RELOAD ISSUE FIXED

 <div className="row form-row mb-5">
            {/* Country Col */}
            <div className="col-md-6">
              <label
                htmlFor="country"
                className="form-label w-100 country-label"
              >
                Country*
              </label>
              <Autocomplete
                disablePortal
                id="country"
                defaultValue={userData?.countryName ?? ''}
                options={countriesList}
                isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    {...register('countryName', {
                      required: true,
                    })}
                    sx={{
                      '& .MuiOutlinedInput-root': {
                        '& fieldset': {
                          borderColor: (countryID || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&:hover fieldset': {
                          borderColor: (countryID || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&.Mui-focused fieldset': {
                          borderColor: (countryID || !submitAttempted) ? 'grey' : 'red',
                        },
                      },
                    }}
                    className="country-input"
                    placeholder="Select Country"
                  />
                )}
                // onchange event handler to set the countryName state
                onChange={(e: any, newVal: any) => {
                  setCountryID(newVal.countryID);
                  setCountrySelected(true);
                  setCityID(0); // Clear the city ID
                  // Also clear any other city-related states if you have them
                }}
              />
            </div>

            {/* City Col */}
            {countrySelected && (
            <div className="col-md-6">
              <label
                htmlFor="city"
                className="form-label w-100 city-label"
              >
                City*
              </label>
              <Autocomplete
                disablePortal
                id="city"
                value={cityID ? citiesListBycountry.find((city: { cityID: number; }) => city.cityID === cityID) : null} // Use the cityID state to control the value
                options={citiesListBycountry}
                isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    {...register('cityName', {
                      required: true,
                    })}
                    sx={{
                      '& .MuiOutlinedInput-root': {
                        '& fieldset': {
                          borderColor: (cityID || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&:hover fieldset': {
                          borderColor: (cityID || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&.Mui-focused fieldset': {
                          borderColor: (cityID || !submitAttempted) ? 'grey' : 'red',
                        },
                      },
                    }}
                    className="city-input"
                    placeholder="Choose City*"
                  />
                )}
                onChange={(e, value: any) => setCityID(
                  value?.cityID,
                )}
              />
              {/* handle errors */}
              {/* {formErrors.cityName && (
              <span className="error-message">{formErrors.cityName}</span>
              )} */}
            </div>
            )}
          </div>

#javascript

Edit Scorpion6(red) Properties - Sketchfab

#javascript #mongodb

machea dos colecciones mondodb

db.cities.aggregate([
  { "$project": { "id_city": { "$toString": "$_id" } } }, //combiente a string los ObjectIds
  { "$lookup": {
    "localField": "id_city",
    "from": "itineraries",
    "foreignField": "cityID",
 as: "matching_docs"
    }
  },
  {
    $match: {
      matching_docs: { $ne: [] } // Filtrar documentos que tienen coincidencias
    }
  }
])

#javascript #mongodb

crud mongodb

db.cities.findOne({_id:ObjectId("64a47c1447972c5696cb0765")})
  
   db.cities.updateMany(
  {_id:ObjectId("64a47c1447972c5696cb0765")}, // Filtro vacío para actualizar todos los documentos
  {
    $pull: {
      "itineraries": "64efc056590b86b1be2cdd1e"
    }
  }
)
   db.cities.updateMany(
  {_id:ObjectId("64a47c1447972c5696cb0765")}, // Filtro vacío para actualizar todos los documentos
  {
    $push: {
      "itineraries": "64efc056590b86b1be2cdd1e"
    }
  }
)
   db.getCollection("cities").updateMany({_id:ObjectId("64a47c1447972c5696cb0765")},
{$push:{"itineraries":"64efc056590b86b1be2cdd1e"}})

#javascript

convert to object id type a field in mongodb

// Assuming you have a collection named "yourCollectionName" and a field named "yourFieldName"

// Connect to your MongoDB database
use yourDatabaseName;

// Update the documents in the collection
db.yourCollectionName.find({}).forEach(function(doc) {
    if (typeof doc.yourFieldName === 'string') {
        doc.yourFieldName = ObjectId(doc.yourFieldName); // Convert to ObjectId type
        db.yourCollectionName.save(doc);
    }
});

#javascript

javascript - What limitations apply to opaque responses? - Stack Overflow

const request = new Request('https://third-party-no-cors.com/', {
  mode: 'no-cors',
});

// Assume `cache` is an open instance of the Cache class.
fetch(request).then(response => cache.put(request, response));

#javascript #pagination #array #of #arrays

Pagination / array of arrays

const paginate = (array) => {
  const itemsPerPage = 10;
  const numberOfPages = Math.ceil( array.length / itemsPerPage);

  // need to create an array of arrays [[10], [20], [30]] etc
  return Array.from({ length: numberOfPages }, (_, pageIndex) => {
    const startIndex = pageIndex * itemsPerPage;
    return array.slice(startIndex, startIndex + itemsPerPage);
  });

}

export default paginate

#javascript

გაცენტვრა - Search

 <form className="flex items-center space-x-5 bg-white rounded-md p-2 shadow-md flex-1 md:flex-initial">
          <MagnifyingGlassIcon className="h-6 w-6 text-gray-400" />
          <input
            type="text"
            placeholder="search"
            className="flex-1 outline-none p-2"
          />
          <button type="submit">Search</button>
        </form>

#javascript

სურათის დამატება Image თაგით და ვაიმპორტებთ import Image from "next/image";

 <Image
        src="https://links.papareact.com/c2cdd5"
        alt="Trello logo"
        width={300}
        height={100}
        className="w-44 md:w-56 pb-10 md:pb-0 object-contain"
      />

#javascript

როდესაც საიტიდან შემოგვაქვს სურათი ნექთ კონფიგში უნდა დავამატოთ საიტი

const nextConfig = {
    images: {
        domains: ['links.papareact.com'],
    }
}

#javascript

Javascript: Detect inactivity / idle time

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to detect idle
        time in JavaScript ?
    </title>
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to detect idle time in
        JavaScript elegantly?
    </b>
      
    <p>
        The timer will be incremented every
        second to denote the idle time.
        Interaction with the mouse or
        keyboard will reset and hide the timer.
    </p>
  
    <p class="timertext" 
        style="font-size: 1.5rem;">
        You are idle for
        <span class="secs"></span> seconds.
    </p>
  
    <script type="text/javascript">
        let timer, currSeconds = 0;
  
        function resetTimer() {
  
            /* Hide the timer text */
            document.querySelector(".timertext")
                    .style.display = 'none';
  
            /* Clear the previous interval */
            clearInterval(timer);
  
            /* Reset the seconds of the timer */
            currSeconds = 0;
  
            /* Set a new interval */
            timer = 
                setInterval(startIdleTimer, 1000);
        }
  
        // Define the events that
        // would reset the timer
        window.onload = resetTimer;
        window.onmousemove = resetTimer;
        window.onmousedown = resetTimer;
        window.ontouchstart = resetTimer;
        window.onclick = resetTimer;
        window.onkeypress = resetTimer;
  
        function startIdleTimer() {
              
            /* Increment the
                timer seconds */
            currSeconds++;
  
            /* Set the timer text
                to the new value */
            document.querySelector(".secs")
                .textContent = currSeconds;
  
            /* Display the timer text */
            document.querySelector(".timertext")
                .style.display = 'block';
        }
    </script>
</body>
  
</html>

#javascript

Working Landing Page.js code

import React from "react";
import Wrapper from "../assets/wrappers/LandingPage";
import main from "../assets/images/main.svg";
import { Logo } from "../components/";
import { Link } from "react-router-dom";

const Landing = () => {
  return (
    <Wrapper>
      <nav>
        <Logo />
      </nav>
      <div className="container page">
        <div className="info">
          <h1>
            job <span>tracking</span> app
          </h1>
          <p>
            Introducing JobScribe - your ultimate job tracking solution.
            Seamlessly organize and streamline your job applications,
            interviews, and follow-ups with ease, empowering you to conquer your
            dream job effortlessly.
          </p>
          <Link to="/register" className="btn btn-hero">
            Login/Register
          </Link>
        </div>
        <img src={main} alt="job hunt" className="img main-img"></img>
      </div>
    </Wrapper>
  );
};

export default Landing;

#javascript

Working Register.js code

import { useState, useEffect } from "react";
import { Logo, FormRow, Alert } from "../components";
import Wrapper from "../assets/wrappers/RegisterPage";
import { useAppContext } from "../context/appContext";
import { useNavigate } from "react-router-dom";

const initialState = {
  name: "",
  email: "",
  password: "",
  isMember: true,
};

const Register = () => {
  const navigate = useNavigate();
  const [values, setValues] = useState(initialState);
  const { user, isLoading, showAlert, displayAlert, registerUser, loginUser } =
    useAppContext();

  const toggleMember = () => {
    setValues({ ...values, isMember: !values.isMember });
  };

  const handleChange = (e) => {
    setValues({ ...values, [e.target.name]: e.target.value });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    const { name, email, password, isMember } = values;
    if (!email || !password || (!isMember && !name)) {
      displayAlert();
      return;
    }
    const currentUser = { name, email, password };
    if (isMember) {
      loginUser(currentUser);
    } else {
      registerUser(currentUser);
    }
  };

  useEffect(() => {
    if (user) {
      setTimeout(() => {
        navigate("/");
      }, 3000);
    }
  }, [user, navigate]);

  return (
    <Wrapper className="full-page">
      <form className="form-alt" onSubmit={onSubmit}>
        <Logo />
        <h3>{values.isMember ? "Login" : "Register"}</h3>
        {showAlert && <Alert />}
        {!values.isMember && (
          <FormRow
            type="text"
            name="name"
            value={values.name}
            handleChange={handleChange}
          />
        )}

        <FormRow
          type="email"
          name="email"
          value={values.email}
          handleChange={handleChange}
        />
        <FormRow
          type="password"
          name="password"
          value={values.password}
          handleChange={handleChange}
        />

        <button type="submit" className="btn btn-block" disabled={isLoading}>
          Submit
        </button>
        <button
          type="button"
          className="btn btn-block btn-hipster"
          disabled={isLoading}
          onClick={() => {
            loginUser({
              email: "test@test.com",
              password: "hitest",
            });
          }}
        >
          {isLoading ? "Loading..." : "Demo App"}
        </button>

        <p>
          {values.isMember ? "Not a member yet?" : "Already a member?"}
          <button type="button" onClick={toggleMember} className="member-btn">
            {values.isMember ? "Register" : "Login"}
          </button>
        </p>
      </form>
    </Wrapper>
  );
};
export default Register;

#react.js #css #javascript

Passport Expiry Date displaying on component Load.

<DatePicker
                onChange={handleDatePicker}
                value={userData.passportExpiryDate || null || passportExpiryDate}
                minDate={new Date().toISOString().split('T')[0].split('-').join('/')}
                renderInput={(params: any) => (
                  <TextField
                    {...params}
                    inputProps={{
                      ...params.inputProps,
                      // readonly
                      readOnly: true,
                      placeholder: 'Select Date of Expiry',
                    }}
                    {...register('passportExpiryDate', {
                      required: true,
                    })}
                    // className="date-picker date-picker-input"
                    error={
                      (errors?.passportExpiryDate?.type === 'required' && passportExpiryDate === '')
                    }
                    sx={{
                      '& .MuiOutlinedInput-root': {
                        '& fieldset': {
                          borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&:hover fieldset': {
                          borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&.Mui-focused fieldset': {
                          borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red',
                        },
                      },
                    }}
                  />
                )}
              />

#javascript #splide #slider

JS change active class if url path matches

    function dynamicVetIsNav(){
        const vetisMainNavLinks = document.querySelectorAll('#vetis-main-navigation .vet-nav__menu-link');
        const currentURL = window.location.pathname;

        const pathSegments = currentURL.split('/').filter(segment => segment !== "");
        if(vetisMainNavLinks){
            if (pathSegments.length >= 3) {
                const vetisMainURLPathname = pathSegments.slice(0, 3).join('/');
                
                for (const navLink of vetisMainNavLinks){
                    const navhref = navLink.getAttribute("href");
                    
                    if (navhref.includes(vetisMainURLPathname)) navLink.classList.add("active");
                }
            }
        }
    }
    
    document.addEventListener("DOMContentLoaded", dynamicVetIsNav);

#react.js #javascript #ubuntu #apache #linux #var/www/htm

HTML to PDF convertor working code

import { jsPDF } from "jspdf";
import "jspdf/dist/polyfills.es.js";
import { regex } from "./constant";

const htmlPdfConverter = (basicDetails, inputs) => {
  
  const pdfHeading = `
  <div class="h-full w-full text-dream_vacation block justify-center items-end">
  <div class="w-full flex justify-end h-full">
    <img
     src=${window.location.origin + "/indiafirst-color.png"}
      alt=""
      class="h-[110px] w-[130px]"
    />
  </div>
  <div class="w-full mb-4 mt-2 h-20 font-semibold text-[38px] text-center">
    Future Wealth Creation Report
  </div>
</div>
  `;

  const date = new Date();
  const doc = new jsPDF();
  doc.setFontSize(12);
  doc.setProperties({
    title: "Future Wealth Creation Report",
    subject: "Future Wealth Creation Report",
    author: "India first life",
    keywords: "generated, javascript, web 2.0, ajax",
    creator: "India first life"
  });

  doc.html(pdfHeading, {
    useCORS: true,
    pageSplit: true,
    callback: function (pdf) {
      pdf.save(
        `Wealth Creation Calculator Report_${
          date.getDate() +
          "-" +
          (date.getMonth() + 1) +
          "-" +
          date.getFullYear() 
        }.pdf`
      );
    },
    margin: [10, 10, 10, 10],
    autoPaging: "text",
    x: 0,
    y: 0,
    width: 195,
    windowWidth: 900
  });
  return true;
};

export default htmlPdfConverter;

#react.js #javascript #ubuntu #apache #linux #var/www/htm

Apache Server build + 404 redirection isuue fix

For react build deployment - put buli in (/var/www/html) folder
PORT 80 - is for http ip access link (comment it out in httpd.conf file)
PORT 443 is for HTTPS ip access link 

For redirection reload "404 error" issues-

1) Change httpd.conf file in (/etc/httpd/conf)and in .htaccess build folder (/var/www/html). 

2) Note: This two files should contain the same below code i.e.-> 

RewriteEngine On
RewriteBase / 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteRule ^ index.html [QSA,L]

3) Note:  in document root "/var/www/html" change AllowOverride to All.

After this re-run the Apache server command - apachectl restart

#react.js #css #javascript

Upload Same File Again - React Dropzone

  const handleFileDrop = (acceptedFiles: any) => {
    console.log('Accepted Files:', acceptedFiles);
    checkFileValidity(acceptedFiles, documentTypeID);

    // Accept same file again
    if (dropzoneInputRef.current) {
      dropzoneInputRef.current.value = '';
    }
  };

#react.js #javascript #ubuntu #apache #linux #var/www/htm

Ubuntu server file list

copy build to var/www/html

/usr/share/httpd/noindex  .... 


local -> fpts to srv.arcosunix (buil import)

cd in build folder (cmd prmpt) -> command -[    cp -rv * /var/www/html/     ]  (this will override/copy new build)
 

*-------------------------------------*

if on restart if apache didn't restart then 

delete  indiafirstlife-ssl.conf     (path -  /etc/httpd/conf.d)

then apache will work 


commentd on line 87 on  vi /etc/httpd/conf.d/ssl.conf

#javascript

Hours Minutes Second Convertor in javascript

 
let totalSeconds = 9.4342
let time = toHoursAndMinutes(Math.floor(totalSeconds));
console.log(time.s); 
function toHoursAndMinutes(totalSeconds) {
    let totalMinutes = Math.floor(totalSeconds / 60);
    let seconds= totalSeconds % 60;
    let hours = Math.floor(totalMinutes / 60);
    let minutes = totalMinutes % 60;
    if (hours < 9) {
      let hour = 0 + "" + hours;
      hours = hour.toString();
    }
    if (minutes < 9) {
      let min = 0 + "" + minutes;
      minutes = min.toString();
    }
    if (seconds <= 9) {
      let sec = 0 + "" + seconds;
      seconds = sec.toString();
    }
    else {
        console.log("second block not execute");
    } 
    return { h: hours, m: minutes, s: seconds };
}

#compiler #javascript #php #c++ #python #html

Js consol.log() code

console.log('Welcome to HomePage!')

#javascript #compiler #codinguru

online JavaScript compiler

https://www.codinguru.online/compiler/javascript

#html #css #javascript #compiler

HTML CSS JS compiler

https://www.codinguru.online/compiler/html

#javascript

javascript - "Cannot use import statement outside a module" error when importing react-hook-mousetrap in Next.js - Stack Overflow

module.exports = {
    transpilePackages: ['react-hook-mousetrap'],
    /* Your Next.js config */
};

#react.js #javascript

Age Caluculation logic

export function calculateAge(dob) {
  const userDob = dob.split("/");
  const birthDate = new Date(userDob[2], userDob[1]-1, userDob[0]);

  const today = new Date();
  const yyyy = today.getFullYear();
  let mm = today.getMonth();
  let dd = today.getDate();
  if (dd < 10) dd = "0" + dd;
  if (mm < 10) mm = "0" + mm;
  const formattedTodayDate = new Date(yyyy, mm, dd);

  let year_difference =
    formattedTodayDate.getFullYear() - birthDate.getFullYear(); // 2001 - 2000 = 1
  let one_or_zero =
    formattedTodayDate.getMonth() < birthDate.getMonth() ||
    (formattedTodayDate.getMonth() === birthDate.getMonth() &&
      formattedTodayDate.getDate() < birthDate.getDate())
      ? 1
      : 0;
  let age = year_difference - one_or_zero;

  return age;
}

#html #css #javascript #php

refer

<?php
// error_reporting(E_ALL);
// ini_set('display_errors', 1);
error_reporting(0);
date_default_timezone_set('Asia/Kolkata');
function get($url)
{
  // Initialize a CURL session.
  $ch = curl_init();

  // Return Page contents.
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

  //grab URL and pass it to the variable.
  curl_setopt($ch, CURLOPT_URL, $url);

  $result = curl_exec($ch);

  return $result;
}

$user = $_POST['user'];
$offer = $_POST['offer'];
$cname = $_POST['cname'];
$event = $_POST['event'];

$rp = get('https://nextpower.cashinmedia.in/api/v1/checkRefer/0a51d09c-f329-4436-89d5-bdbb52bea07c/' . $offer . '?number=' . $user . '');

// JSON response from the URL
$response = $rp;

// Decode the JSON response
$response_data = json_decode($response, true);

$totalClicks = $response_data['clicks'];

$count = $response_data['count'];

// Extract the 'data' section from the response
$data = $response_data['data'];

// Check if there's any data to display
if (count($data) > 0) {
  // Echo the table header
//     echo '<table border="1">
//         <tr>
//             <th>Click</th>
//             <th>User Amount</th>
//             <th>Refer Amount</th>
//             <th>User</th>
//             <th>Refer</th>
//             <th>Event</th>
//             <th>Status</th>
//             <th>Payment Status</th>
//             <th>Payment Message</th>
//             <th>Created At</th>
//         </tr>';

  //     // Loop through each data entry and display in table rows
//     foreach ($data as $entry) {
//     $userEncoded = preg_replace('/\d{5}(?=\d{4}$)/', 'xxxxx', $entry['user']);

  //     echo '<tr>';
//     echo '<td>' . $entry['click'] . '</td>';
//     echo '<td>' . $entry['userAmount'] . '</td>';
//     echo '<td>' . $entry['referAmount'] . '</td>';
//     echo '<td>' . $userEncoded . '</td>'; // Display encoded user
//     echo '<td>' . $entry['refer'] . '</td>';
//     echo '<td>' . $entry['event'] . '</td>';
//     echo '<td>' . $entry['status'] . '</td>';
//     echo '<td>' . $entry['referPaymentStatus'] . '</td>';
//     echo '<td>' . $entry['payMessage'] . '</td>';
//     echo '<td>' . $entry['createdAt'] . '</td>';
//     echo '</tr>';
// }

  //     // Close the table
//     echo '</table>';
// } else {
//     // If there's no data, show a JavaScript alert
//     echo '<script>alert("No data found.");</script>';
// }
  ?>
  <html lang="en" dir="ltr">


  <head>
    <meta charset="utf-8">
    <title>FokatCash</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap">
    <link rel="stylesheet" href="report.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width">
  </head>
  <style>
    .data-table td,
    .data-table th {
      font-size: 17px;
      /* Adjust the value as needed */
    }

    .credited {
      color: #FFA500;
      /* Orange color */
    }
  </style>

  <body>
    <center>
      <div class="login-form">
        <h1>
          <font color='#0f0f0f'>REPORT
        </h1>
        <center>

  </body>

  </html>

  <div class="statics">
    <center><br>
      <fieldset>Refferer:
        <?php echo $user; ?>
        <hr>Camp:
        <?php echo $cname; ?>
        <hr>Total Clicks:
        <?php echo $totalClicks; ?>
        <hr>Total Conversions: <span id="totalLeads">Calculating...</span> <!-- Placeholder for total leads -->
        <hr>
        <font color="#008000"> Cashback Sent: Rs. <span id="totalAcceptedReferAmount">Calculating...</span> </font>
        <!-- Placeholder for total refer amount -->
        <hr>
        <font color="#FFA500">Pending Cashback : Rs.<span id="totalPendingReferAmount">Calculating...</span></font>
        <hr>
      </fieldset><br><br>
      <table class="data-table">
        <tr>

          <th>Camp Name</th>
          <th>Refer Amount</th>
          <!--<th>Refer Status</th>-->
          <th>Cashback Status</th>
          <th>Time</th>
        </tr>
        <?php
        foreach ($data as $entry) {
          $userEncoded = preg_replace('/\d{5}(?=\d{4}$)/', 'xxxxx', $entry['user']);
          $dateTime = new DateTime($entry['createdAt']);

          // Convert to IST timezone
          $dateTime->setTimezone(new DateTimeZone('Asia/Kolkata'));

          // Format the time in desired format
          $istTimeFormatted = $dateTime->format('Y-m-d H:i:s');

          if ($entry['referPaymentStatus'] === 'REJECTED' || $entry['referPaymentStatus'] === 'BLOCKED') {
            continue;
          }

          if ($entry['referPaymentStatus'] == 'ACCEPTED' || $entry['referPaymentStatus'] == 'UNKNOWN' || $entry['referPaymentStatus'] == 'FAILURE') {
            $cashbackStatus = '<b><span style="color: #198754;">Credited</span></b>';
          } elseif ($entry['referPaymentStatus'] == 'PENDING') {
            $cashbackStatus = '<b><span style="color: #FFA500;">Processing</span></b>';
          } else {
            // Handle other cases or set a default value for $cashbackStatus
            // For example: $cashbackStatus = 'Unknown Status';
            $cashbackStatus = $entry['referPaymentStatus'];
          }


          if ($entry['referAmount'] > 0) {
            echo '<tr>';
            // echo '<td>' . $entry['click'] . '</td>';
            // echo '<td>' . $entry['userAmount'] . '</td>';
            echo '<td>' . $cname . '</td>';
            echo '<td>' . $entry['referAmount'] . '</td>';
            // echo '<td>' . $userEncoded . '</td>'; // Display encoded user
            // echo '<td>' . $entry['refer'] . '</td>';
            // echo '<td>' . $entry['event'] . '</td>';
            // echo '<td>' . $entry['status'] . '</td>';
            echo '<td>' . $cashbackStatus . '</td>';
            // echo '<td>' . $entry['payMessage'] . '</td>';
            echo '<td>' . $istTimeFormatted . '</td>';
            echo '</tr>';
          }
        }
        // Close the table
        echo '</table>';
} else {
  // If there's no data, show a JavaScript alert
  ?>
        <html lang="en" dir="ltr">


        <head>
          <meta charset="utf-8">
          <title>FokatCash</title>
          <link rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap">
          <link rel="stylesheet" href="report.css">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
          <meta name="viewport" content="width=device-width">
        </head>
        <style>
          .data-table td,
          .data-table th {
            font-size: 17px;
            /* Adjust the value as needed */
          }

          .credited {
            color: #FFA500;
            /* Orange color */
          }
        </style>

        <body>
          <center>
            <div class="login-form">
              <h1>
                <font color='#0f0f0f'>REPORT
              </h1>
              <center>

        </body>

        </html>

        <div class="statics">
          <center><br>
            <fieldset>Refferer:
              <?php echo $user; ?>
              <hr>Camp:
              <?php echo $cname; ?>
              <hr>Total Clicks:
              <?php echo $totalClicks; ?>
              <hr>Total Conversions: <span id="totalLeads">Calculating...</span> <!-- Placeholder for total leads -->
              <hr>
              <font color="#008000"> Cashback Sent: Rs. <span id="totalAcceptedReferAmount">Calculating...</span> </font>
              <!-- Placeholder for total refer amount -->
              <hr>
              <font color="#FFA500">Pending Cashback : Rs.<span id="totalPendingReferAmount">Calculating...</span></font>
              <hr>
            </fieldset><br><br>

            <h5>No data Found</h5>
            <?php


}
?>
    </table>
    <!-- ... Your existing code ... -->
    <script>
  // JavaScript to calculate and display the total leads count and total refer amounts
  document.addEventListener("DOMContentLoaded", function () {
    // Calculate the total leads count and total refer amounts based on the payment statuses and refer amount conditions
    var totalLeads = 0;
    var totalAcceptedReferAmount = 0;
    var totalPendingReferAmount = 0;
    var totalFailedReferAmount = 0;
    var totalUnknownReferAmount = 0;
    var event = "<?php echo $event; ?>";

    <?php foreach ($data as $entry): ?>
      <?php if ($entry['referPaymentStatus'] !== 'REJECTED' && $entry['referPaymentStatus'] !== 'BLOCKED' && $entry['referAmount'] > 0): ?>
        totalLeads++;
        <?php if ($entry['referPaymentStatus'] === 'ACCEPTED'): ?>
          totalAcceptedReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'PENDING'): ?>
          totalPendingReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'FAILURE'): ?>
          totalFailedReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'UNKNOWN'): ?>
          totalUnknownReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php endif; ?>
      <?php endif; ?>
    <?php endforeach; ?>

    // Update the HTML content to display the calculated totals
    var totalLeadsElement = document.getElementById("totalLeads");
    totalLeadsElement.textContent = totalLeads;

    var totalAcceptedReferAmountElement = document.getElementById("totalAcceptedReferAmount");
    totalAcceptedReferAmountElement.textContent = totalAcceptedReferAmount.toFixed(2);

    var totalPendingReferAmountElement = document.getElementById("totalPendingReferAmount");
    totalPendingReferAmountElement.textContent = totalPendingReferAmount.toFixed(2);

    var totalFailedReferAmountElement = document.getElementById("totalFailedReferAmount");
    totalFailedReferAmountElement.textContent = totalFailedReferAmount.toFixed(2);

    var totalUnknownReferAmountElement = document.getElementById("totalUnknownReferAmount");
    totalUnknownReferAmountElement.textContent = totalUnknownReferAmount.toFixed(2);
  });
</script>



    <br><br><br>
    <footer id="footer">
      <div class="copyright">
        &copy; Copyright <strong><span>FokatCash</span></strong>
      </div>
    </footer><!-- End Footer -->
</div><!-- End statics div -->
</center><!-- End center div -->
</body><!-- End body tag -->

</html><!-- End HTML document -->

#javascript

How the use google sign in javascript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="google-signin-client_id"
        content="CLIENT_ID">
    <title>Google Auth</title>
</head>

<body>
    <button onclick="signIn()"> SignIn with Google</button>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <script>
        let signIn = function () {
            console.log("Windows Loaded")
            google.accounts.id.initialize({
                client_id: 'CLIENT_ID',
                callback: handleCredentialResponse
            });
            google.accounts.id.prompt();
        };
        function handleCredentialResponse(res) {
            console.log("Response : ");
            console.log(res);
        }
    </script>
</body>

</html>

#javascript #class #oop #this

javaScript Class

class ClassMates{
	constructor(name,age){
    	this.name=name;
      	this.age=age;
    }
  	displayInfo(){
    	return this.name + "is " + this.age + " years old!";
    }
}

let classmate = new ClassMates("Mike Will",15);
classmate.displayInfo();  // result: Mike Will is 15 years old!

#javascript #splide #slider

Splide slider with modal

import Splide from '@splidejs/splide';

export default function feedSlider() {
    /**
     * get the slides
     * make an array of all the images
     * loop over the array and if one is clicked
     * then it opens up into a modal
     * when the modal is closed, then the modal is removed from the DOM
     */
    const splideElements = document.querySelectorAll('.splide');

    const splideOptions = {
        type: 'loop',
        arrows: false,
        trimSpace: false,
        perPage: 2,
        perMove: 1,
        lazyload: false,
        direction: 'ltr',
        pagination: false,
        fixedHeight: '400px',
        mediaQuery: 'min',
        snap: true,
        breakpoints: {
            0: {
                perPage: 1,
                padding: { left: '0rem', right: '30%' },
                fixedHeight: '400px',
            },
            1200: {
                perPage: 1,
                fixedHeight: '400px',
            },
        },
    };

    if (splideElements) {
        for (let i = 0; i < splideElements.length; i++) {
            new Splide(splideElements[i], splideOptions).mount();
        }
    }

    const component = [...document.querySelectorAll('.feed-carousel-wrapper')];

    function modal(imageClicked) {
        const feedImageModal = document.createElement('div');
        feedImageModal.dataset.component = 'feeback_modal';
        feedImageModal.classList.add('feedback_modal', 'open');

        feedImageModal.innerHTML = `
            <div class="feedback_modal__image-wrapper">
            <div class="feedback_modal__closeBtn" data-feedbackaction="open">
             <svg className="svg-icon svg-icon--small svg-icon--close">
               <use href="#close" />
              </svg>
            </div>
            <img src="${imageClicked ?? imageClicked}" data-image="main">
            </div>
        `;

        document.body.insertAdjacentElement('afterbegin', feedImageModal);

        const closeBtn = document.querySelector('[data-feedbackaction="open"]');
        closeBtn.addEventListener('click', () => {
            feedImageModal.remove();
        });

        feedImageModal.addEventListener('click', () => {
            feedImageModal.remove();
        });
    }

    function getParent(target, id) {
        let parent = target;
        while (parent) {
            if (parent.localName && parent.classList.contains(id)) {
                return parent;
            }
            parent = parent.parentNode;
        }
        return false;
    }

    function componentClick(e) {
        const { target } = e;
        const parentEl = getParent(target, 'splide__slide');
        if (!parentEl) return;

        const image = parentEl.querySelector('img');
        const imageUrl = image.getAttribute('src');
        modal(imageUrl);
    }

    component.forEach((template) => {
        template.addEventListener('click', componentClick);
    });
}

window.addEventListener('DOMContentLoaded', feedSlider);

#nodejs #javascript

How To Set Up A Request Timeout In Axios?

https://timmousk.com/blog/axios-timeout/

#react.js #css #javascript

Apply manual inputs into Address field.

<Autocomplete
  id="google-map-demo"
  defaultValue={userData.addressLine1 || ''}
  freeSolo // <-- Add this line
  clearOnEscape={false}
  clearIcon={null}
  // ...rest of your props
/>

onChange={(event: any, newValue: PlaceType | string | null) => {
  if (typeof newValue === 'string') {
    // The user entered a new address manually
    setAddress(newValue);
    console.log('Manual input:', newValue);
  } else if (newValue) {
    // The user selected an address from the dropdown
    setAddress(newValue.description);
    console.log('Selected Value:', newValue.description);
  }
}}

#javascript

5 Shocking Things About Node.js That You Thought You Knew But Didn’t! | by Erick Wendel | Medium

const setTimeout = (ms, cb) => timeout(ms, 0, cb);
const setInterval = (ms, cb) => timeout(0, ms, cb);
const setTimeoutAsync = (ms) =>
    new Promise(resolve => setTimeout(ms, resolve));

; (async function asyncFn() {
    print(new Date().toISOString(), 'waiting a sec....');
    await setTimeoutAsync(1000);
    print(new Date().toISOString(), 'waiting a sec....');
    await setTimeoutAsync(1000);
    print(new Date().toISOString(), 'finished....');
})();

#database #postgresql #nodejs #indiafirst #javascript #pgadmin4

html to pdf download working

import { jsPDF } from "jspdf";

export default async function lead({
}) {

  const doc = new jsPDF('p', 'pt', 'a4');
  doc.setFontSize(12)
  doc.html(document.getElementById("dream-house-full"),  {
    useCORS: true,
    autoPaging:'text',
    // html2canvas:
    callback: function (pdf) {
      pdf.save("12.pdf");
    },
    html2canvas: {
      scale: 0.5,
      // ignoreElements: element => element.id === autoTableConfig?.elementId,
    },
    x:10,
    y:10,
    width:1400,
  });
  // doc.save("a4.pdf");

  // htmlPdf.create(html, options).then((pdf) => pdf.toFile('test.png'));
}

#react.js #css #javascript

Clear close button on Autocomplete element

                clearOnEscape={false}
                clearIcon={null}

#javascript

Generates a Unique ID using Date & Random String

function generateUniqueId() {
    const timestamp = Date.now();
    const randomNumber = Math.random();
    const hexadecimalString = randomNumber.toString(16);

    return `id-${timestamp}-${hexadecimalString}`;
}

#react.js #css #javascript

primary email, secondary email, primary mobile number, secondary mobile number validation - validate fields based on whether they are same or not.

    // Check if primaryEmail and secondaryEmail are same
    if (primaryEmail === secondaryEmail && primaryEmail !== '' && secondaryEmail !== '') {
      errors.primaryEmail = 'Primary and Secondary email cannot be the same';
      errors.secondaryEmail = 'Primary and Secondary email cannot be the same';
    }

  // Check if primaryMobileNumber and secondaryMobileNumber are same
    if (primaryMobileNumber === secondaryMobileNumber && primaryMobileNumber !== '' && secondaryMobileNumber !== '') {
      errors.primaryMobileNumber = 'Primary and Secondary mobile number cannot be the same';
      errors.secondaryMobileNumber = 'Primary and Secondary mobile number cannot be the same';
    }

<div className="col-md-6">
              <label htmlFor="email" className="form-label w-100 email-label">
                Primary Email*
              </label>
              
// primary email

<input
                type="email"
                className={`form-control email-input ${formErrors.primaryEmail ? 'input-error' : ''}`}
                id="email"
                placeholder="abc@babc.com"
                defaultValue={userData.primaryEmail}
                onChange={(e) => setPrimaryEmail(e.target.value)}
                {...register('primaryEmail', {
                  required: true,
                })}
              />
              {
                primaryEmail === secondaryEmail
                && primaryEmail !== ''
                && secondaryEmail !== ''
                  && (
                  <div className="error-message">
                    {formErrors.primaryEmail}
                  </div>
                  )
              }
            </div>

 // secondary email

<input
                    type="email"
                    className={`form-control secondary-email-input ${formErrors.secondaryEmail ? 'input-error' : ''}`}
                    id="secondary-email"
                    placeholder="secondary@abc.com"
                    defaultValue={userData.secondaryEmail}
                    // onchange
                    onChange={(e) => setSecondaryEmail(e.target.value)}
                    // register
                    {...register('secondaryEmail', {
                      required: true,
                    })}
                  />
                  {formErrors.secondaryEmail && <div className="error-message mt-1">{formErrors.secondaryEmail}</div>}


// primary mobile number

<input
                  type="text"
                  className={`form-control mobile-input ${formErrors.primaryMobileNumber ? 'input-error' : ''}`}
                  id="mobile"
                  placeholder="XXXXXXXXXXXXXX"
                  defaultValue={userData.primaryMobileNumber}
                  onInput={(e) => {
                    const input = e.target as HTMLInputElement;
                    input.value = input.value.slice(0, 15).replace(/[^0-9 ]/g, ''); // Limit the input to 15 characters and Allow only digits and spaces
                    setPrimaryMobileNumber(input.value);
                  }}
                  {...register('primaryMobileNumber', {
                    required: true,
                  })}
                />


// secondary mobile number

                    <input
                      type="text"
                      className={`form-control secondary-mobile-input ${formErrors.secondaryMobileNumber ? 'input-error' : ''}`}
                      id="secondary-mobile"
                      placeholder="XXXXXXXXXXX"
                      defaultValue={userData.secondaryMobileNumber}
                      onInput={(e) => {
                        const input = e.target as HTMLInputElement;
                        const value = input.value.slice(0, 15).replace(/[^0-9 ]/g, ''); // Limit the input to 15 characters and Allow only digits and spaces
                        input.value = value;
                        setSecondaryMobileNumber(value);
                      }}
                      {...register('secondaryMobileNumber', {
                        required: true,
                      })}
                    />
                    {/* {
                      primaryMobileNumber === secondaryMobileNumber
                      && primaryMobileNumber !== ''
                      && secondaryMobileNumber !== ''
                        && (
                        <div className="error-message mt-1">
                          {formErrors.primaryMobileNumber}
                        </div>
                        )
                    } */}
                  </div>
                  {
                      formErrors.secondaryMobileNumber
                      && (
                      <div
                        className="error-message mt-1"
                      >
                        {formErrors.secondaryMobileNumber}
                      </div>
                      )
                    }

#react.js #css #javascript

Scroll to top of page on component initial load

  // Scroll to top of page on component mount
  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

#javascript

Function for Addition in JavaScript

// This function is for the addition of numbers

function addNumbers(a, b) {
    return a + b; 
}

let a = 5
let b = 3

console.log(addNumbers(a, b)); // This is to test the function in the console

#javascript

javascript - Vue 2 - how to calculate total from v-models integer values - Stack Overflow

 return Number(this.form.one) + Number(this.form.two)

#javascript #module #json #data #import

import json data into a JS module

// file data.json

{
"localItems": {
	"items": [
      {
		"title": "Halabut",
		"type": "string",
        "status": false
		},
			{
        "title": "Taco",
		"type": "string",
        "status": true
		},
      {
        "title": "Fish",
		"type": "string",
        "status": true
		},
      {
        "title": "Pork",
		"type": "string",
        "status": false
		}
		]
	}
}




//js file must be a module
// <script src="scripts.js" defer type="module"></script>

// JS file 
import data from "./data.json" assert { type: "json" };
const {localItems} = data;
const JSONDATA = localItems['items'];

#react.js #css #javascript

SNACKBAR IMPLEMENTATION - DOCUMENT MANAGER COMPONENT

/* eslint-disable no-restricted-syntax */
/* eslint-disable array-callback-return */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState, useEffect, useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { AiOutlineClose } from 'react-icons/ai';
import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileListIcon from '@assets/FileListIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';
import Box from '@mui/material/Box/Box';
import Button from '@mui/material/Button/Button';
import { useForm } from 'react-hook-form';
import {
  fetchDocumentTypeList,
  fetchDocumentsList,
  deleteDocument,
  willDocumentUploadSelector,
  saveDocument,
} from '@redux/slices/will-documents-upload';
import { useSelector, useDispatch } from 'react-redux';
import { DocumentTypeList } from '@api/models';
import axios from 'axios';
import { willPersonalInformationSelector } from '@redux/slices/will-personal-information';
import { willsValidatorSelector } from '@redux/slices/willsValidator';
import MirrorWillSwitcher from '@components/MirrorWillSwitcher';
// import custom hook useDocumentsList
import useDocumentsList from '@utils/hooks/useDocumentsList';
import DeleteConfirmationModal from '@components/DeleteConfirmationModal';
import { useLocation } from 'react-router';
import DocumentManagerModal from '@components/DocumentManagerModal';
import { fetchAppointmentDetail } from '@redux/slices/wills-book-appointment';
import { Alert, AlertColor, Snackbar } from '@mui/material';
import MuiAlert from '@mui/material/Alert';

import { trackPromise } from 'react-promise-tracker';
import { getAppointmentDetail } from '../../redux/slices/wills-book-appointment';
import api from '../../api';

interface Props {
  handleNext: (step: number, stepName?: string) => void;
  currentBtnStep: number;
  handleBack: () => void;
  willTypeID: number;
}

function DocumentManager({
  handleNext, currentBtnStep, handleBack, willTypeID,
}: Props) {
  // const [documentTypeID, setDocumentTypeID] = useState<string>('');
  const [documentTypeArray, setDocumentTypeArray] = useState([]);
  const [documentTypeID, setDocumentTypeID] = useState();
  const [uniqueDocumentId, setUniqueDocumentId] = useState();
  const [witnessProfileGUID, setWitnessProfileGUID] = useState();
  const [willDocGuid, setWillDocGuid] = useState<string>('');
  // const bookedForProfileGUID = 'ba125f2d-8c78-41ce-b576-6aaef9b57c2a';
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const { state } = useLocation();
  const [showBookAppointnentModal, setShowBookAppointnentModal] = useState(false);
  // State for managing snackbar
  const [snackbarOpen, setSnackbarOpen] = useState(false);
  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertColor>('error'); // You can change 'error' to 'warning' or other values if needed

  // Snackbar message to display
  const snackbarMessage = 'Please upload all required documents before proceeding to the next step.';

  const [documentIsRequired, setDocumentIsRequired] = useState<boolean>(false);

  // check document is required or not and
  useEffect(() => {
    const isRequiredDocumentsExist = documentTypeArray.some((d) => d.isRequired);
    setDocumentIsRequired(isRequiredDocumentsExist);
  }, [documentTypeArray]);

  // profile guid
  const { isSpouseSelected, spouseGuid, profileGuid } = useSelector(willPersonalInformationSelector);

  const dispatch = useDispatch();

  const handleOpenModal = () => {
    setShowModal(true);
  };
  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleBookAppointmentModalOpen = () => {
    setShowBookAppointnentModal(true);
  };

  const handleBookAppointmentModalClose = () => {
    setShowBookAppointnentModal(false);
  };

  const handleBookAppointmentModalContinue = () => {
    setShowBookAppointnentModal(false);
    // handleNext(currentBtnStep, 'upload');
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await trackPromise(api.getAppointmentDetail(profileGuid));
        console.log('fetch AppointmentDetail Result', response?.data?.Output);
        // log the timeSlotID
        console.log('timeSlotID:', response?.data?.Output?.timeSlotID);
        if (response?.data?.Output?.timeSlotID === 0) {
          console.log('No appointment details found! Opening modal');
          handleBookAppointmentModalOpen();
        } else {
          const appointmentDetails = response.data.Output;
          console.log('Appointment details:', appointmentDetails);
        }
      } catch (error) {
        console.error('Error fetching appointment detail:', error);
      }
    };
    fetchData();
  }, []);

  // API results from Redux
  const {
    bookedforprofileguid,
    docType,
    documentTypeList,
    documentsList,
    docTypeID,
    isDocumentsChanged,
  } = useSelector(willDocumentUploadSelector);
  const { mirrorWillCheck } = useSelector(willsValidatorSelector);
  // custom hook for document list
  const uploadedDocumentsList = useDocumentsList(documentsList);

  /**
   * Retrieves the list of document types and sets it to the document type array.
   *
   * @return {void} No return value.
   */
  const getDocumentTypeList = () => {
    const documentTypes: any = [];
    documentTypeList.forEach((d: DocumentTypeList) => {
      documentTypes.push({
        documentTypeID: d.docTypeID,
        documentTypeName: d.fileName,
        witnessProfileGUID: d.witnessProfileGUID,
        isRequired: d.isRequired,
      });
    });
    setDocumentTypeArray(documentTypes);
  };

  // API calls inside useEffects -------
  useEffect(() => {
    // dispatch<any>(fetchDocumentTypeList(bookedForProfileGUID));
    dispatch<any>(fetchDocumentTypeList(isSpouseSelected ? spouseGuid : profileGuid));
  }, [dispatch, isSpouseSelected]);

  useEffect(() => {
    // Dispatch the fetchDocumentsList action when documentTypeID changes
    dispatch<any>(fetchDocumentsList(isSpouseSelected ? spouseGuid : profileGuid, documentTypeID, witnessProfileGUID));
  }, [uniqueDocumentId, documentTypeID, isDocumentsChanged, isSpouseSelected]);

  // Result transformation for UI
  useEffect(() => {
    getDocumentTypeList();
  }, [documentTypeList]);

  const { handleSubmit } = useForm();
  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (docTypeId: any, witnessProfileGUID: any) => {
    const uniqueDocumentId: any = `${docTypeId}-${witnessProfileGUID}`;
    setUniqueDocumentId(uniqueDocumentId);
    setDocumentTypeID(docTypeId);
    setWitnessProfileGUID(witnessProfileGUID);
  };
  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: any) => ({
    backgroundColor: uniqueDocumentId === element ? '#023979' : '#F4F4F4',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: any) => ({
    color: uniqueDocumentId === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: any) => (uniqueDocumentId === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: any) => (uniqueDocumentId === element ? TickMarkIconGreen : TickMarkIconGrey);

  /**
   * Handles click event on "Add File" button.
   *
   * @param {any} e - The event object.
   * @return {void} Nothing is returned by this function.
   */

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
  };

  /**
   * Handles the file input change event.
   *
   * @param {any} e - the event object
   * @return {void}
   */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Updates the document type array by setting the 'isRequired' property to false for the document type
   * with the specified 'documentTypeID'. Returns the updated document type array.
   *
   * @param {any} documentTypeID - The ID of the document type to update
   * @return {void}
   */
  const updateDocumentTypeArray = (documentTypeID: any): void => {
    const updatedDocumentTypeArray = documentTypeArray.map((doc) => (doc.documentTypeID === documentTypeID ? { ...doc, isRequired: false } : doc));
    setDocumentTypeArray(updatedDocumentTypeArray);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */

  // Check the validity of uploaded files
  const checkFileValidity = async (files: any[]) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    // Filter valid files based on extension and file size
    const validFiles = files.filter((file: { name: string; size: number; }) => {
      // Check if the file extension is valid
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      // Check if the file size is within the allowed limit
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    // Filter invalid files
    const invalidFiles = files.filter(
      (file: any) => !validFiles.includes(file),
    );
    if (invalidFiles.length > 0) {
      // Display an alert message for invalid files
      const invalidFileNames = invalidFiles
        .map((file: { name: any; }) => file.name)
        .join(', ');
      alert(
        `Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`,
      );
    } else {
      // Add valid files to the uploaded files list
      const updatedUploadedFiles = [...uploadedFiles, ...validFiles];
      setUploadedFiles(updatedUploadedFiles);

      // Update the document type array with the document type ID.
      updateDocumentTypeArray(documentTypeID);

      const formData = new FormData();
      for (let i = 0; i < validFiles.length; i++) {
        const file = validFiles[i];
        formData.append('FileDoc', file, file.name);
      }

      dispatch<any>(
        saveDocument(
          isSpouseSelected ? spouseGuid : profileGuid,
          documentTypeID,
          witnessProfileGUID,
          formData,
        ),
      );
    }
  };

  const handleNextStepClick = () => {
    if (!documentIsRequired) {
      // Handle Next Step click logic here
      handleNext(state === 'Guardianship Will' ? 6 : currentBtnStep, 'upload');
    } else {
      // Show the snackbar with an error message
      setSnackbarSeverity('error'); // You can change 'error' to 'warning' or other values if needed
      setSnackbarOpen(true);
    }
  };

  /**
   * Removes a file from the system.
   *
   * @param {string} willDocGuid - the unique identifier of the file to be removed
   * @return {any} the result of the delete operation
   */
  const removeFile = (willDocGuid: string) => {
    setWillDocGuid(willDocGuid);
    handleOpenModal();
  };

  const deleteFile = () => {
    console.log(`Delete the doc with GUID: ${willDocGuid}`);
    dispatch<any>(deleteDocument(willDocGuid));
    // log the result of the delete operation
    console.log('File removed successfully!');
    setShowModal(false);
  };

  const handleUploadDocument = (data: any) => {
    console.log(data);
    // handle document upload
    handleNext(currentBtnStep, 'upload');
  };

  const {
    getRootProps, // Props for the file drop zone element
    getInputProps, // Props for the file input element
  } = useDropzone({
    onDrop: handleFileDrop, // Callback function for handling dropped or selected files
  });

  return (
    <main>
      <section>
        {mirrorWillCheck && <MirrorWillSwitcher />}
        <header className="header mt-4">Upload Documents</header>
        <p className="description">
          Upload the documents in PDF or JPEG format. Click on Next Step to save
          the files once all the documents have been uploaded
        </p>
      </section>
      <div className="row document-upload-container">
        <div className="col-lg-6 content-wrapper">
          {documentTypeArray?.map((type) => (
            <div
              className={`top${
                uniqueDocumentId === `${type?.documentTypeID}-${type?.witnessProfileGUID}` ? ' active' : ''
              }`}
              style={getBackgroundStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
              onClick={() => handleElementClick(type?.documentTypeID, type?.witnessProfileGUID)}
            >
              <div className="left-container">
                <div className="file-upload-icon">
                  <img
                    src={getFileUploadIcon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                    alt="File Uploader Icon"
                  />
                </div>
                <div
                  className="document-title"
                  style={getTitleStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                >
                  {type.documentTypeName}
                </div>
              </div>
              <div className="tick-icon">
                <img
                  src={getTickMarkicon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                  alt="Tick Mark"
                />
              </div>
            </div>
          ))}
        </div>

        <div
          className="col-lg-6 row-item"
          {...getRootProps()}
          onClick={handleRowItemClick}
        >
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend
            using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File
            size cannot be more than 20 megabytes (MB). Your files will be
            uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button className="add-file-btn" onClick={handleAddFileClick}>
              Add File
            </button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedDocumentsList.length > 0
            && uploadedDocumentsList.map((file: any, index) => (
              <div className="file-list-item" key={index}>
                <div className="file-info">
                  <div className="file-icon">
                    <img src={FileListIcon} alt="File List Icon" />
                  </div>
                  <div className="file-name">{file.fileName}</div>
                </div>
                <div className="close-icon" onClick={() => removeFile(file.willDocGuid)}>
                  <span className="close-icon-text">Remove</span>
                </div>
              </div>
            ))}
        </div>
      </div>
      {/* log documentIsRequired on template */}
      {/* {documentIsRequired && <div>Document is required</div>} */}
      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
        <button
          type="button"
          className="next-btn"
          onClick={handleNextStepClick}
        >
          Next Step
        </button>
      </Box>
      {/* Snackbar */}
      <Snackbar open={snackbarOpen} autoHideDuration={3000} onClose={() => setSnackbarOpen(false)}>
        <MuiAlert
          elevation={6}
          variant="filled"
          severity={snackbarSeverity}
          onClose={() => setSnackbarOpen(false)}
        >
          {snackbarMessage}
        </MuiAlert>
      </Snackbar>
      <span className="next-btn-text mt-4">
        *Before clicking next, please make sure the details provided here are
        correct.
      </span>
      <DeleteConfirmationModal
        show={showModal}
        handleClose={handleCloseModal}
        handleContinue={deleteFile}
        type="Document"
      />
      {
          (willTypeID === 1 || willTypeID === 2) && (
            <DocumentManagerModal
              showBookAppointnentModal={showBookAppointnentModal}
              handleBookAppointmentModalClose={handleBookAppointmentModalClose}
              handleBookAppointmentModalContinue={handleBookAppointmentModalContinue}
              handleNext={handleNext}
              currentBtnStep={currentBtnStep}
              handleBack={handleBack}
            />
          )
        }

    </main>
  );
}

export default DocumentManager;

#react.js #css #javascript

SNACKBAR IMPLEMENTATION REACT

import Snackbar from '@mui/material/Snackbar';
import MuiAlert, { AlertProps as MuiAlertProps } from '@mui/material/Alert';


// snackbar states
  const [snackbarSeverity, setSnackbarSeverity] = React.useState('success');
  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
  const [snackbarMessage, setSnackbarMessage] = React.useState('');



  const handleSnackbarClose = () => {
    // Handle the closing here
    setSnackbarOpen(false);
  };


 	try {
        const response = await trackPromise(api.saveUserRegistrationInformation(formData));
        // console.log('user reg response:', response?.data?.itemGUID);
        if (response?.data?.Output?.isAlreadyExists) {
          setSnackbarMessage('User already exists');
          setSnackbarSeverity('error');
          setSnackbarOpen(true);
        } else {
          dispatch(setUserInfo(response?.data?.Output?.itemGUID));
          setSnackbarMessage('User registered successfully');
          setSnackbarSeverity('success');
          setSnackbarOpen(true);
          setShowModal(true);
        }
      } catch (error) {
        setSnackbarMessage('An error occurred while submitting user registration');
        setSnackbarSeverity('error');
        setSnackbarOpen(true);
      }

// place snackbar at end of root jsx element. for example if parent jsx element is <main>,
 // place snackbar at the end of <main> element.
 
	  <Snackbar
        open={snackbarOpen}
        autoHideDuration={2000}
        onClose={handleSnackbarClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      >
        <MuiAlert
          onClose={handleSnackbarClose}
          variant="filled"
          elevation={6}
          severity={snackbarSeverity as MuiAlertProps['severity']}
          sx={{ width: '100%' }}
        >
          {snackbarMessage}
        </MuiAlert>
      </Snackbar>

#react.js #css #javascript

redux document type arra updates

yes it is working, our client needs further upadates here.

when user uploads all the required files and then moves to other component and return back to DocumentManager component. isRequired property is true in which userhas to upload the requried files again. 

i want to keep documentTypeArray in redux or any state management technique. so when user returns back it should be available. or you can try any other methods. 

ie once reuiqred docs are updated and when we move to documentmanager component, next step button should be disabled. 

below attaching code for your reference:

"""
function DocumentManager({
  handleNext, currentBtnStep, handleBack, willTypeID,
}: Props) {
  // const [documentTypeID, setDocumentTypeID] = useState<string>('');
  const [documentTypeArray, setDocumentTypeArray] = useState([]);
  const [documentTypeID, setDocumentTypeID] = useState();
  const [uniqueDocumentId, setUniqueDocumentId] = useState();
  const [witnessProfileGUID, setWitnessProfileGUID] = useState();
  const [willDocGuid, setWillDocGuid] = useState<string>('');
  // const bookedForProfileGUID = 'ba125f2d-8c78-41ce-b576-6aaef9b57c2a';
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const { state } = useLocation();
  const [showBookAppointnentModal, setShowBookAppointnentModal] = useState(false);

  const [documentIsRequired, setDocumentIsRequired] = useState<boolean>(false);

  // check document is required or not and
  useEffect(() => {
    const isRequiredDocumentsExist = documentTypeArray.some((d) => d.isRequired);
    setDocumentIsRequired(isRequiredDocumentsExist);
  }, [documentTypeArray]);

  // profile guid
  const { isSpouseSelected, spouseGuid, profileGuid } = useSelector(willPersonalInformationSelector);

  const dispatch = useDispatch();

  const handleOpenModal = () => {
    setShowModal(true);
  };
  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleBookAppointmentModalOpen = () => {
    setShowBookAppointnentModal(true);
  };

  const handleBookAppointmentModalClose = () => {
    setShowBookAppointnentModal(false);
  };

  const handleBookAppointmentModalContinue = () => {
    setShowBookAppointnentModal(false);
    // handleNext(currentBtnStep, 'upload');
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await trackPromise(api.getAppointmentDetail(profileGuid));
        console.log('fetch AppointmentDetail Result', response?.data?.Output);
        // log the timeSlotID
        console.log('timeSlotID:', response?.data?.Output?.timeSlotID);
        if (response?.data?.Output?.timeSlotID === 0) {
          console.log('No appointment details found! Opening modal');
          handleBookAppointmentModalOpen();
        } else {
          const appointmentDetails = response.data.Output;
          console.log('Appointment details:', appointmentDetails);
        }
      } catch (error) {
        console.error('Error fetching appointment detail:', error);
      }
    };
    fetchData();
  }, []);

  // API results from Redux
  const {
    bookedforprofileguid,
    docType,
    documentTypeList,
    documentsList,
    docTypeID,
    isDocumentsChanged,
  } = useSelector(willDocumentUploadSelector);
  const { mirrorWillCheck } = useSelector(willsValidatorSelector);
  // custom hook for document list
  const uploadedDocumentsList = useDocumentsList(documentsList);

  /**
   * Retrieves the list of document types and sets it to the document type array.
   *
   * @return {void} No return value.
   */
  const getDocumentTypeList = () => {
    const documentTypes: any = [];
    documentTypeList.forEach((d: DocumentTypeList) => {
      documentTypes.push({
        documentTypeID: d.docTypeID,
        documentTypeName: d.fileName,
        witnessProfileGUID: d.witnessProfileGUID,
        isRequired: d.isRequired,
      });
    });
    setDocumentTypeArray(documentTypes);
  };

  // API calls inside useEffects -------
  useEffect(() => {
    // dispatch<any>(fetchDocumentTypeList(bookedForProfileGUID));
    dispatch<any>(fetchDocumentTypeList(isSpouseSelected ? spouseGuid : profileGuid));
  }, [dispatch, isSpouseSelected]);

  useEffect(() => {
    // Dispatch the fetchDocumentsList action when documentTypeID changes
    dispatch<any>(fetchDocumentsList(isSpouseSelected ? spouseGuid : profileGuid, documentTypeID, witnessProfileGUID));
  }, [uniqueDocumentId, documentTypeID, isDocumentsChanged, isSpouseSelected]);

  // Result transformation for UI
  useEffect(() => {
    getDocumentTypeList();
  }, [documentTypeList]);

  const { handleSubmit } = useForm();
  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (docTypeId: any, witnessProfileGUID: any) => {
    const uniqueDocumentId: any = `${docTypeId}-${witnessProfileGUID}`;
    setUniqueDocumentId(uniqueDocumentId);
    setDocumentTypeID(docTypeId);
    setWitnessProfileGUID(witnessProfileGUID);
  };
  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: any) => ({
    backgroundColor: uniqueDocumentId === element ? '#023979' : '#F4F4F4',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: any) => ({
    color: uniqueDocumentId === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: any) => (uniqueDocumentId === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: any) => (uniqueDocumentId === element ? TickMarkIconGreen : TickMarkIconGrey);

  /**
   * Handles click event on "Add File" button.
   *
   * @param {any} e - The event object.
   * @return {void} Nothing is returned by this function.
   */

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
  };

  /**
   * Handles the file input change event.
   *
   * @param {any} e - the event object
   * @return {void}
   */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Updates the document type array by setting the 'isRequired' property to false for the document type
   * with the specified 'documentTypeID'. Returns the updated document type array.
   *
   * @param {any} documentTypeID - The ID of the document type to update
   * @return {void}
   */
  const updateDocumentTypeArray = (documentTypeID: any): void => {
    const updatedDocumentTypeArray = documentTypeArray.map((doc) => (doc.documentTypeID === documentTypeID ? { ...doc, isRequired: false } : doc));
    setDocumentTypeArray(updatedDocumentTypeArray);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */

  // Check the validity of uploaded files
  const checkFileValidity = async (files: any[]) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    // Filter valid files based on extension and file size
    const validFiles = files.filter((file: { name: string; size: number; }) => {
      // Check if the file extension is valid
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      // Check if the file size is within the allowed limit
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    // Filter invalid files
    const invalidFiles = files.filter(
      (file: any) => !validFiles.includes(file),
    );
    if (invalidFiles.length > 0) {
      // Display an alert message for invalid files
      const invalidFileNames = invalidFiles
        .map((file: { name: any; }) => file.name)
        .join(', ');
      alert(
        `Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`,
      );
    } else {
      // Add valid files to the uploaded files list
      const updatedUploadedFiles = [...uploadedFiles, ...validFiles];
      setUploadedFiles(updatedUploadedFiles);

      // Update the document type array with the document type ID.
      updateDocumentTypeArray(documentTypeID);

      const formData = new FormData();
      for (let i = 0; i < validFiles.length; i++) {
        const file = validFiles[i];
        formData.append('FileDoc', file, file.name);
      }

      dispatch<any>(
        saveDocument(
          isSpouseSelected ? spouseGuid : profileGuid,
          documentTypeID,
          witnessProfileGUID,
          formData,
        ),
      );
    }
  };

  /**
   * Removes a file from the system.
   *
   * @param {string} willDocGuid - the unique identifier of the file to be removed
   * @return {any} the result of the delete operation
   */
  const removeFile = (willDocGuid: string) => {
    setWillDocGuid(willDocGuid);
    handleOpenModal();
  };

  const deleteFile = () => {
    console.log(`Delete the doc with GUID: ${willDocGuid}`);
    dispatch<any>(deleteDocument(willDocGuid));
    // log the result of the delete operation
    console.log('File removed successfully!');
    setShowModal(false);
  };

  const handleUploadDocument = (data: any) => {
    console.log(data);
    // handle document upload
    handleNext(currentBtnStep, 'upload');
  };

  const {
    getRootProps, // Props for the file drop zone element
    getInputProps, // Props for the file input element
  } = useDropzone({
    onDrop: handleFileDrop, // Callback function for handling dropped or selected files
  });

  return (
    <main>
      <section>
        {mirrorWillCheck && <MirrorWillSwitcher />}
        <header className="header mt-4">Upload Documents</header>
        <p className="description">
          Upload the documents in PDF or JPEG format. Click on Next Step to save
          the files once all the documents have been uploaded
        </p>
      </section>
      <div className="row document-upload-container">
        <div className="col-lg-6 content-wrapper">
          {documentTypeArray?.map((type) => (
            <div
              className={`top${
                uniqueDocumentId === `${type?.documentTypeID}-${type?.witnessProfileGUID}` ? ' active' : ''
              }`}
              style={getBackgroundStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
              onClick={() => handleElementClick(type?.documentTypeID, type?.witnessProfileGUID)}
            >
              <div className="left-container">
                <div className="file-upload-icon">
                  <img
                    src={getFileUploadIcon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                    alt="File Uploader Icon"
                  />
                </div>
                <div
                  className="document-title"
                  style={getTitleStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                >
                  {type.documentTypeName}
                </div>
              </div>
              <div className="tick-icon">
                <img
                  src={getTickMarkicon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                  alt="Tick Mark"
                />
              </div>
            </div>
          ))}
        </div>

        <div
          className="col-lg-6 row-item"
          {...getRootProps()}
          onClick={handleRowItemClick}
        >
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend
            using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File
            size cannot be more than 20 megabytes (MB). Your files will be
            uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button className="add-file-btn" onClick={handleAddFileClick}>
              Add File
            </button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedDocumentsList.length > 0
            && uploadedDocumentsList.map((file: any, index) => (
              <div className="file-list-item" key={index}>
                <div className="file-info">
                  <div className="file-icon">
                    <img src={FileListIcon} alt="File List Icon" />
                  </div>
                  <div className="file-name">{file.fileName}</div>
                </div>
                <div className="close-icon" onClick={() => removeFile(file.willDocGuid)}>
                  <span className="close-icon-text">Remove</span>
                </div>
              </div>
            ))}
        </div>
      </div>
      {/* log documentIsRequired on template */}
      {/* {documentIsRequired && <div>Document is required</div>} */}
      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
        <button
          type="button"
          className="next-btn"
          onClick={() => handleNext(state === 'Guardianship Will' ? 6 : currentBtnStep, 'upload')}
          disabled={documentIsRequired}
        >
          Next Step
        </button>
      </Box>
      <span className="next-btn-text mt-4">
        *Before clicking next, please make sure the details provided here are
        correct.
      </span>
      <DeleteConfirmationModal
        show={showModal}
        handleClose={handleCloseModal}
        handleContinue={deleteFile}
        type="Document"
      />
      {
          (willTypeID === 1 || willTypeID === 2) && (
            <DocumentManagerModal
              showBookAppointnentModal={showBookAppointnentModal}
              handleBookAppointmentModalClose={handleBookAppointmentModalClose}
              handleBookAppointmentModalContinue={handleBookAppointmentModalContinue}
              handleNext={handleNext}
              currentBtnStep={currentBtnStep}
              handleBack={handleBack}
            />
          )
        }

    </main>
  );
}

"""

#javascript

Array to Object Conversion with index key

const dataArray = [
  {
    id: 1,
    odds: 1.28,
  },
  {
    id: 15,
    odds: 2.52,
  }
];

const convertedData = dataArray.reduce((result, obj) => {
  result[obj.id.toString()] = { ...obj };
  return result;
}, {});

console.log(convertedData);

#javascript

PostgreSQL CASE Statements & Examples using WHEN-THEN, if-else and switch | DataCamp

CASE
     WHEN condition_1  THEN result_1
     WHEN condition_2  THEN result_2
     ...
     ELSE  result_n
END

 OpenAI

#react.js #css #javascript

DOCUMENT MANAGER COMPONENT UPDATES

/* eslint-disable array-callback-return */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState, useEffect } from 'react';
import { useDropzone } from 'react-dropzone';
import { AiOutlineClose } from 'react-icons/ai';
import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileListIcon from '@assets/FileListIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';
import Box from '@mui/material/Box/Box';
import Button from '@mui/material/Button/Button';
import { useForm } from 'react-hook-form';
import {
  fetchDocumentTypeList,
  fetchDocumentsList,
  deleteDocument,
  willDocumentUploadSelector,
  saveDocument,
} from '@redux/slices/will-documents-upload';
import { useSelector, useDispatch } from 'react-redux';
import { DocumentTypeList } from '@api/models';
import axios from 'axios';
import { willPersonalInformationSelector } from '@redux/slices/will-personal-information';
import { willsValidatorSelector } from '@redux/slices/willsValidator';
import MirrorWillSwitcher from '@components/MirrorWillSwitcher';
// import custom hook useDocumentsList
import useDocumentsList from '@utils/hooks/useDocumentsList';
import DeleteConfirmationModal from '@components/DeleteConfirmationModal';
import { useLocation } from 'react-router';
import DocumentManagerModal from '@components/DocumentManagerModal';
import { fetchAppointmentDetail } from '@redux/slices/wills-book-appointment';

import { trackPromise } from 'react-promise-tracker';
import { getAppointmentDetail } from '../../redux/slices/wills-book-appointment';
import api from '../../api';

interface Props {
  handleNext: (step: number, stepName?: string) => void;
  currentBtnStep: number;
  handleBack: () => void;
  willTypeID: number;
}

function DocumentManager({
  handleNext, currentBtnStep, handleBack, willTypeID,
}: Props) {
  // const [documentTypeID, setDocumentTypeID] = useState<string>('');
  const [documentTypeArray, setDocumentTypeArray] = useState([]);
  const [documentTypeID, setDocumentTypeID] = useState();
  const [uniqueDocumentId, setUniqueDocumentId] = useState();
  const [witnessProfileGUID, setWitnessProfileGUID] = useState();
  const [willDocGuid, setWillDocGuid] = useState<string>('');
  // const bookedForProfileGUID = 'ba125f2d-8c78-41ce-b576-6aaef9b57c2a';
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const { state } = useLocation();
  const [showBookAppointnentModal, setShowBookAppointnentModal] = useState(false);
  // state for documentIsRequired with boolean type

  // profile guid
  const { isSpouseSelected, spouseGuid, profileGuid } = useSelector(willPersonalInformationSelector);

  const dispatch = useDispatch();

  const handleOpenModal = () => {
    setShowModal(true);
  };
  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleBookAppointmentModalOpen = () => {
    setShowBookAppointnentModal(true);
  };

  const handleBookAppointmentModalClose = () => {
    setShowBookAppointnentModal(false);
  };

  const handleBookAppointmentModalContinue = () => {
    setShowBookAppointnentModal(false);
    // handleNext(currentBtnStep, 'upload');
  };

  // Show a modal on load
  // useEffect(() => {
  //   dispatch<any>(fetchAppointmentDetail(profileGuid))
  //     .then((response: any) => {
  //       console.log('fetchAppointmentDetailResult', response);
  //       // log the response status
  //       if (!response) {
  //         handleBookAppointmentModalOpen();
  //       }
  //     });
  // }, []);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await trackPromise(api.getAppointmentDetail(profileGuid));
        console.log('fetch AppointmentDetail Result', response?.data?.Output);
        // log the timeSlotID
        console.log('timeSlotID:', response?.data?.Output?.timeSlotID);
        if (response?.data?.Output?.timeSlotID === 0) {
          console.log('No appointment details found! Opening modal');
          handleBookAppointmentModalOpen();
        } else {
          const appointmentDetails = response.data.Output;
          console.log('Appointment details:', appointmentDetails);
        }
      } catch (error) {
        console.error('Error fetching appointment detail:', error);
      }
    };
    fetchData();
  }, []);

  // API results from Redux
  const {
    bookedforprofileguid,
    docType,
    documentTypeList,
    documentsList,
    docTypeID,
    isDocumentsChanged,
  } = useSelector(willDocumentUploadSelector);
  const { mirrorWillCheck } = useSelector(willsValidatorSelector);
  // custom hook for document list
  const uploadedDocumentsList = useDocumentsList(documentsList);

  /**
   * Retrieves the list of document types and sets it to the document type array.
   *
   * @return {void} No return value.
   */
  const getDocumentTypeList = () => {
    const documentTypes: any = [];
    documentTypeList.forEach((d: DocumentTypeList) => {
      documentTypes.push({
        documentTypeID: d.docTypeID,
        documentTypeName: d.fileName,
        witnessProfileGUID: d.witnessProfileGUID,
        isRequired: d.isRequired,
      });
    });
    setDocumentTypeArray(documentTypes);
    // log the document type array with a message
    console.log('Document types array:', documentTypeArray);
  };

  const [documentIsRequired, setDocumentIsRequired] = useState<boolean>(
    documentTypeArray.some((d) => d.isRequired),
  );

  // Check for Document Required or not
  // if (documentTypeArray.some((d) => d.isRequired)) {
  //   // list reuiqred documents
  //   const requiredDocuments = documentTypeArray.filter((d) => d.isRequired);
  //   console.log('Required documents:', requiredDocuments);
  // }

  // API calls inside useEffects -------
  useEffect(() => {
    // dispatch<any>(fetchDocumentTypeList(bookedForProfileGUID));
    dispatch<any>(fetchDocumentTypeList(isSpouseSelected ? spouseGuid : profileGuid));
  }, [dispatch, isSpouseSelected]);

  useEffect(() => {
    // Dispatch the fetchDocumentsList action when documentTypeID changes
    dispatch<any>(fetchDocumentsList(isSpouseSelected ? spouseGuid : profileGuid, documentTypeID, witnessProfileGUID));
  }, [uniqueDocumentId, documentTypeID, isDocumentsChanged, isSpouseSelected]);

  // Result transformation for UI
  useEffect(() => {
    getDocumentTypeList();
  }, [documentTypeList]);

  const { handleSubmit } = useForm();
  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (docTypeId: any, witnessProfileGUID: any) => {
    const uniqueDocumentId: any = `${docTypeId}-${witnessProfileGUID}`;
    setUniqueDocumentId(uniqueDocumentId);
    setDocumentTypeID(docTypeId);
    setWitnessProfileGUID(witnessProfileGUID);
    console.log(witnessProfileGUID, uniqueDocumentId);
  };

  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: any) => ({
    backgroundColor: uniqueDocumentId === element ? '#023979' : '#F4F4F4',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: any) => ({
    color: uniqueDocumentId === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: any) => (uniqueDocumentId === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: any) => (uniqueDocumentId === element ? TickMarkIconGreen : TickMarkIconGrey);

  /**
   * Handles click event on "Add File" button.
   *
   * @param {any} e - The event object.
   * @return {void} Nothing is returned by this function.
   */
  const [documentTypeArrayCopy, setDocumentTypeArrayCopy] = useState([...documentTypeArray]);

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    documentTypeArrayCopy.forEach((d) => {
      if (d.isRequired) {
        setDocumentIsRequired(true);
        // update the documentTypeArrayCopy with the new value of documentIsRequired
        documentTypeArrayCopy.push({ ...d, isRequired: false });
        // log the updated documentTypeArrayCopy
        console.log('documentTypeArrayCopy:', documentTypeArrayCopy);
        setDocumentTypeArrayCopy(documentTypeArrayCopy);
      }
      setDocumentIsRequired(false);
    });
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
    // store documentTypeArray to a new array
    // check if any of the documents is required, if yes, set documentIsRequired to true

    // const isRequiredDocumentsExist = documentTypeArray.some((d) => d.isRequired);
    // // log the result of the check
    // console.log('isRequiredDocumentsExist:', isRequiredDocumentsExist);
    // setDocumentIsRequired(isRequiredDocumentsExist);
  };

  /**
   * Handles the file input change event.
   *
   * @param {any} e - the event object
   * @return {void}
   */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */

  // Check the validity of uploaded files
  const checkFileValidity = async (files: any) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    // Filter valid files based on extension and file size
    const validFiles = files.filter((file: any) => {
      // Check if the file extension is valid
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      // Check if the file size is within the allowed limit
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    // Filter invalid files
    const invalidFiles = files.filter(
      (file: any) => !validFiles.includes(file),
    );
    if (invalidFiles.length > 0) {
      // Display an alert message for invalid files
      const invalidFileNames = invalidFiles
        .map((file: any) => file.name)
        .join(', ');
      alert(
        `Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`,
      );
    } else {
      // Add valid files to the uploaded files list
      setUploadedFiles((prevFiles) => [...prevFiles, ...validFiles]);
      if (uploadedFiles) {
        const formData = new FormData();
        for (let i = 0; i < validFiles.length; i++) {
          const file = validFiles[i];
          formData.append('FileDoc', file, file.name);
        }

        dispatch<any>(saveDocument(isSpouseSelected ? spouseGuid : profileGuid, documentTypeID, witnessProfileGUID, formData));
      }
    }
  };

  /**
   * Removes a file from the system.
   *
   * @param {string} willDocGuid - the unique identifier of the file to be removed
   * @return {any} the result of the delete operation
   */
  const removeFile = (willDocGuid: string) => {
    setWillDocGuid(willDocGuid);
    handleOpenModal();
  };

  const deleteFile = () => {
    console.log(`Delete the doc with GUID: ${willDocGuid}`);
    dispatch<any>(deleteDocument(willDocGuid));
    // log the result of the delete operation
    console.log('File removed successfully!');
    setShowModal(false);
  };

  const handleUploadDocument = (data: any) => {
    console.log(data);
    // handle document upload
    handleNext(currentBtnStep, 'upload');
  };

  const {
    getRootProps, // Props for the file drop zone element
    getInputProps, // Props for the file input element
  } = useDropzone({
    onDrop: handleFileDrop, // Callback function for handling dropped or selected files
  });

  return (
    <main>
      <section>
        {mirrorWillCheck && <MirrorWillSwitcher />}
        <header className="header mt-4">Upload Documents</header>
        <p className="description">
          Upload the documents in PDF or JPEG format. Click on Next Step to save
          the files once all the documents have been uploaded
        </p>
      </section>
      <div className="row document-upload-container">
        <div className="col-lg-6 content-wrapper">
          {documentTypeArray?.map((type) => (
            <div
              className={`top${
                uniqueDocumentId === `${type?.documentTypeID}-${type?.witnessProfileGUID}` ? ' active' : ''
              }`}
              style={getBackgroundStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
              onClick={() => handleElementClick(type?.documentTypeID, type?.witnessProfileGUID)}
            >
              <div className="left-container">
                <div className="file-upload-icon">
                  <img
                    src={getFileUploadIcon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                    alt="File Uploader Icon"
                  />
                </div>
                <div
                  className="document-title"
                  style={getTitleStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                >
                  {type.documentTypeName}
                </div>
              </div>
              <div className="tick-icon">
                <img
                  src={getTickMarkicon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                  alt="Tick Mark"
                />
              </div>
            </div>
          ))}
        </div>

        <div
          className="col-lg-6 row-item"
          {...getRootProps()}
          onClick={handleRowItemClick}
        >
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend
            using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File
            size cannot be more than 20 megabytes (MB). Your files will be
            uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button className="add-file-btn" onClick={handleAddFileClick}>
              Add File
            </button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedDocumentsList.length > 0
            && uploadedDocumentsList.map((file: any, index) => (
              <div className="file-list-item" key={index}>
                <div className="file-info">
                  <div className="file-icon">
                    <img src={FileListIcon} alt="File List Icon" />
                  </div>
                  <div className="file-name">{file.fileName}</div>
                </div>
                <div className="close-icon" onClick={() => removeFile(file.willDocGuid)}>
                  <span className="close-icon-text">Remove</span>
                </div>
              </div>
            ))}
        </div>
      </div>
      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
        {documentIsRequired}
        <button
          type="button"
          className="next-btn"
          onClick={() => handleNext(state === 'Guardianship Will' ? 6 : currentBtnStep, 'upload')}
          disabled={documentIsRequired}
        >
          Next Step
        </button>
      </Box>
      <span className="next-btn-text mt-4">
        *Before clicking next, please make sure the details provided here are
        correct.
      </span>
      <DeleteConfirmationModal
        show={showModal}
        handleClose={handleCloseModal}
        handleContinue={deleteFile}
        type="Document"
      />
      {/* render DocumentManagerModal */}
      {
          (willTypeID === 1 || willTypeID === 2) && (
            <DocumentManagerModal
              showBookAppointnentModal={showBookAppointnentModal}
              handleBookAppointmentModalClose={handleBookAppointmentModalClose}
              handleBookAppointmentModalContinue={handleBookAppointmentModalContinue}
              handleNext={handleNext}
              currentBtnStep={currentBtnStep}
              handleBack={handleBack}
            />
          )
        }

    </main>
  );
}

export default DocumentManager;

#react.js #css #javascript

Desktop DatePicker Code (From MUI)

<DesktopDatePicker 
    value={dateOfBirth} 
    disableFuture 
    onChange={(e:any, newVal:any)=> handleDate(e, newVal)}
    renderInput={(params:any) =>
        <TextField {...params} error={false} />}
    />
 
HandleChange Function
    const handleDate = (e: any, newVal: any) => {
      console.log('formatted date', moment(e?._d).format());
      const formattedDate = moment(e?._d).format();
      setDateOfBirth(formattedDate);
    };
 
State variable and datatype
    const [dateOfBirth, setDateOfBirth] = useState<string>(null);
 
Repopulating value
    setDateOfBirth(selectedBeneficiary?.dateOfBirth?.slice(0, 10));

#javascript #webpack

sass loader webpack - Google Search

const path = require("path");
let sassRule= {
        test: /\.sass|scss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
    }
 module.exports = {
  entry: path.resolve(__dirname, "/src/index.js") // import sass file on javascript file
   module: {rules: sassRule}
 }

#javascript

Recursion and stack AP wala

function sumTo(n) {
  return n * (n + 1) / 2;
}

alert( sumTo(100) );

#javascript

Destructuring assignment

function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  alert( `${title} ${width} ${height}` );
}

showMenu(); // Menu 100 200

#javascript

Destructuring assignment

// we pass object to function
let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

// ...and it immediately expands it to variables
function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
  // title, items – taken from options,
  // width, height – defaults used
  alert( `${title} ${width} ${height}` ); // My Menu 200 100
  alert( items ); // Item1, Item2
}

showMenu(options);

#javascript

Destructuring assignment

// default values
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius (from array)
alert(surname); // Anonymous (default used)

#javascript

Form Css

.App {
  font-family: sans-serif;
  text-align: center;
}
html,
body {
  display: flex;
  height: 100vh;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  margin: 2rem;
}
form > div {
  width: 120px;
}

#javascript

node.js - Parsing error: Cannot read file '.../tsconfig.json'.eslint - Stack Overflow

module.exports = {
  // ...
  parserOptions: {
    project: "tsconfig.json",
    tsconfigRootDir: __dirname,
    sourceType: "module",
  },
  // ...
}

#react.js #css #javascript

chosoe method modal prompt

"""
function ChooseMethodModal({ showModal, handleModalClose, handleContinue }: ChooseMethodModalProps) {
  const [activeCard, setActiveCard] = useState('draftWill');
  const [selectedWillCard, setSelectedWillCard] = React.useState({
    willTypeName: 'Templated Full Will',
    willTypeID: '6',
  });
  const { results } = useSelector(willsListSelector);

  const dispatch = useDispatch();

  React.useEffect(() => {
    // dispatch<any>(fetchWillsList());
  }, []);

  /**
 * Handles the click event on the card and sets the active card name.
 *
 * @param {string} cardName - The name of the card that was clicked.
 * @return {void} This function does not return anything.
 */
  const handleCardClick = (cardName: string) => {
    setActiveCard(cardName);
    const { willTypeName, willTypeID } = results.find((will: any) => {
      if (cardName === 'draftWill') return will.willTypeName === 'Templated Full Will';
      if (cardName === 'willCopyUpload') return will.willTypeName === 'Full Will';
      return false;
    }) || { willTypeName: '', willTypeID: '' };
    setSelectedWillCard({ willTypeName, willTypeID });
  };

  const isAnyWillCardSelected = selectedWillCard.willTypeName !== '' && selectedWillCard.willTypeID !== '';

  return (
    <Modal show={showModal} onHide={handleModalClose} dialogClassName="modal-dialog-centered" size="lg">
      <Modal.Header closeButton>
        <Modal.Title className="modal-title">Choose Method</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>
          <div className="modal-choose-method-subtitle mb-3">
            List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
          </div>
        </div>
        <div className="d-flex flex-row">
          <div
            className={`card-container-draft-will d-flex flex-column align-items-center ${activeCard === 'draftWill' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('draftWill')}
          >
            {activeCard === 'draftWill' && (
            <div
              className="check-icon"
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div className="choose-method-draft-will-icon-container" style={{ marginBottom: '20px', marginTop: '20px' }}>
              <img src={DraftWillIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-draft-will-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Draft Will Using the System
            </div>
            <div
              className="text-center choose-method-draft-will-desc"
              style={{ marginTop: '10px', marginBottom: '10px' }}
            >
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
          <div
            className={`card-container-will-copy-upload d-flex flex-column align-items-center ${activeCard === 'willCopyUpload' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('willCopyUpload')}
          >
            {activeCard === 'willCopyUpload' && (
            <div
              className="check-icon"
              style={{
                position: 'absolute', top: '10px', left: '10px', margin: '10px',
              }}
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div
              className="choose-method-will-upload-icon-container"
              style={{ marginBottom: '20px', marginTop: '20px' }}
            >
              <img src={WillCopyUploadIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-will-upload-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Upload the Copy of Will
            </div>
            <div className="text-center choose-method-will-upload-desc" style={{ marginTop: '10px', marginBottom: '10px' }}>
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
        </div>
      </Modal.Body>
      <Modal.Footer className="justify-content-center">
        {
          activeCard && (
            <Link
              to={`/wills/${selectedWillCard.willTypeName.split(' ').join('-')}/${selectedWillCard.willTypeID}`}
              state={selectedWillCard.willTypeName}
            >
              <Button
                variant="primary"
              >
                Continue
              </Button>
            </Link>
          )
        }
      </Modal.Footer>
    </Modal>
  );
}
"""

You are react developer expert.
when i click on card-container-draft-will div element, to attribute of Link component is not changing.
it should be `/wills/Templated-Full-Will/6`.
right now it is `/wills//`.
pleasde make neccessary change ans return the correct code.


your solution is appreciated gpt.
but when i click on card-container-draft-will div element second time, route is not updating. initially when component loads, route is correct, route navigated to `/wills/Templated-Full-Will/6`.
but when user clicks on second time or more it is set to  `/wills//` as route.
somethnig is wrong. please check code thouroghly and find a solution to resolve this bug.

It is still not working.
when component loads initially, route is /wills/Templated-Full-Will/6, then i click on card-container-will-copy-upload, route again updated to wills/Full-Will/1, but when i again click on 
card-container-draft-will div element, route is not set to /wills/Templated-Full-Will/6. i want the route to set to /wills/Templated-Full-Will/6. there are some bugs in handleCardClick function.
please update the code.\


  const handleContinueButtonClick = () => {
    const formattedWillTypeName = selectedWillCard.willTypeName.split(' ').join('-');
    const toPath = `/wills/${formattedWillTypeName}/${selectedWillCard.willTypeID}`;
    console.log('Path: ', toPath);
    navigate(toPath, { state: selectedWillCard.willTypeName });
  };

Path:  /wills//

i am getting the path as above when i again click on card-container-draft-will div element.

 i want path to be: /wills/Templated-Full-Will/6

#javascript

Youtube Challenge #1

import React, { useState } from "react";
import { HobbyList } from "./Child";
import "./style.css";

function App() {
  const hobbies = ["playing", "singing", "shooting"];

  const [hobbiess, setHobbies] = useState(hobbies);

  const handleDelete = (hobbo) => {
    const hob = hobbiess.filter((hobby) => hobby !== hobbo);
    setHobbies(hob);
  };

  return (
    <div className="App">
      {hobbiess.map((hobby) => (
        <HobbyList key={hobby} hobby={hobby} handleDelete={handleDelete} />
      ))}
    </div>
  );
}

export default App;


// Child Component 

import React, { useState } from "react";

export const HobbyList = (props) => {
  const [checkBox, setCheckBox] = useState(false);
  const handleCheckBox = () => {
    setCheckBox(!checkBox);
  };

  console.log(props);

  return (
    <div style={{ display: "flex" }}>
      <input type="checkbox" onChange={handleCheckBox} />
      <div>{props.hobby}</div>
      {checkBox ? (
        <button onClick={() => props.handleDelete(props.hobby)}>delete</button>
      ) : null}
    </div>
  );
};

#javascript

isEmpty function in Javascript (like 'empty' in PHP)

function isEmpty(value) {
  if (value === undefined) {
    return true;
  }

  if (value === null) {
    return true;
  }

  if (typeof value === 'string' && /^[\s\u00A0]*$/.test(value)) {
    return true;
  }

  if (Array.isArray(value) && value.length === 0) {
    return true;
  }

  if (typeof value === 'object' && Object.keys(value).length === 0) {
    return true;
  }

  if (typeof value === 'number' && isNaN(value)) {
    return true;
  }

  if (value instanceof Date && isNaN(value.getTime())) {
    return true;
  }

  if (typeof value === 'boolean' && !value) {
    return true;
  }

  if (typeof value === 'function') {
    return true;
  }

  // Treat any other object as non-empty
  if (typeof value === 'object') {
    return false;
  }

  return false;
}

// Usage
var moment = require('moment');

var variable1;
console.log(isEmpty(variable1)); // true

var variable2 = null;
console.log(isEmpty(variable2)); // true

var variable3 = 'Hello';
console.log(isEmpty(variable3)); // false

var variable4 = 0;
console.log(isEmpty(variable4)); // true

var variable5 = '0';
console.log(isEmpty(variable5)); // true

var variable6 = '    ';
console.log(isEmpty(variable6)); // true

var variable7 = '\t\t';
console.log(isEmpty(variable7)); // true

var variable8 = '\n';
console.log(isEmpty(variable8)); // true

var variable9 = [];
console.log(isEmpty(variable9)); // true

var variable10 = {};
console.log(isEmpty(variable10)); // true

var variable11 = new Date('Invalid Date');
console.log(isEmpty(variable11)); // true

var variable12 = function() {
  // Function body
};
console.log(isEmpty(variable12)); // true

var variable13 = moment('2023-07-10', 'YYYY-MM-DD');
console.log(isEmpty(variable13)); // false

var variable14 = false;
console.log(isEmpty(variable14)); // true

var variable15 = { foo: 'bar' };
console.log(isEmpty(variable15)); // false

#javascript

Fetching API practice

import React, { useEffect, useState } from "react";
import "./style.css";

const App = () => {
  const [data, setData] = useState({});
  const [showInfo, setShowInfo] = useState(false);

  const fetchData = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const result = await response.json();
    setData(result);
    console.log(result);
  };

  useEffect(() => {
    fetchData();
  }, []);

  const handleButtonClick = () => {
    setShowInfo(!showInfo);
  };

  return (
    <>
      <button onClick={handleButtonClick}>
        {showInfo ? "Hide Info" : "Get Info"}
      </button>
      <br />
      {showInfo && data[10].title}
    </>
  );
};

export default App;

#react.js #css #javascript

choose method modal style changes

"""
function ChooseMethodModal({ showModal, handleModalClose, handleContinue }: ChooseMethodModalProps) {
  const [activeCard, setActiveCard] = useState('draftWill');
  const [selectedWillCard, setSelectedWillCard] = React.useState({
    willTypeName: 'Templated Full Will',
    willTypeID: '6',
  });
  const { results } = useSelector(willsListSelector);

  const dispatch = useDispatch();

  React.useEffect(() => {
    // dispatch<any>(fetchWillsList());
  }, []);

  /**
 * Handles the click event on the card and sets the active card name.
 *
 * @param {string} cardName - The name of the card that was clicked.
 * @return {void} This function does not return anything.
 */
  const handleCardClick = (cardName: string) => {
    setActiveCard(cardName);
    // log the card name
    console.log(cardName);
    // log active card
    console.log(activeCard);
    const { willTypeName, willTypeID } = results.find((will: any) => {
      if (cardName === 'draftWill') return will.willTypeName === 'Templated Full Will';
      if (cardName === 'willCopyUpload') return will.willTypeName === 'Full Will';
      return false;
    }) || { willTypeName: '', willTypeID: '' };
    setSelectedWillCard({ willTypeName, willTypeID });
  };

  const isAnyWillCardSelected = selectedWillCard.willTypeName !== '' && selectedWillCard.willTypeID !== '';

  return (
    <Modal show={showModal} onHide={handleModalClose} dialogClassName="modal-dialog-centered" size="lg">
      <Modal.Header closeButton>
        <Modal.Title className="modal-title">Choose Method</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>
          <div className="modal-choose-method-subtitle mb-3">
            List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
          </div>
        </div>
        <div className="d-flex flex-row">
          <div
            className={`card-container-draft-will d-flex flex-column align-items-center ${activeCard === 'draftWill' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('draftWill')}
          >
            {activeCard === 'draftWill' && (
            <div
              className="check-icon"
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div className="choose-method-draft-will-icon-container" style={{ marginBottom: '20px', marginTop: '20px' }}>
              <img src={DraftWillIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-draft-will-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Draft Will Using the System
            </div>
            <div
              className="text-center choose-method-draft-will-desc"
              style={{ marginTop: '10px', marginBottom: '10px' }}
            >
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
          <div
            className={`card-container-will-copy-upload d-flex flex-column align-items-center ${activeCard === 'willCopyUpload' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('willCopyUpload')}
          >
            {activeCard === 'willCopyUpload' && (
            <div
              className="check-icon"
              style={{
                position: 'absolute', top: '10px', left: '10px', margin: '10px',
              }}
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div
              className="choose-method-will-upload-icon-container"
              style={{ marginBottom: '20px', marginTop: '20px' }}
            >
              <img src={WillCopyUploadIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-will-upload-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Upload the Copy of Will
            </div>
            <div className="text-center choose-method-will-upload-desc" style={{ marginTop: '10px', marginBottom: '10px' }}>
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
        </div>
      </Modal.Body>
      <Modal.Footer className="justify-content-center">
        {
          activeCard && (
            <Link
              to={`/wills/${selectedWillCard.willTypeName.split(' ').join('-')}/${selectedWillCard.willTypeID}`}
              state={selectedWillCard.willTypeName}
            >
              <Button
                variant="primary"
              >
                Continue
              </Button>
            </Link>
          )
        }
      </Modal.Footer>
    </Modal>
  );
}
"""

when component loads, card-container-draft-will is selected by default. when user clicks on card-container-will-copy-upload, that element is selected. But when user clicks on card-container-draft-will again after clickin will-copy-upload, problem is when clicking continue button, Link is not naviating to the indented component/page. it is not moving to indented page.
please update the code. and make it correct.
but now when i click on card-container-draft-will element, COnitnue button not showing. please fix this bug.

#javascript

Form React

import React, { useState } from "react";
import "./style.css";

const App = () => {
  const initialState = {
    userName: "",
    fullName: "",
    age: "",
  };

  const [data, setData] = useState(initialState);
  const [display, setDisplay] = useState(false);

  const printValues = (e) => {
    e.preventDefault();
    setDisplay(true);
  };

  const updateField = (e) => {
    setData({
      ...data,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <>
      <form onSubmit={printValues}>
        <div>
          <label htmlFor="userName">
            User Name:
            <input
              value={data.userName || ""}
              name="userName"
              onChange={updateField}
            />
          </label>
        </div>
        <br />
        <div>
          <label htmlFor="fullName">
            Full-name:
            <input
              name="fullName"
              value={data.fullName || ""}
              onChange={updateField}
            />
          </label>
        </div>
        <br />
        <div>
          <label htmlFor="age">
            Age:
            <input name="age" value={data.age || ""} onChange={updateField} />
          </label>
        </div>
        <br />
        <button type="submit">Submit</button>
      </form>

      {display && (
        <>
          <h4>Request sent to DB with below request data</h4>
          <ul>
            <li>UserName: {data.userName.toUpperCase()}</li>
            <li>FullName: {data.fullName.toUpperCase()}</li>
            <li>Age: {data.age}</li>
          </ul>
        </>
      )}
    </>
  );
};

export default App;

#javascript

Get element parent

function getParent(element) {
  return element.parentNode;
}

var body = document.querySelector("body");
var bodyParent = getParent(body);

#javascript

Get all elements by xpath

function getAllElementsByXpath(xpath) {
  var results = [];
  var query = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  for (var i = 0, length = query.snapshotLength; i < length; ++i) {
    results.push(query.snapshotItem(i));
  }
  return results;
}

#javascript

Get a element by xpath

//Get a element by xpath
function getElementByXpath(path) {
  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
getElementByXpath("//*[@id='someId']/div[3]/div/div/div[1]/a[2]")

#javascript

To Do List Code

import React, { useState } from "react";

const App = () => {
  const [list, setList] = useState([]);
  const [input, setInput] = useState("");

  const handleSetInput = (e) => {
    setInput(e.target.value);
  };

  const addTodo = (todo) => {
    const newTodo = {
      id: Math.random(),
      todo: todo,
      completed: false,
    };

    setList([...list, newTodo]);

    setInput("");
  };

  const handleAddClick = () => {
    addTodo(input);
  };

  const handleToggleComplete = (id) => {
    setList((prevList) =>
      prevList.map((todo) => {
        if (todo.id === id) {
          return { ...todo, completed: !todo.completed };
        }
        return todo;
      })
    );
  };

  const handleDelete = (id) => {
    const filtered = list.filter((todo) => todo.id !== id);
    setList(filtered);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input type="text" value={input} onChange={handleSetInput} />
      <button onClick={handleAddClick}>Add</button>
      <ul>
        {list.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => handleToggleComplete(todo.id)}
            />
            <span
              style={{
                textDecoration: todo.completed ? "line-through" : "none",
              }}
            >
              {todo.todo}
            </span>
            {todo.completed && (
              <button onClick={() => handleDelete(todo.id)}>&times;</button>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

#javascript

phonenumber formatter client script

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }
    var ga = new GlideAjax('PhoneNumberFormatter');
    ga.addParam('sysparm_name', 'process');
    ga.addParam('sysparm_phoneNumber', newValue);
    ga.getXMLAnswer(checkPhoneNumber);

    function checkPhoneNumber(response) {
        var responseArr = response.split(',');
        //if phonenumber is invalid
        if (responseArr[0] == "NO_MATCH") {
            g_form.clearValue('phone_number');
            if (responseArr[1] != 'null')
                g_form.showFieldMsg('phone_number', getMessage('XXX not a valid phone number') + decodeURI(responseArr[1]), 'error'); //invalid number
            else
                g_form.showFieldMsg('phone_number', getMessage('XXX phone number no country code'), 'error'); //no country code provide
        }
        //For valid phonenumbers, set phoneumber with returned value and remove spaces for uniformity
        else {
            g_form.hideFieldMsg('phone_number');
            g_form.setValue('phone_number', decodeURI(responseArr[0]).replaceAll(" ", ""));
        }
    }

}

#javascript

ServiceBase

/**
 * Base data service that provide dataUtils and other default helper functions
 * @constructor
 * @type {XXXServiceBase}
 * @extends Base
 * @ignore
 */
var XXXServiceBase = Class.create();
XXXServiceBase.prototype = Object.extendsObject(XXXBase, /** @lends BACServiceBase.prototype */ {


    /** @member {string} */
    TABLE: '',

    /** @constant {String} */
    LOG_PROPERTY: 'base_script_include.log.level',

    /**
     * @return {XXXServiceBase}
     */
    initialize: function () {
        XXXBase.prototype.initialize.call(this);
        return this;
    },

    /**
     * Returns an empty initialized GlideRecord for the current table
     * @return {GlideRecord} return initialized GlideRecord
     */
    getEmptyRecord: function () {
        var gr = new GlideRecord(this.TABLE);
        gr.newRecord();
        return gr;
    },

    /**
     * @param {string} id
     * @returns {GlideRecord|null}
     */
    getGlideRecordByID: function (id) {
        var gr = new GlideRecord(this.TABLE);
        if (gr.get(id)) {
            return gr;
        }
        return null;
    },

    /**
     * @param {GlideRecord|GlideRecordSecure} grToValidate
     * @param {string} encodedQuery
     * @returns {string[]|null}
     */
    getSysIDArrayByCondition: function (grToValidate, encodedQuery) {
        var matchedGR = [];
        var grSource = this.getGlideRecordByEncodedQuery(encodedQuery);
        if (grSource) {
            while (grSource.next()) {
                // check if record fulfill conditions on interface record
                var hasMatch = GlideFilter.checkRecord(grToValidate, grSource.condition);
                if (hasMatch) {
                    gs.debug('Found match: ' + grSource.name);
                    matchedGR.push('' + grSource.sys_id);
                }
            }
            if (matchedGR.length > 0) {
                gs.debug('Found results');
                return matchedGR;
            }
            gs.debug('Nothing in matchedGR');
            return null;

        }
        gs.debug('No matches found for this GlideRecord.');
        return null;

    },

    /**
     * @param {string} key
     * @param {*} value
     * @returns {GlideRecord|GlideRecordSecure|null}
     */
    getGlideRecordByKeyValue: function (key, value) {
		this.logger.logDebug('result id ' + this.TABLE);
        var gr = new GlideRecord(this.TABLE);
        if (gr.get(key, value)) {
            return gr;
        }
        return null;

    },

    /**
     * @param {string} encodedQuery
     * @returns {number|null}
     */
    getCountAggregate: function (encodedQuery) {
        var gr = new GlideAggregate(this.TABLE);
        gr.addAggregate('COUNT');
        if (encodedQuery != '') {
            gr.addEncodedQuery(encodedQuery);
        }
        gr.query();
        if (gr.next()) {
            return gr.getAggregate('COUNT');
        }
        return null;


    },

    /**
     * @param {string} encodedQuery
     * @returns {GlideRecord|GlideRecordSecure|null}
     */
    getGlideRecordByEncodedQuery: function (encodedQuery) {
        var gr = new GlideRecord(this.TABLE);
        if (encodedQuery != '') {
            gr.addEncodedQuery(encodedQuery);
        }
        gr.query();
        if (gr.hasNext()) {
            return gr;
        }
        return null;

    },

    /**
     * @param {GlideRecord|GlideRecordSecure} recordGr
     * @param {string} parentField
     * @returns {boolean}
     */
    checkParentRecursion: function (recordGr, parentField) {
        var table = this.TABLE;
        var recursion = false;
        var parentId = recordGr.getValue(parentField);
        if (parentId == recordGr.getValue('sys_id')) {
            recursion = true;
        } else {
            checkRecursion(recordGr);
        }

        function checkRecursion(recordGr) {
            var childGr = new GlideRecord(table);
            childGr.addQuery(parentField, recordGr.getValue('sys_id'));
            childGr.query();
            while (childGr.next()) {
                if (childGr.getValue('sys_id') == parentId) {
                    recursion = true;
                    return;
                }

                checkRecursion(childGr);
            }
        }

        return recursion;
    },

    type: 'XXXServiceBase'
});

#javascript

Base script include

/**
 * XXXBase Script include
 * @constructor
 * @type {XXXBase}
 * @ignore
 */
var XXXBase = Class.create();
XXXBase.prototype = /** @lends XXXBase.prototype */{

    /** @member {DataUtils} */
    //  dataUtils: new DataUtils(),

    /** @member {QueryUtils} */
    //  queryUtils: new QueryUtils(),

    /** @member {DateTimeUtils} */
    //  dateTimeUtils: new DateTimeUtils(),

    /** @constant {String} */
    LOG_PROPERTY: 'base_script_include.log.level',

    initialize: function () {
        this.logger = new global.GSLog(this.LOG_PROPERTY, this.type);
        this.logger.includeTimestamp();
    },

    type: 'XXXBase'
};

#javascript #angular #rxjs

Angular/RxJS When should I unsubscribe from `Subscription` - Stack Overflow

import { Component, OnDestroy, OnInit } from '@angular/core';
// RxJs 6.x+ import paths
import { filter, startWith, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { BookService } from '../books.service';

@Component({
    selector: 'app-books',
    templateUrl: './books.component.html'
})
export class BooksComponent implements OnDestroy, OnInit {
    private ngUnsubscribe = new Subject<void>();

    constructor(private booksService: BookService) { }

    ngOnInit() {
        this.booksService.getBooks()
            .pipe(
               startWith([]),
               filter(books => books.length > 0),
               takeUntil(this.ngUnsubscribe)
            )
            .subscribe(books => console.log(books));

        this.booksService.getArchivedBooks()
            .pipe(takeUntil(this.ngUnsubscribe))
            .subscribe(archivedBooks => console.log(archivedBooks));
    }

    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }
}

#javascript

Weather App-Interview Question Solution

import React, { useState, useEffect } from "react";

import "./style.css";

function App() {
  const [data, setData] = useState({});
  const [unit, setUnit] = useState("fahrenheit");

  const fetchData = async (lat, lon) => {
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=ce309858c9580a2f86ac0e0f45374afb`;
    const response = await fetch(url);
    const result = await response.json();
    setData(result);
    console.log(result);
  };

  function myGeoLocator() {
    navigator.geolocation.getCurrentPosition((position) => {
      const lat = position.coords.latitude;
      const lon = position.coords.longitude;
      fetchData(lat, lon);
    });
  }

  const kelvinToFahrenheit = (temp) => {
    return (((temp - 273.15) * 9) / 5 + 32).toFixed(2);
  };

  const kelvinToCelsius = (temp) => {
    return (temp - 273.15).toFixed(2);
  };

  const handleUnitChange = () => {
    setUnit((prev) => (prev === "celsius" ? "fahrenheit" : "celsius"));
  };

  return (
    <div className="app">
      <div className="temperature">{data.name ? data.name : null}</div>

      <div className="temperature">
        {data.main ? (
          <>
            {" "}
            {unit === "celsius"
              ? kelvinToCelsius(data.main.temp)
              : kelvinToFahrenheit(data.main.temp)}
            {unit === "celsius" ? "°C" : "°F"}
          </>
        ) : null}
      </div>

      <button className="button" onClick={myGeoLocator}>
        Get Weather
      </button>

      <button className="button" onClick={handleUnitChange}>
        Celsius/Fahrenheit
      </button>
    </div>
  );
}

export default App;

#javascript

Stuck Weather APP

import React, { useState } from "react";

function App() {
  const [data, setData] = useState({});
  const [location, setLocation] = useState("");

  const url = `https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid=ce309858c9580a2f86ac0e0f45374afb`;

  const fetchData = async () => {
    const response = await fetch(url);
    const result = await response.json();
    setData(result);
    console.log(result);
  };

  const handleSearch = () => {
  };
  
  
  function myGeoLocater() {
    {
      navigator.geolocation.getCurrentPosition((position)=>{
        let lat = position.coords.latitude;
        let long = position.coords.longitude;
        fetchData();
      }
    }
  }


  const kelvinToFahrenheit = (temp) => {
    return (((temp - 273.15) * 9) / 5 + 32).toFixed(2);
  };

  return (
    <div className="app">
      <div className="temperature">{data.name ? data.name : null}</div>

      <div className="temperature">
        {data.main ? <>{kelvinToFahrenheit(data.main.temp)}</> : null}
      </div>

      <button className="button" onClick={handleSearch}>
        Get Weather
      </button>
    </div>
  );
}

export default App;

#javascript

MultiFilter with Multiple Criterias

@param -> items : Conjunto de datos a recorrer, este debe de ser un Array de Objetos.
@param -> filters : Conjunto de criterior y valores a buscar, el parametro debe de ser de tipo objeto dentro de la cual debe de haber objetos de tipo array, como se muestra en el ejemplo de las notas.
const multiFilter = (items, filters) => {
  const filterKeys = Object.keys(filters);
  return items.filter(item => {
    return filterKeys.every(key => {
      if (!filters[key].length) return true;
      if (Array.isArray(item[key])) {
        return item[key].some(keyEle => filters[key].includes(keyEle));
      }
      return filters[key].includes(item[key]);
    });
  });
};

#react.js #css #javascript

contact number prompt snippets

"""
<div className="col-md-6">
              <label
                htmlFor="companyContactNumber"
                className="form-label w-100 company-contact-number-label"
              >
                Company Contact Number*
              </label>
              <div className="d-flex">
                {/* autocomlete field for isdcodelist */}
                <Autocomplete
                  ref={autocompleteRef}
                  disablePortal
                  id="isdcodelist"
                  options={isdCodesList}
                  isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      {...register('isdCode', {
                        required: true,
                      })}
                      className="isd-code-input"
                      placeholder="+971"
                    />
                  )}
                  renderOption={(props, option) => (
                    <span
                      className="phone-number-option"
                      {...props}
                    >
                      {option.countryName}
                    </span>
                  )}
                            // onchange event handler to set the isdCode state
                  onChange={(e, value: any) => setIsdCode(
                    value?.label,
                  )}
                />
                {/* handle errors */}
                {formErrors.isdCode && (
                <span className="error-message">{formErrors.isdCode}</span>
                )}
                {/* company contact input */}
                <input
                  type="text"
                  className="form-control company-contact-number-input"
                  id="companyContactNumber"
                  placeholder="XXXXXXXXXXXXXX"
                  onInput={(e) => {
                    const input = e.target as HTMLInputElement;
                    input.value = input.value.slice(0, 15).replace(/[^0-9 ]/g, ''); // Limit the input to 15 characters and Allow only digits and spaces
                    setCompanyContactNumber(input.value);
                  }}
                  {...register('companyContactNumber', {
                    required: true,
                  })}
                />
                {/* handle errors */}
                {formErrors.companyContactNumber && (
                <span className="error-message">{formErrors.companyContactNumber}</span>
                )}
              </div>
</div>
"""

consider you are react developer.
client wants to achieve below changes in the form.

1. You have to display isdCode error below that particular autocomplete field. currently it is shown right to the field. Show it under field.

2. You have to display company contact number error below that particular field. currently it is shown right to the field. Show it under field.

3. make appropriate changes in the code and return the code.

#react.js #css #javascript

RESIDENT YES OR NO OPTIONS PROMPT

""" 
<div className="row form-row mb-4 align-items-center">
            <div className="col-md-6">
              <label
                htmlFor="resident"
                className="form-label w-100 resident-label"
              >
                Are you a Resident of the UAE?
              </label>
            </div>
            <div className="col-md-6 d-flex justify-content-between align-items-center">
              <OptionButtons
                options={residentOrNotOptions}
                selectedOption={resident}
                onOptionSelected={handleResidentOptionSelect}
              />
            </div>
          </div>

          {/* row with columns for emirates id */}
          <div className="row form-row mb-5">
            {/* Emirates ID Col */}
            <div className="col-md-6">
              <label
                htmlFor="emiratesId"
                className="form-label w-100 emirates-id-label"
              >
                Emirates ID*
              </label>
              <input
                type="text"
                className="form-control emirates-id-input"
                id="emiratesId"
                placeholder="XXXX XXXX XXXX"
                defaultValue={userData.emiratesID}
                maxLength={15}
                onChange={(e) => setEmiratesID(e.target.value)}
                onInput={(e) => {
                  const input = e.target as HTMLInputElement;
                  input.value = input.value.replace(/\D/g, '');
                  setEmiratesID(input.value);
                }}
                {...register('emiratesID', {
                  required: true,
                })}
              />

              {/* handle errors */}
              {/* {formErrors.emiratesID && (
              <span className="error-message">{formErrors.emiratesID}</span>
              )} */}
            </div>
            {/* passport expiry date col */}
            <div className="col-md-6">
              <label
                htmlFor="emiratesIdExpiryDate"
                className="form-label w-100 emiratesId-expiry-date-label"
              >
                Emirates ID Expiry Date*
              </label>
              {/* Date Picker to handle emirates id expiry */}
              <DatePicker
                onChange={handleEmiratesExpiryDatePicker}
                value={emiratesIDExpiryDate}
                minDate={new Date().toISOString().split('T')[0].split('-').join('/')}
                renderInput={(params: any) => (
                  <TextField
                    {...params}
                    inputProps={{
                      ...params.inputProps,
                      // readonly
                      readOnly: true,
                      placeholder: 'Choose Date',
                    }}
                    {...register('emiratesIDExpiryDate', {
                      required: true,
                    })}
                    className="date-picker date-picker-input"
                  />
                )}
                className="date-picker-field"
              />
              {/* handle errors */}
              {formErrors.emiratesIDExpiryDate && (
              <span className="error-message">{formErrors.emiratesIDExpiryDate}</span>
              )}
            </div>
          </div>

"""

You are an experienced react developer.
Client want some changes in form. Details were given in below bullet points:

1. When the value of resident props of OptionButtons is No, emiratesid and emirates expiry date datepicker should be disabled.
Ie user should  not be able to input or select any data in both fields.
2. if the value is Yes, both emiratesid and emirates expiry date datepicker are enabled. 
3. Initialy when component is loaded, both were enabled.
4. It is disable only when user choose resident as No, else both the inputs were enabled.

please update the code as per my above requirements.

#javascript #html

Inline JavaScript for Bpdelivery.net

<p><script>
    var video1 = document.getElementById("thebpresident");
    video1.style.opacity = 1;
    video1.addEventListener("loadedmetadata", function() {
setTimeout(function() {        video1.play();<br />
      }, 1000);
    });
   slidein.className = "slidein";
});
setTimeout(function() {
video1.style.display = "block";
  }, 4000);
});
var video2 = document.getElementById("majorcities");
setTimeout(function() {
video2.style.display = "block";
video2.className = "wp-block-video MajorCities video2";
        video2.addEventListener("animationend", function() {
          video2.style.opacity = 1;
          video2.addEventListener("loadedmetadata", function() {
            setTimeout(function() {
              video2.play();
            }, 4000);
          });
        });
      }, 156000);
    });
  });  document.addEventListener("DOMContentLoaded", function() {
    var videos = document.getElementsByClassName("onPause");
    for (var i = 0; i < videos.length; i++) {
      var video = videos[i];
      video.addEventListener("click", function() {
        if (this.paused) {
          this.play();
        } else {
          this.pause();
        }
      });
    }
  });
</script></p>

#javascript

Weather App 1

import React, { useEffect, useState } from "react";
import axios from "axios";

function App() {
  const [data, setData] = useState({});
  const [location, setLocation] = useState("");
  const [showResults, setShowResults] = useState(false);

  const url = `https://api.openweathermap.org/data/2.5/weather?q=${location}&units=imperial&appid=80e8dda85f86ac0d7028efe74f5b553e`;

  const fetchData = async () => {
    const response = await axios.get(url);
    setData(response.data);
    console.log(response.data);
    setShowResults(true);
    setTimeout(() => {
      setShowResults(false);
      setLocation("");
    }, 3000);
  };

  const handleSearch = () => {
    fetchData();
  };

  const handleLocationChange = (event) => {
    setLocation(event.target.value);
  };

  const handleKeyPress = (event) => {
    if (event.key === "Enter") {
      handleSearch();
    }
  };

  return (
    <div className="app">
      <div className="search">
        <input
          type="text"
          value={location}
          onChange={handleLocationChange}
          onKeyDown={handleKeyPress}
          placeholder="EnterLocation"
        />
        <button onClick={handleSearch}>Search</button>
      </div>

      {showResults && (
        <div className="top">
          <div className="temp">
            {data.main ? <h1>{data.main.temp.toFixed()}°F</h1> : null}
          </div>
        </div>
      )}
    </div>
  );
}

export default App;

// CSS 


.app {
  max-width: 400px;
  margin: 3rem auto;
  padding: 20px;
}

.search {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

input[type="text"] {
  width: 200px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-right: 10px;
}

button {
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

#react.js #css #javascript

Repopulate form fields after Back button click

To populate the form fields of the previous step when the "Back" button is clicked, you can store the form data in the parent component and pass it as props to the child components. Here's an updated example:

UserOnBoardingMain component:

```jsx
import React, { useState } from 'react';
import UserRegistrationForm from './UserRegistrationForm';
import UserRegistrationFormAddressInfo from './UserRegistrationFormAddressInfo';
import UserRegistrationFormCompanyInfo from './UserRegistrationFormCompanyInfo';

const UserOnBoardingMain = () => {
  const [step, setStep] = useState(1);
  const [userData, setUserData] = useState({});

  const handleNextStep = (data) => {
    setUserData((prevData) => ({ ...prevData, ...data }));
    setStep((prevStep) => prevStep + 1);
  };

  const handleBackStep = () => {
    setStep((prevStep) => prevStep - 1);
  };

  return (
    <>
      {step === 1 && (
        <UserRegistrationForm onNextStep={handleNextStep} userData={userData} />
      )}
      {step === 2 && (
        <UserRegistrationFormAddressInfo
          onNextStep={handleNextStep}
          onBackStep={handleBackStep}
          userData={userData}
        />
      )}
      {step === 3 && (
        <UserRegistrationFormCompanyInfo
          onNextStep={handleNextStep}
          onBackStep={handleBackStep}
          userData={userData}
        />
      )}
    </>
  );
};

export default UserOnBoardingMain;
```

UserRegistrationForm component:

```jsx
import React from 'react';
import { useForm } from 'react-hook-form';

const UserRegistrationForm = ({ onNextStep, userData }) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => {
    onNextStep(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Form fields */}
      <input {...register('fieldName')} defaultValue={userData.fieldName} />
      {/* Other form fields */}
      <button type="submit">Next</button>
    </form>
  );
};

export default UserRegistrationForm;
```

UserRegistrationFormAddressInfo and UserRegistrationFormCompanyInfo components would have similar implementations.

In the above code, the `userData` state is updated whenever the `handleNextStep` function is called, which is triggered when the "Next" button is clicked in each form step. The `userData` is then passed as props to the child components. When the "Back" button is clicked, the `handleBackStep` function is called, which reduces the `step` value by 1, allowing you to navigate back to the previous step.

By providing the `defaultValue` prop to each form field in the `UserRegistrationForm` component, the fields will be populated with the corresponding values from the `userData` object. This way, when you navigate back to the previous step, the form fields will be prepopulated with the previously entered values.

Make sure to adjust the form field names and structure according to your specific requirements.

#react.js #css #javascript

CREATE GOOGLE MAPS API - STEPS

To create a Google Maps API, follow these steps:

1. Go to the Google Cloud Console: https://console.cloud.google.com.
2. Sign in with your Google account or create a new account if you don't have one.
3. Create a new project by clicking on the project dropdown at the top of the page and selecting "New Project." Enter a name for your project and click "Create."
4. Once your project is created, you will be redirected to the project dashboard.
5. Enable the Google Maps JavaScript API:
- Click on the menu icon (☰) in the upper-left corner of the Cloud Console.
- In the sidebar, click on "APIs & Services" > "Library."
- Search for "Google Maps JavaScript API" and select it from the results.
- Click on the "Enable" button.
6. Set up API credentials:
- Click on the menu icon (☰) in the upper-left corner of the Cloud Console.
- In the sidebar, click on "APIs & Services" > "Credentials."
- Click on the "Create credentials" button and select "API key."
- Copy the generated API key.
7. Restrict your API key (optional, but recommended for security):
- On the credentials page, click on the API key you created.
- Under "Key restriction," select the option that best fits your use case (e.g., HTTP referrers, IP addresses).
- Configure the allowed referrers or IP addresses as needed.
8. Use your API key in your code:
- Replace `YOUR_API_KEY` in your code with the API key obtained in the previous step.

Make sure to follow any additional usage limits and terms of service specified by Google. It's also important to secure and protect your API key to prevent unauthorized usage.

Please note that creating and using the Google Maps API may involve costs depending on your usage and the services used. Refer to the Google Cloud Console for pricing information and billing details.

#react.js #css #javascript

Google Maps JavaScript API error

Error:
Google Maps JavaScript API error: ApiNotActivatedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error

https://www.youtube.com/watch?v=n1UorU1PALk&t=47s

The "ApiNotActivatedMapError" error typically occurs when the Google Maps JavaScript API is not activated or enabled for your project. Here are some steps you can follow to resolve this error:

1. Go to the Google Cloud Console (https://console.cloud.google.com).
2. Select your project or create a new project if needed.
3. Make sure you have a billing account associated with your project. The Google Maps JavaScript API requires a billing account to be set up.
4. Enable the Google Maps JavaScript API for your project. You can do this by following these steps:
- Click on the menu icon (☰) in the upper-left corner of the Cloud Console.
- In the sidebar, click on "APIs & Services" > "Library".
- Search for "Google Maps JavaScript API" and select it from the results.
- Click on the "Enable" button.
5. Set up the required API credentials. You need to create an API key and configure it to be used in your code.
- Click on the menu icon (☰) in the upper-left corner of the Cloud Console.
- In the sidebar, click on "APIs & Services" > "Credentials".
- Click on the "Create credentials" button and select "API key".
- Copy the generated API key.
6. Update your code with the API key.
- Replace `GOOGLE_MAPS_API_KEY` in your code with the API key obtained in the previous step.

After completing these steps, the Google Maps JavaScript API should be activated and the "ApiNotActivatedMapError" should no longer occur.

#react.js #css #javascript

Sick Leave Aplplication Bard

Sure, here is an email you can send to your HR:

Subject: Sick Leave Request

Dear Sony R,

I am writing to request a sick leave for today, June 28, 2023, due to fever and cold. I woke up this morning with a fever of 102 degrees Fahrenheit and a sore throat. I have also been feeling congested and have a runny nose.

I have already made an appointment with my doctor and will be going to see them later today. I will keep you updated on my condition and let you know when I expect to be back in the office.

In the meantime, I have already informed my team of my absence and have asked [colleague's name] to cover my workload.

I apologize for any inconvenience this may cause.

Thank you for your understanding.

Sincerely,

Jissmon Jose
Software Developer
8921762662

#javascript

this code is used to control when the modal pop-up appears

setTimeout(function(){
    modal.style.display = 'inline'
}, 1500)

#react.js #css #javascript

Mobile Number Field Validation

  const handleMobileNumberValidation = (phone: string) => {
    // const mobileNumberRegex = /^[+0-9\s]*$/;
    // const mobileNumberRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
    const mobileNumberRegex = /^(?:[0-9] ?){6,14}[0-9]$/;
    return mobileNumberRegex.test(phone);
  };


    if (primaryMobileNumber.trim() !== '') {
      if (!handleMobileNumberValidation(primaryMobileNumber)) {
        errors.primaryMobileNumber = 'Invalid mobile number';
      }
    }


    <div className="col-md-6">
              <label htmlFor="mobile" className="form-label w-100 mobile-label">
                Primary Mobile Number*
              </label>
              <div className="d-flex">
                {/* autocomlete field for isdcodelist */}
                <Autocomplete
                  disablePortal
                  id="isdcodelist"
                  options={isdCodesList}
                  isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      {...register('isdCode', {
                        required: true,
                      })}
                      className="isd-code-input"
                      placeholder="+971"
                    />
                  )}
                  renderOption={(props, option) => (
                    <span
                      className="phone-number-option"
                      {...props}
                    >
                      {option.countryName}
                    </span>
                  )}
                            // onchange event handler to set the isdCode state
                  onChange={(e, value: any) => setIsdCode(
                    value?.label,
                  )}
                />
                <input
                  type="text"
                  className="form-control mobile-input"
                  id="mobile"
                  placeholder="XXX XXX XXXX"
                // onchange
                  onChange={(e) => setPrimaryMobileNumber(e.target.value)}
                  {...register('primaryMobileNumber', {
                    required: true,
                  })}
                />
              </div>
              {/* handle errors */}
              {formErrors.primaryMobileNumber && (
              <span className="error-message">{formErrors.primaryMobileNumber}</span>
              )}
            </div>

#react.js #css #javascript

Email Field Validation

const [formErrors, setFormErrors] = useState<UserRegistrationDetails>({
    firstName: '',
    lastName: '',
    gender: '',
    dateOfBirth: '',
    primaryEmail: '',
    secondaryEmail: '',
    primaryMobileNumber: '',
    secondaryMobileNumber: '',
    service: '',
  });

  const validateEmail = (email: string) => {
    const emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
    return emailRegex.test(email);
  };

 const handleUserRegistrationForm = () => {
   
  const handleEmptyField = (fieldName: string, fieldValue: string, errorMessage: string) => {
      if (!fieldValue) {
        errors[fieldName] = errorMessage;
      }
    };

    handleEmptyField('firstName', firstName, 'First name is required');
    handleEmptyField('lastName', lastName, 'Last name is required');
    handleEmptyField('primaryEmail', primaryEmail, 'Primary email is required');
    handleEmptyField('primaryMobileNumber', primaryMobileNumber, 'Primary mobile number is required');
    handleEmptyField('dateOfBirth', dateOfBirth, 'Date of birth is required');

    if (primaryEmail.trim() !== '') {
      if (!validateEmail(primaryEmail)) {
        errors.primaryEmail = 'Invalid email';
      }
    }

    setFormErrors(errors);

 }
 
<input
                type="email"
                className="form-control email-input"
                id="email"
                placeholder="abc@babc.com"
                // onchange
                onChange={(e) => setPrimaryEmail(e.target.value)}
                {...register('primaryEmail', {
                  required: true,
                })}
              />

#react.js #css #javascript

DatePicker Field Validation

<DatePicker
                onChange={handleDatePicker}
                value={dateOfBirth}
                disableFuture
                maxDate={subYears(new Date(), 21)}
                renderInput={(params: any) => (
                  <TextField
                    {...params}
                    inputProps={{
                      ...params.inputProps,
                      readOnly: true,
                      placeholder: 'Select Date of Birth',
                    }}
                    {...register('dateOfBirth', {
                      required: true,
                      validate: {
                        ageVerification: (dateString) => {
                          const date = new Date(dateString);
                          return isAfter(subYears(new Date(), 21), date);
                        },
                      },
                    })}
                    className="date-picker date-picker-input"
                  />
                )}
                className="date-picker-field"
              />

#react.js #css #javascript

Input Field validation to Restrict characters other than Alphabets and Spaces

<input
  type="text"
  className="form-control firstname-input"
  id="firstname"
  placeholder="John"
  onInput={(e) => {
    const input = e.target as HTMLInputElement;
    input.value = input.value.replace(/[^a-zA-Z ]/g, '');
    setFirstName(input.value);
  }}
  {...register('firstName', {
    required: true,
  })}
/>

#react.js #css #javascript

Only Allow Alphabetic Characters and Spaces For Input Field

<input
  type="text"
  className="form-control firstname-input"
  id="firstname"
  placeholder="John"
  onInput={(e) => {
    const input = e.target as HTMLInputElement;
    input.value = input.value.replace(/[^a-zA-Z ]/g, '');
    setFirstName(input.value);
  }}
  {...register('firstName', {
    required: true,
  })}
/>

#javascript

Spread Syntax

//Combining arrays
const obj1 = 
{
  name: 'A',
  age: 25
},
{
  name: 'B',
  age: 25
};

const obj2 = 
{
  name: 'C',
  age: 25
};

const total = [...obj1, ...obj2];

// getting elements from array
const [a, b] = total;
//console.log: a = first element from total

#javascript

Return specific attribute from array using map

const numbers = array.map(function (n)) {
  return n.name;
}

#javascript

Loops in Javascript

const arr = ["1", "2", "3"];

for(let cont of arr) {
  console.log(cont);
}


const arr = [
  {
    name: '1',
    agr: 2
  },
  {
    name: '1',
    agr: 2
  }
];

for(let cont of arr) {
  console.log(cont.name);
}

#javascript

Get all keys/values from an object

const obj = {
  name: 'Test',
  age: '99'
};

console.log(Object.keys(obj));
//console: ["name", "age"]

console.log(Object.values(obj));
//console: ["Test", "99"]

#javascript

How to change indexes keys an array of object in JavaScript - Stack Overflow

const names = [{name:'abc'},{name:'def'},{name:'ghi'}];
const entries = Object.fromEntries(names.entries());
const mappedNames = Object.keys(entries).map(key => [`string${key}`, entries[key]])

const newNames = Object.fromEntries(mappedNames)

#javascript

javascript - Vue.js random color appended to user list everytime page is (re)loaded - Stack Overflow

data(){
return {
      colors: [
        "red",
        "blue",
        "green",
        "indigo",
        "purple",
        "teal",
        "orange",
        "brown",
        "deep-orange",
        "blue-grey",
        "cyan"
      ],
      currentColor: ""
    }
},

 methods: {
    randomColors() {
      this.currentColor = 
        this.colors[Math.floor(Math.random() * this.colors.length)];
    },
  }

#javascript

Cypress unit testing solution

import Autocomplete from './autocomplete';
import countries from '../data/countries';

describe('Test the autocomplete functionality', () => {
  beforeEach(() => {
    cy.mount(<Autocomplete countries={countries} />);
  })

  it('check everything is working in ui', () => {
    cy.get('[data-cy="heading"]').contains('Search your country:');
    cy.get('input[type="text"]').should('have.value', '');
    cy.get('[data-cy="suggestion-list"]').should('not.exist');
  })

  it('check filter is working', () => {
    cy.get('input[type="text"]').type('no');
    cy.get('[data-cy="suggestion-list"]').should('be.visible').as('suggestList');
    cy.get('@suggestList').should('have.length', 1);
  })


  it('check selections are working', () => {
    cy.get('input[type="text"]').as('inputText');
    cy.get('@inputText').type('no').type(Cypress._.repeat('{downArrow}{downArrow}', 1));
    cy.get('[data-cy="suggestion-list"] li:nth-child(3)').should('have.class', 'active');
    cy.get('@inputText').type(Cypress._.repeat('{upArrow}', 1));
    cy.get('[data-cy="suggestion-list"] li:nth-child(2)').should('have.class', 'active');
    cy.get('[data-cy="suggestion-list"] li:nth-child(2)').click();
    cy.get('input[type="text"]').should('have.length', 1);
    cy.get('[data-cy="suggestion-list"]').should('not.exist');
  })

})

#javascript #redux #rtk

Refresh token with Redux Toolkit Query - Stack Overflow

import { fetchBaseQuery } from '@reduxjs/toolkit/query'
import { tokenReceived, loggedOut } from './authSlice'

const baseQuery = fetchBaseQuery({ baseUrl: '/' })
const baseQueryWithReauth = async (args, api, extraOptions) => {
  let result = await baseQuery(args, api, extraOptions)
  if (result.error && result.error.status === 401) {
    // try to get a new token
    const refreshResult = await baseQuery('/refreshToken', api, extraOptions)
    if (refreshResult.data) {
      // store the new token
      api.dispatch(tokenReceived(refreshResult.data))
      // retry the initial query
      result = await baseQuery(args, api, extraOptions)
    } else {
      api.dispatch(loggedOut())
    }
  }
  return result
}

#html #css #javascript

Editing How I Added My Resume to My Website – Medium

<!doctype html>

  <head>
    <!-- CSS CODE -->
   <style>
    #pdf_renderer {
      display: block;
      margin: 0 auto;
    }
    </style>
  
  </head>
<body>
     <div id="my_pdf_viewer">
        <div id="canvas_container">
            <canvas id="pdf_renderer"></canvas>
        </div>

        <center>
            <div id="navigation_controls">
                <button id="go_previous">Previous</button>
                <input id="current_page" value="1" type="number"/>
                <button id="go_next">Next</button>
            </div>

            <a href="Resume_14.docx.pdf" download="Resume_14.docx.pdf">
            Download PDF</a>
        </center>
    </div>
    <script>
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        }
     
        pdfjsLib.getDocument('./Resume_14.docx.pdf').then((pdf) => {
            myState.pdf = pdf;
            render();
        });

        function render() {
            myState.pdf.getPage(myState.currentPage).then((page) => {
         
                var canvas = document.getElementById("pdf_renderer");
                var ctx = canvas.getContext('2d');
     
                var viewport = page.getViewport(myState.zoom);
                canvas.width = viewport.width;
                canvas.height = viewport.height;
         
                page.render({
                    canvasContext: ctx,
                    viewport: viewport
                });
            });
        }

        document.getElementById('go_previous').addEventListener('click', (e) =>
        {
          if(myState.pdf == null || myState.currentPage == 1) 
            return;
          myState.currentPage -= 1;
          document.getElementById("current_page").value = myState.currentPage;
          render();
        });
        document.getElementById('go_next').addEventListener('click', (e) => {
          if(myState.pdf == null || myState.currentPage > myState.pdf._pdfInfo.numPages) 
             return;
          myState.currentPage += 1;
          document.getElementById("current_page").value = myState.currentPage;
          render();
        });
        document.getElementById('current_page').addEventListener('keypress', (e) => {
          if(myState.pdf == null) return;
         
          // Get key code 
          var code = (e.keyCode ? e.keyCode : e.which);
         
          // If key code matches that of the Enter key 
          if(code == 13) {
            var desiredPage = document.getElementById('current_page').valueAsNumber;
                                 
            if(desiredPage >= 1 && desiredPage <= myState.pdf._pdfInfo.numPages) {
                myState.currentPage = desiredPage;
                document.getElementById("current_page").value = desiredPage;
                render();
            }
           }
        });

    </script>
  </body>
</html>
HTML, XML

#html5 #javascript

Código html para mostrar la fecha

<div id="fecha"></div>

<script src="js/fecha.js"></script>

#html5 #javascript

Función javascript que obtiene y muestra la fecha actual

function fetxa() {
    const diasSemana = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
    const meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Júnio", "Júlio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
    var fexa = new Date();
    var hoy = diasSemana[fexa.getUTCDay()];
    var dia = fexa.getUTCDate();
    var mes = meses[fexa.getUTCMonth()];
    var any = fexa.getUTCFullYear();

    document.getElementById("fecha").innerHTML = `<span>${hoy} ${dia}, del mes de ${mes} del ${any}</span>`;
    
}

#html #css #javascript #html5

link del cdn cdnfonts.com para conseguir la tipografía DS-Digital

<link href="https://fonts.cdnfonts.com/css/ds-digital" rel="stylesheet">

#html #css #javascript #html5

Código javascript para crear un reloj digital formato 24h sombra-1

function digital() {
    let laHora = new Date();

    let horas = laHora.getHours();

    if (horas < 10) {
        horas = "0" + horas;
    }


    let minutos = laHora.getMinutes();

    if (minutos < 10) {
        minutos = "0" + minutos;
    }


    let segundos = laHora.getSeconds();

    if (segundos < 10) {
        segundos = "0" + segundos;
    }


    const reloj = `<aside id="relojillo"><h1>${horas} : </h1> <h2>${minutos}</h2><sup><h3> : ${segundos}</h3></sup></aside>`;

    const salida = document.getElementById("elReloj").innerHTML = reloj;

    setTimeout(digital, 1000);


    return salida;
}
digital();

#html #css #javascript #html5

Código html necesario para insertar el reloj digital sombra-1

<body>
    <aside id="elReloj"></aside>
    <script src="js/digital02.js"></script>
</body>

#html #css #javascript #html5

Código css para un estilo general del reloj digital sombra-1

  <style>
      * {
          box-sizing: border-box;
      }
      
      @font-face {
          font-family: 'ds-digital';
          src: url('./ds_digital/DS-DIGII.TTF');
      }
      body {
          
      }
      #relojillo {
          width: fit-content;
          height: auto;
          position: relative;
          background-image: linear-gradient(232deg, #888, #888, #888);
          margin: auto auto;
          text-align: center;
          background-color: transparent;
          padding: 10% 10%;
      }
      
      #relojillo h1,
      #relojillo h2,
      #relojillo h3 {
          display: inline-block;
          font-family: 'ds-digital';
          font-size: 43pt;
          text-shadow: 0vw -3vw .1vw #999, -.3vw 4vw .1vw #f0f8ff;
          color: khaki;
          padding: 0vw .2vw;
      }
      #relojillo h3 {
          font-size: 21pt !important;
          text-shadow: 0vw -3vw .1vw orange, -.3vw 4vw .1vw orange;
      }
  </style>

#react.js #css #javascript

DEBUGGING PROBLEMS - PROMPTS - CRIO.DO

"""
Problem Description
Given a number N, you have to find the largest Fibonacci number which is less than N.

Input Format
First line contains an integer T - Number of test cases.

Next T lines each have a given number N

Output Format
Print the answer for each test case in a separate line.

Sample Input 1
2

6

13

Sample Output 1
5

8

Explanation 1
In the first test case the largest Fibonacci number less than 6 is 5.

In the second test case the largest Fibonacci number less than 13 is 8 (the next Fibonacci number after 8 is 13 which is equal to the number N i.e. 13)

Constraints
T <= 10^4

0 < N <= 10^9
"""

Please help me to debug the below code based on details given above and return the updated full version of code.

"""
'use strict';

process.stdin.resume();
process.stdin.setEncoding('utf-8');

let inputString = '';
let currentLine = 0;

process.stdin.on('data', inputStdin => {
    inputString += inputStdin;
});

process.stdin.on('end', _ => {
    inputString = inputString.trim().split('\n').map(string => {
        return string.replace(/\s+/g, " ").trim();
    });
    main();
});

function readLine() {
    return inputString[currentLine++];
}

function readIntArr() {
    let str = readLine();
    str = str.split(" ");
    let arr = [];
    for ( let i = 0; i < str.length; i++ ) {
        arr.push(parseInt(str[i], 10));
    }
    return arr;
}

function print(x) {
    process.stdout.write(x + "");
}

function largestFibonacciNumber(n) {
    let a = 0;
    let b = 1;
    while (b <= n)
    {
        a = b;
        b = a + b;
    }
    return a;
}

function main() {
    let t=parseInt(readLine(),10);
    while(t--){
    let n=parseInt(readLine(),10)

    let result=largestFibonacciNumber(n);
    console.log(result);
    }
}
"""

#javascript

Mutation

let model = new models.Model<Post>({
    name: 'posts',
    sync: getPost(123),
    streams: [postEvents, commentEvents],
});

// define mutation functions
function updatePost(post: Post) {
    return async function() {
        await fetch(`/posts/${post.id}`, {
            method: "PUT",
            body: JSON.stringify(post),
        });
    }
}
// register the mutations on the model
model.NewMutation(updatePost, {
    name: 'updatePost',
    stream: 'post',
    optimistic: function(post) {
        return post;
    }
});

#javascript

Subscribe

model.subscribe('loading', loading => ...);
model.subscribe('update', data => ...);
model.subscribe('error', err => ...);
model.subscribe((loading, data, err) => ...);

#javascript

Update functions

// update a post by replacing the old value with the new
model.on('post', 'update', (state: Post, event: PostEvent) => event);

// the like event increments the like counter on the post
model.on('post', 'like', (state: Post) => {
	state.likes++;
	return state;
});

// the add comment event adds a new comment to the post
model.on('comments', 'add', (state: Post, event: CommentEvent) => {
	state.comments.push(event);
	return state;
});

#javascript

Event streams

let postEvents = new models.EventStream<PostEvent>({
	name: 'post',
	channel: 'posts',
	filter: 'id == `123`',
});

let commentEvents = new models.EventStream<CommentEvent>({
	name: 'comment',
	channel: 'comments',
	filter: 'post_id == `123`',
	orderingKey: 'id',
});

#javascript

define the Post model as required by the client application

// define the Post model as required by the client application
interface Post {
	id: number,
	title: string,
	comments: Array<string>,
}

// create a live, observable data model for post 123
let model = new models.Model<Post>({
    	name: 'posts',
    	sync: getPost(123),
streams: [postEvents, commentEvents],
});

#react.js #css #javascript

Auto Update height of image in sync with main container element - Chatgpt PROMPT & Solutions


"""
<main className="main-container">
      <section className="image-section">
        <div className="image-container">
          <img
            src={WelcomeImageUserOnBoarding}
            alt="Welcome User On Boarding Image"
            sizes=""
          />
          <div className="image-overlay">
            <h2 className="image-title">Welcome</h2>
            <p className="image-content">The DIFC Courts is an independent common law judiciary based in the Dubai International Financial Centre (DIFC) with jurisdiction governing civil and commercial disputes.</p>
          </div>
        </div>
      </section>
      <section className="registration-section">
        <Typography className="question" sx={{ mt: 2, mb: 1 }}>
          Register Now
        </Typography>
        <Typography className="question-helper">
          Enter Below Details to Continue
        </Typography>
        <div className="button-wrapper">
          <button
            type="button"
          >
            <img
              src={FingerPrintIcon}
              className="finger-print-icon"
              alt="Finger Print Icon"
              sizes=""
            />
            Signup with UAE Pass

          </button>
        </div>
        <Typography
          className="question-helper sub-text"
          sx={{ mt: 3 }}
        >
          Or Enter Details Below
        </Typography>
        <form className="form mt-3">
          <div className="row form-row mb-4">
            {/* FirstName Col */}
            <div className="col-md-6">
              <label
                htmlFor="firstname"
                className="form-label w-100 firstname-label"
              >
                FirstName*
              </label>
              <input
                type="text"
                className="form-control firstname-input"
                id="firstname"
                placeholder="John"
              />
            </div>
            {/* LastName Col */}
            <div className="col-md-6">
              <label
                htmlFor="lastname"
                className="form-label w-100 lastname-label"
              >
                LastName*
              </label>
              <input
                type="text"
                className="form-control lastname-input"
                id="lastname"
                placeholder="Doe"
              />
            </div>
          </div>
          <div className="row form-row mb-4">
            {/* gender selection buttons */}
            <div className="col-md-6">
              <label
                htmlFor="gender"
                className="form-label w-100 gender-label"
              >
                Gender
              </label>
              <OptionButtons />
            </div>
            {/* Date of Birth Col */}
            <div className="col-md-6">
              <label
                htmlFor="dob"
                className="form-label w-100 dob-label"
              >
                Date of Birth*
              </label>
              <DatePicker
                onChange={handleDatePicker}
                value={dateOfBirth}
                renderInput={(params: any) => (
                  <TextField
                    {...params}
                    inputProps={{
                      ...params.inputProps,
                      placeholder: 'Select Date of Birth',
                    }}
                    // {...register('dateOfBirth', {
                    //   required: true,
                    // })}
                    className="date-picker date-picker-input"
                  />
                )}
                className="date-picker-field"
              />
            </div>
          </div>
          <div className="row form-row mb-2">
            {/* Email Col */}
            <div className="col-md-6">
              <label
                htmlFor="email"
                className="form-label w-100 email-label"
              >
                Primary Email*
              </label>
              <input
                type="email"
                className="form-control email-input"
                id="email"
                placeholder="abc@babc.com"
              />
            </div>
            {/* Mobile Number Col */}
            <div className="col-md-6">
              <label
                htmlFor="mobile"
                className="form-label w-100 mobile-label"
              >
                Primary Mobile Number*
              </label>
              <input
                type="text"
                className="form-control mobile-input"
                id="mobile"
                placeholder="+971 50 123 4567"
              />
            </div>
          </div>
          <div className="row form-row mb-4">
            {/* Secondary Email Col */}
            <div className="col-md-6">
              <div className="secondary-email">
                <span>
                  Add Secondary Email
                </span>
                {/* increase the size of below AiOutlinePlusCircle icon */}
                <AiOutlinePlusCircle
                  className="secondary-email-icon"
                  // increase the size
                  size={30}
                />
              </div>
            </div>
            {/* Secondary Mobile Number Col */}
            <div className="col-md-6">
              <div className="secondary-mobile">
                <span>
                  Add Secondary Mobile
                </span>
                <AiOutlinePlusCircle
                  className="secondary-mobile-icon"
                  // increase the size
                  size={30}
                />
              </div>
            </div>
          </div>

          {/* Select Services from dropdown list */}
          <div className="row form-row mb-4">
            <div className="col-md-12">
              <label
                htmlFor="services"
                className="form-label w-100 services-label"
              >
                How did you know about this service?
              </label>
              {/* add autocomplete to select */}
              <Autocomplete
                disablePortal
                id="combo-box-demo"
                options={services}
                isOptionEqualToValue={(option, value) => option.label === value.label}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    placeholder="Social Media - LinkedIn / Twitter / Instagram"
                    className="services-input"
                  />
                )}
              />
            </div>
          </div>

          {/* add new row */}
          <div className="row form-row mb-4">
            <div className="col-md-4">
              {/* add a next step button that follows default styles */}
              <button
                type="button"
                className="next-step-button"
              >
                Next
              </button>
            </div>
          </div>

          {/* add new row below */}
          <div className="row form-row mb-4">
            <div className="col-md-6">
              {/* add a text 'Already have an account? Login ' */}
              <span className="already-have-account">
                Already have an account?
              </span>
              {/* wrap login by Link component */}
              <Link
                to="/accounts/login"
                className="login-link"
              >
                Login
              </Link>

            </div>
          </div>

        </form>
      </section>
    </main>
"""

SASS
--------
"""
/* stylelint-disable */ 
.main-container {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 112px;
    background: #FFFFFF;
    border-radius: 20px;
}

.image-section {
    position: relative;
    flex: 1;
  }
  
  .image-section img {
    width: 100%; /* Set the desired width */
    height: auto; /* Maintain aspect ratio */
  }

  .registration-section {
    flex: 1;
    padding: 20px;
    margin: 30px;
    box-sizing: border-box; 
    overflow: hidden; 
  }
  
  .image-container {
    position: relative;
    display: inline-block;
  }
  
  .image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px;
    margin-bottom: 130px;
  }
  
  .image-title {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 70px;
    line-height: 64px;
    letter-spacing: -0.04em;
    text-transform: capitalize;
    color: #FFFFFF;
  }
  
  .image-content {
    color: #FFFFFF;
    text-align: left;
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
  }
  
  .question {
    font-family: "Basis Grotesque Arabic Pro" !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 40px !important;
    line-height: 45px !important;
    letter-spacing: -0.04em !important;
    color: #1b202d !important;
  }
  
.question-helper {
    font-family: "Basis Grotesque Arabic Pro" !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    color: #1b202d !important;
}

.button-wrapper {
    margin-top: 40px;
  }
  
  .button-wrapper button {
    width: 100%;
    background: #000000;
    border-radius: 5px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: #F5F5F5;
    padding: 16px 50px;
  }

  .finger-print-icon {
    margin-right: 14px;
  }
  
  .firstname-label,
  .lastname-label,
  .gender-label,
  .email-label,
  .mobile-label,
  .services-label
  {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: 'normal';
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 18px;
    color: #1b202d;
    margin-top: 0px !important;
  }

  .firstname-input,
  .lastname-input,
  .email-input,
  .mobile-input,
  .services-input
    {
    font-family: 'Basis Grotesque Arabic Pro' !important;
    font-style: 'normal' !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    line-height: 18px !important;
    color: #1b202d !important;
    height: 2.5rem !important;
  }

  .date-picker-field .date-picker-input {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 18px;
  }

  // right align secondary-email and secondary-mobile
  .secondary-email,
  .secondary-mobile {
    text-align: right;
  }

  // add left spacing between secondary-email and secondary-email-icon
  .secondary-email-icon {
    margin-left: 10px;
  }

  // add left spacing between secondary-mobile and secondary-mobile-icon
  .secondary-mobile-icon {
    margin-left: 10px;
  }

  // add background: #023979;
// border-radius: 10px; to next-step-button
.next-step-button {
  background: #023979;
  border-radius: 10px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #F5F5F5;
  padding: 16px 50px;
  border: none;
}

// add below style to already-have-account
.already-have-account {
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: #494A53;
}

// add below style to login-text
.login-link {
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: #1B202D;
  margin-left: 5px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

"""


You are a CSS expert.

Client wanrs to Auto Update the WelcomeImageUserOnBoarding image height when main container height increments. image height should be in sync
with the height change of main container div element.
So when main container height updates image height also auto update with same. Thus it wont leave any spacing at bottom.
I have given the jsx and sass file for your reference.
If you have any questions you can ask.


Solutions:

To achieve the desired effect of the `WelcomeImageUserOnBoarding` image height being in sync with the height change of the `main-container` div element, you can use CSS to make the image responsive and adjust its height accordingly.

Here's an updated version of the SASS code with modifications to make the image height responsive:

```sass
.main-container {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 112px;
  background: #FFFFFF;
  border-radius: 20px;
  position: relative; /* Add position relative to main-container */
}

.image-section {
  position: relative;
  flex: 1;
}

.image-section img {
  width: 100%;
  height: 100%; /* Set the image height to 100% of the parent container */
  object-fit: cover; /* Maintain aspect ratio and cover the entire container */
}

.registration-section {
  flex: 1;
  padding: 20px;
  margin: 30px;
  box-sizing: border-box;
  overflow: hidden;
}

.image-container {
  position: relative;
  display: inline-block;
  width: 100%; /* Set the image container width to 100% */
  height: 100%; /* Set the image container height to 100% */
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  margin-bottom: 130px;
}

/* Rest of the styles remain the same */
```

In this code, I've added `position: relative` to the `main-container` to establish a positioning context for its child elements. Then, I've modified the styles for the `image-section`, `image-container`, and `image-section img` to make the image responsive. By setting the image height to `100%` of the parent container and using `object-fit: cover`, the image will automatically adjust its height to match the height of the `main-container`.

Please ensure you include this updated SASS code in your project and recompile it to generate the CSS styles.

#react.js #css #javascript

Add underline for whole text `Login`.

  <Link
                to="/accounts/login"
                className="login-link"
              >
                Login
              </Link>


.login-link {
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  /* identical to box height */
  color: #1B202D;
  // assign left margin to login-text
  margin-left: 5px;
  // add an underline to login-link
  text-decoration: underline;
}

You are a front end developer
I have applied underline to login link. but letter 'g'  of login text has no underline. i dont how to resolve this. You can apply any styling to put the underline for whole text.

Solution:

It sounds like the g in the word "login" is not being underlined along with the rest of the text, which can happen if the text is not aligned properly with the underline.

To fix this issue, you can try adding the text-underline-offset property to the .login-link class, with a value of 3px or 4px. This property will adjust the position of the underline so that it lines up correctly with the text.



.login-link {
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: #1B202D;
  margin-left: 5px;
  text-decoration: underline;
  text-underline-offset: 3px; /* Adjust value as needed */
}


With this change, the underline should now cover the entire text, including the g. You can adjust the value of text-underline-offset as needed to ensure that the underline lines up properly with the text.

#react.js #css #javascript

CSS TO SASS STYLE CONVERSION - GPT PROMPT

JSX
"""
<Modal show={showModal} onHide={handleModalClose} dialogClassName="modal-dialog-centered" size="lg">
      <Modal.Header closeButton>
        <Modal.Title className="modal-title">Choose Method</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>
          <div className="modal-choose-method-subtitle mb-3">
            List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
          </div>
        </div>
        <div className="d-flex flex-row">
          <div
            className={`card-container-draft-will d-flex flex-column align-items-center ${activeCard === 'draftWill' ? 'active' : ''}`}
            onClick={() => handleCardClick('draftWill')}
          >
            {activeCard === 'draftWill' && (
            <div
              className="check-icon"
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div className="choose-method-draft-will-icon-container" style={{ marginBottom: '20px', marginTop: '20px' }}>
              <img src={DraftWillIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-draft-will-title" style={{ marginTop: '10px', marginBottom: '10px' }}>
              Draft Will Using the System
            </div>
            <div className="text-center choose-method-draft-will-desc" style={{ marginTop: '10px', marginBottom: '10px' }}>
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
          <div
            className={`card-container-will-copy-upload d-flex flex-column align-items-center ${activeCard === 'willCopyUpload' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('willCopyUpload')}
          >
            {activeCard === 'willCopyUpload' && (
            <div
              className="check-icon"
              style={{
                position: 'absolute', top: '10px', left: '10px', margin: '10px',
              }}
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div className="choose-method-will-upload-icon-container">
              <img src={WillCopyUploadIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-will-upload-title" style={{ marginTop: '10px', marginBottom: '10px' }}>
              Upload the Copy of Will
            </div>
            <div className="text-center choose-method-will-upload-desc" style={{ marginTop: '10px', marginBottom: '10px' }}>
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
        </div>
      </Modal.Body>
      <Modal.Footer className="justify-content-center">
        {
          activeCard && isAnyWillCardSelected && (
            <Link
              to={`/wills/${selectedWillCard.willTypeName.split(' ').join('-')}/${selectedWillCard.willTypeGUID}`}
              state={selectedWillCard.willTypeName}
            >
              <Button
                variant="primary"
              >
                Continue
              </Button>
            </Link>
          )
        }
      </Modal.Footer>
    </Modal>
    
   """
   
   css
   ------
   """
   /* stylelint-disable */ 

.card-container-draft-will.active, .card-container-will-copy-upload.active  {
    background-color: #E4FDFF;
    border-radius: 20px;
    padding: 28px;
}
.card-container-draft-will {
    width: 50%;
    margin-right: 10px;
    position: relative;
}
.modal-choose-method-subtitle {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 18px;
    color: #1B202D;
}

.modal-title {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 45px;
    letter-spacing: -0.04em;
    color: #1B202D;
}

.btn-close {
    color: #494A53 !important;
    font-size: 10px !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
}

.btn-close:before {
    background-color: #f1f1f1 !important;
    border-radius: 50px !important;
  }

  .check-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 10px;
  }
  
  .choose-method-draft-will-icon-container {
    margin-bottom: 20px;
    margin-top: 20px;
  }
  
  .choose-method-will-upload-title {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
  }
  """
  
  You are expert in css to sass conversion.
  Client want the above css to be converted in to sass format.
  it should follow sass styling conventions.
  you have to convert it as per the requirement of client.
  for your reference, i have given the respective JSX content for the above styles.
  you can check the css selectors and make sure current styles wont break.
  Return the converted sass

#javascript #playwright.js

How can I use page.waitForSelector in Playwright for one of two selectors? - Stack Overflow

const firstResolvedPromiseResult = await Promise.race([
  this.page.waitForSelector('div#abc'),
  this.page.waitForSelector('div#efg'),
]);

#react.js #css #javascript

Handle Card Click - Fetching from api and Looping through each will types

import { useDispatch, useSelector } from 'react-redux';
import fetchWillsList, { willsListSelector } from '@redux/slices/wills-list';


  const { results } = useSelector(willsListSelector);

  const dispatch = useDispatch();

  React.useEffect(() => {
    dispatch<any>(fetchWillsList());
  }, []);


  const handleCardClick = (cardName: string) => {
    let willTypeName: string = '';
    let willTypeGUID: string = '';
    setActiveCard(cardName);
    results.forEach((will: any) => {
      if (cardName === 'draftWill' && will.willTypeName === 'Templated Full Will') {
        willTypeName = will.willTypeName;
        willTypeGUID = will.willTypeGUID;
      } else if (cardName === 'willCopyUpload' && will.willTypeName === 'Full Will') {
        willTypeName = will.willTypeName;
        willTypeGUID = will.willTypeGUID;
      }
    });

    setSelectedWillCard({ willTypeName, willTypeGUID });
  };

#javascript

express js + mongodb +rest api + postman

const express = require("express");
const app = express();
const mongoose = require("mongoose");
const bodyParser = require("body-parser");

mongoose.connect("mongodb://127.0.0.1:27017/datasbase").then(() =>{
    console.log("Mongodb Connected");
}).catch((err) =>{
    console.log(err);
});

app.use(bodyParser.urlencoded({extended: false}));
app.use(express.json());

const productSchema = new mongoose.Schema({
    _id: Number,
    name: String,
    price: Number
});

const productModel = new mongoose.model("data", productSchema);

//product create
app.post("/api/v1/product/new", async (req, res) =>{
    const productCreate = await productModel.create(req.body);


    res.status(201).json({
        success: true,
        productCreate
    });
});

//products find
app.get("/api/v1/products", async (req, res) =>{
    const productFInd = await productModel.find();


    res.status(200).json({
        success: true,
        productFInd
    });
});


//product update
app.put("/api/v1/product/:id", async (req, res) =>{
    let productUpdate = await productModel.findById(req.params.id);

    if(!productUpdate){
        return res.status(500).json({
            success: false,
            message: "product not found"
        })
    }
    productUpdate = await productModel.findByIdAndUpdate(req.params.id, req.body, {new: true,
    useFindAndModify: false,
    runValidators: true
    });

        res.status(200).json({
            success: true,
            productUpdate
        });
});

//delete product

app.delete("/api/v1/product/:id", async(req, res) =>{
    let productDelete = await productModel.findById(req.params.id);

    if(!productDelete){
        return res.status(500).json({
            success: false,
            message: "product not found"
        })
    }

    await productModel.findByIdAndDelete(req.params.id);

    
    res.status(200).json({
        success: true,
        message: "product deleted"
    });
});



app.listen(4500, () =>{
    console.log("Server is working");
});

#html #javascript

Simple JavaScript

document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('myButton');
    button.addEventListener('click', function() {
        alert('¡Haz hecho clic en el botón!');
    });
});

#react.js #css #javascript

Attempted import error: 'useHistory' is not exported from 'react-router-dom'

In react-router-dom v6 useHistory() is replaced by useNavigate()

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');

#react.js #css #javascript

Bootstrap modal creation - Prompt Chatgpt

"""
 <Link to="/wills/quick-booking">
                    <span className="box-title">
                      Book Quick Appointment
                    </span>
                  </Link>
  """                
                  
You are a experienced react developer.
  
currently when user clicks on above link, moves to `/wills/quick-booking` route. 
what you need to do is to first show a bootstrap modal popup before moving to that route. 
so you have to show a modal popup before moving to above quick booking page.
you have to also create a modal pop using boostrap. 

modal contents were given below:

Heading or title
-------------------
Confirm


Content or Subcontent 
--------------------
Testators may enter minimum information to secure an appointment. 
Full details must be completed 72 hours prior to the booking date to avoid appointment cancellation. 
Registered Will Draftsmen are requested to refrain from using the quick booking option

Two Buttons
---------
Continue Button - When user clicks on this button, it moves to /wills/quick-booking to open quick booing page.
Cancel Button - Close the modal popup and not redirected to above route.


No need to apply any styling as of now. We can do it later on. You have to use boostrap modal.

#javascript

mongodb mongoose

const mongoose = require("mongoose");

mongoose.connect("mongodb://127.0.0.1:27017/base").then(() =>{
    console.log("server connectet to mongodb");
}).catch((err) =>{
    console.log(err);
});

const student = new mongoose.Schema({
    name: String,
    class: Number,
    study: Boolean
});

const Student = new mongoose.model("data", student);

const adder = async () =>{
    const detail = await Student.create({
        name: "Alex",
        class: 5,
        study: true
    });

};

adder();

#react.js #css #javascript

Bootstrap Modal Development

Sure! I can help you with that. Here's an example of how you can create a Bootstrap modal in React and use it to show a confirmation popup before redirecting to the `/wills/quick-booking` route:

First, make sure you have the Bootstrap CSS and JS files included in your project.

Next, create a new React component called `ConfirmationModal`:

```jsx
import React from 'react';
import { Modal, Button } from 'react-bootstrap';

const ConfirmationModal = ({ show, handleClose, handleContinue }) => {
  return (
    <Modal show={show} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Confirm</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <p>Testators may enter minimum information to secure an appointment.</p>
        <p>
          Full details must be completed 72 hours prior to the booking date to avoid appointment cancellation.
        </p>
        <p>Registered Will Draftsmen are requested to refrain from using the quick booking option.</p>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={handleClose}>
          Cancel
        </Button>
        <Button variant="primary" onClick={handleContinue}>
          Continue
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

export default ConfirmationModal;
```

In your main component where the link is located, you can use the `ConfirmationModal` component and handle its state:

```jsx
import React, { useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
import ConfirmationModal from './ConfirmationModal';

const MainComponent = () => {
  const [showModal, setShowModal] = useState(false);
  const history = useHistory();

  const handleShowModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleContinue = () => {
    handleCloseModal();
    history.push('/wills/quick-booking');
  };

  return (
    <div>
      <Link to="/wills/quick-booking" onClick={handleShowModal}>
        <span className="box-title">Book Quick Appointment</span>
      </Link>
      <ConfirmationModal
        show={showModal}
        handleClose={handleCloseModal}
        handleContinue={handleContinue}
      />
    </div>
  );
};

export default MainComponent;
```

In the above example, the `MainComponent` renders a link with the class name `box-title`, and when clicked, it calls the `handleShowModal` function to show the modal popup. The modal is conditionally rendered based on the `showModal` state.

The `ConfirmationModal` component receives three props: `show` (to determine whether the modal should be displayed), `handleClose` (to close the modal), and `handleContinue` (to handle the continue button click and redirect to the desired route).

When the user clicks "Continue" in the modal, the `handleContinue` function is called, which first closes the modal and then uses the `useHistory` hook from React Router to navigate to the `/wills/quick-booking` route.

Remember to adjust the code and import the necessary dependencies based on your project structure and setup.

I hope this helps! Let me know if you have any further questions.

#react.js #css #javascript

branch name create prompt codeium

you have to suggest me a branch name in which i implement UI of confirm modal pop up. branch name should follow convention.

#javascript

javascript - Remove all elements contained in another array - Stack Overflow

//Using the new ES6 Syntax

    console.log(["a", "b", "c", "d", "e", "f", "g"].filter(el => !["b", "c", "g"].includes(el)));

    // OR

    // Main array
    let myArray = ["a", "b", "c", "d", "e", "f", "g"];

    // Array to remove
    const toRemove = ["b", "c", "g"];

    const diff = () => (myArray = myArray.filter((el) => !toRemove.includes(el)));
  console.log(diff()); // [ 'a', 'd', 'e', 'f' ]

    // OR

    const diff2 = () => {
      return myArray = myArray.filter((el) => !toRemove.includes(el));
    };
    console.log(diff2()); // [ 'a', 'd', 'e', 'f' ]

#javascript

Adding class when in View

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function () {
    $('.textbox').each(function () {
        if (isScrolledIntoView(this) === true) {
            $(this).addClass('visible');
        }
    });

});

#javascript

all settled ver resultados, separados por rejected o resolve

async function successA(){return 'A'}
async function successB(){return 'B'}
async function failC(){throw 'error c'}
async function failD(){throw 'error d'}

const results = await Promise.allSettled([
    successA(),
    successB(),
    failC(),
    failD()
])

const successfullResults = results
    .filter(result => result.status === "fulfilled")
    .map(result => result.value)

console.log(successfullResults)

results
    .filter(result => result.status === "rejected")
    .forEach(error => console.log(error.reason))

#react.js #css #javascript

Prompt to Fix Route Link Issue and Possible Solutions

  <Link to="/wills/quick-booking">
                    <span className="box-title">
                      Book Quick Appointment
                    </span>
                  </Link>
                  
                  
                  you are an expert in react development.
                  i have added a link component and set the route. 
                  but when i clikc "Book Quick Appointment". it throws error message like  
                  "No route matches URL \"/wills/quick-booking\""
                  its status is 404 not found.
                  Help me to find and fix solution for the problem.
                  
                  

                  Solutions:
                  
                  1. Make sure that you have a Route component in your app that matches the /wills/quick-booking path. You can do this by adding the following code to your app:

<Route exact path="/wills/quick-booking">
  {/* Insert the component for the quick booking page here */}
</Route>

check routes file in projct directory and update the path.

#javascript

change HTML styles

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">My name is Lillian.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

</body>
</html>

#react.js #css #javascript

PROMPT TO SOLVE PROBLEMS CRIO.DO

"""
Problem Description
Given a non-empty array of digits representing a non-negative integer, plus one to the integer and return the same list.

The digits are stored such that the most significant digit is at the head of the list, and each element in the array contain a single digit.

You may assume the integer does not contain any leading zero, except the number 0 itself.

Input format
You will be given a list of integers.

Output format
Return a list of integer +1.

Sample Input 1
1 2 3

Sample Output 1
1 2 4

Explanation 1
The array represents the integer 123.

Sample Input 2
4 3 2 1

Sample Output 2
4 3 2 2
"""

Consider you are an experienced python developer.
Help me to solve the above problem and integrate the code into below code.
Code should follow python naming conventions
Return the updated code.

```py
def plusOne(digits):
if __name__ == '__main__':
    digits = input().split()
    digits = [int(i) for i in digits]
    result = plusOne(digits)
    for i in result:
        print(i,end=' ')
```

#javascript

change HTML attribute values

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

<button onclick="document.getElementById('myImage').src='pic_lighton.gif'">Turn on light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_lightoff.gif'">Turn off light</button>

</body>
</html>

#javascript

html for form express post

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Express js</title>
</head>
<body>
    <form action="/data" method="post">
        <input type="text" name="name"  >
        <input type="email" name="email"   >
        <input type="submit" value="submit" >
    </form>
</body>
</html>

#javascript

express post

const expres = require("express");
const app = expres();
const path = require("path");
const bodyParser = require("body-parser");

app.use(bodyParser.urlencoded({extended: false}));

app.get("/",(req, res) =>{
    res.sendFile(path.join(__dirname + "/index.html"));
})

app.post("/data", (req, res) =>{
    const userName = req.body.name;
    const email = req.body.email;
    const sum = userName+ " " + email;
    res.send(sum);
    
});

const PORT = 4000;

app.listen(PORT, () =>{
    console.log(`Server is working on ${PORT}`)
});

#javascript

express js

const express = require("express");
const app = express();
const path = require("path");

app.get("/", (req, res) =>{
    res.sendFile(path.join(__dirname +  "/index.html"))
});

const PORT = 4000;

app.listen(PORT, () =>{
    console.log(`Server is working on ${PORT}`)
});

#javascript

use node js

first npm init
second npm i express nodemon


const http = require("http");
const fs = require("fs");

const home = fs.readFileSync("./index.html", "utf-8");
const server = http.createServer((req, res) =>{
    if(req.url === "/"){
     return   res.end(home);
    }
   
});

const PORT = 4000;
const hostname = "localhost";

server.listen(PORT, hostname, () =>{
    console.log("Server is working");
});

#javascript

CodePen Home Change sticky nav on scroll

https://codepen.io/kevinpowell/pen/xxyybmj

#react.js #css #javascript

Chatgpt Prompt - Python CRIO DO PROGRAM SOLVING

Code 1:
"""
# TODO: Implement this method
from typing import List


def findElement(n: int, arr: List[int], x: int) -> int:

# NOTE: Please do not modify this function
def main():
    n = int(input().strip())
    arr = list(map(int, input().strip().split(' ')))
    x = int(input().strip())

    xIndex = findElement(n, arr, x)
    print(xIndex)

if __name__=="__main__":
    main()
"""

Code 2:
"""
def find_index(n,arr,x):
    for i in range(n):
        if arr[i]==x:
            return i
    return -1
"""


Consider you are a python devekoper.
Help me to integrate the Code 2 into Code 1.
Return the updated version of code.

#react.js #css #javascript

chatgpt prompt

"""
 <Typography

              >
                {moment(dateOfBirth).format('DD/MM/YYYY')}

              </Typography>
"""

Consider you are a jaavscript developer.

I want the dateofBirth to shown as `17 May 1998` format . currenlty it is shown as `17/05/1998`.

I want you to change format i wish to. Here i used moment package you can use the same package.

Please update rhe code and return the udpated one

#react.js #css #javascript

PACKAGE IMPORTS - CHATGPT PROMPT

"""
import React, { useState } from "react";
import "./style.scss";
import Typography from "@mui/material/Typography";
import WitnessTable from "@components/WitnessTable";
import { useForm } from "react-hook-form";
import Autocomplete from "@mui/material/Autocomplete";
import AutocompleteOption from "@mui/joy/AutocompleteOption";
import { DatePicker } from "@mui/x-date-pickers";
import { TextField } from "@mui/material";

// import custom hooks
import useNationalityList from "@utils/hooks/useNationalityList";
import useCountryList from "@utils/hooks/useCountryList";
import useCityList from "@utils/hooks/useCityList";
import useIsdCodesList from "@utils/hooks/useIsdCodesList";
import { useDispatch, useSelector } from "react-redux";

// selectors
import {
  dropDownSelector,
  fetchCityList,
  fetchCountryList,
  fetchNationalityList,
} from "@redux/slices/dropDowns";
import { willsValidatorSelector } from "@redux/slices/willsValidator";
import getGuid from "@utils/Wills/getGuid";
import axios from "axios";
import {
  submitWitnessDetails,
  willWitnessDetailsSelector,
  fetchWitnessList,
  fetchWitnessDetailsByGuid,
} from "@redux/slices/wills-witness-details";

import moment from "moment";

"""
I have the given the imports above. what you have to do is to import them in correct order and it should be easilty readable. organize the imports. please dont change any package name or change into default or named import. just reorder the imports for user readablity.

#react.js #css #javascript

API ISSUE CHATGPT PROMPT

payload for posting data:

"""
{
  "address": "binto",
  "bookedForProfileGUID": "05fa50b0-a450-437f-ade3-19bb128192a5",
  "city": "Wadi Zinati",
  "countryGUID": "07217663-f131-46b7-876b-8402f7a8312d",
  "dateOfBirth": "2023-06-06T18:30:00.000Z",
  "email": "gfdd@gmail.com",
  "emiratesId": "987978",
  "foreName": "test",
  "isdCode": "+81",
  "isdCodeGUID": "8841f91d-73b4-494c-b794-d8341faf80ab",
  "nationality": "33a784eb-6e88-43d6-8bf7-f41785851f25",
  "passportNo": "7456546",
  "phoneNumber": "76575675",
  "state": "rtfytrytr",
  "surName": "user",
  "zipCode": "654654"
}
"""

Data got while calling fetching:

"""
{
    "Output": {
        "profileguid": "34b4dd38-4c9c-42ee-9391-added811e2ad",
        "surName": "user",
        "foreName": "test",
        "address": "binto",
        "city": "Wadi Zinati",
        "countryName": null,
        "dateOfBirth": "2023-06-06T00:00:00",
        "passportNo": "7456546",
        "emiratesId": "",
        "phoneNumber": "76575675",
        "email": "gfdd@gmail.com",
        "nationality": "83",
        "isdCode": 106,
        "isdCodeGUID": "8841f91d-73b4-494c-b794-d8341faf80ab",
        "zipCode": "654654",
        "countryGUID": "07217663-f131-46b7-876b-8402f7a8312d",
        "state": "rtfytrytr",
        "dob": "2023-6-6",
        "emiratesIdNo": null,
        "serviceGUID": null,
        "bookedForProfileGUID": null
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "08/Jun/2023 16:24:06",
    "version": "V1"
}

"""

Consider you are API expert.

emiratesId field is posting but when we call get method emiratesId is returned as empty string.
Post api is working. get api is also working i think but emiratedId field is retunred empty string even i inserted the same.

I had given the payload while posting data, also the response i got while fetching below it. 

I want to know what is the reason behind this issue.

Please help me to find is this a problem in the api side.

#react.js #css #javascript

RESPONSE - AFTER EDITING WITNESS DETAILS

{
    "Output": {
        "saveStatus": false,
        "editStatus": true,
        "deleteStatus": false,
        "itemGUID": null,
        "isNotFirstGuardianValue": false,
        "errorMessage": null,
        "isAlreadyExists": false,
        "status": false
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "08/Jun/2023 12:02:32",
    "version": "V1"
}

#react.js #css #javascript

PAYLOAD - EDITING WITNESS DETAILS

{
  "address": "dfdfg dgdf",
  "bookedForProfileGUID": "05fa50b0-a450-437f-ade3-19bb128192a5",
  "city": "San Ignacio",
  "countryGUID": "b71f3fa5-a42b-4a0b-a6c3-8d956bb57757",
  "dateOfBirth": "2023-06-06T18:30:00.000Z",
  "email": "jgh@gmail.com",
  "emiratesId": "9897897",
  "foreName": "fgsdfsdf",
  "isdCode": "+591",
  "isdCodeGUID": "4d07418d-1d45-4500-ab49-0682eaae51b7",
  "nationality": "44d7c4c3-9690-4fe8-a733-bb9b1c1240e8",
  "passportNo": "67856876",
  "phoneNumber": "8567567567",
  "profileguid": "9294c7f8-8fb0-4e61-8f02-49db54ba7254",
  "state": "jmjhmh",
  "surName": "sdfsdfs",
  "zipCode": "6756765"
}

#react.js #css #javascript

save witness details api integration

{
    "Output": {
        "saveStatus": true,
        "editStatus": false,
        "deleteStatus": false,
        "itemGUID": "bff9b460-cae9-4b1f-8e9b-61b6dc991abc",
        "isNotFirstGuardianValue": false,
        "errorMessage": null,
        "isAlreadyExists": false,
        "status": false
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "07/Jun/2023 12:31:09",
    "version": "V1"
}

#react.js #css #javascript

WITNESS DETAILS GET API REPSONSE OUTPUT

{
    "Output": {
        "profileguid": "4320abce-c414-4c9b-967d-20323748f427",
        "surName": "dfgdf",
        "foreName": "hdf",
        "address": "gdfgdf gdfgdf",
        "city": "Ruyigi",
        "countryName": null,
        "dateOfBirth": "2023-06-06T00:00:00",
        "passportNo": "76575645",
        "emiratesId": "",
        "phoneNumber": "69573498",
        "email": "ckvh@gmail.com",
        "nationality": "9",
        "isdCode": 18,
        "isdCodeGUID": "8c7f202f-1f30-4ab9-bb6a-026f272c3c30",
        "zipCode": "76654654",
        "countryGUID": "8d68d0b0-7292-4262-a0b1-076014fcbb9d",
        "state": "kerala",
        "dob": "2023-6-6",
        "emiratesIdNo": null,
        "serviceGUID": null,
        "bookedForProfileGUID": null
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "07/Jun/2023 12:11:17",
    "version": "V1"
}

#react.js #css #javascript

GET WITNESS DETAILS BY PROFILE GUID - OUTPUT

{
    "Output": {
        "profileguid": "4320abce-c414-4c9b-967d-20323748f427",
        "surName": "dfgdf",
        "foreName": "hdf",
        "address": "gdfgdf gdfgdf",
        "city": "Ruyigi",
        "countryName": null,
        "dateOfBirth": "2023-06-06T00:00:00",
        "passportNo": "76575645",
        "emiratesId": "",
        "phoneNumber": "69573498",
        "email": "ckvh@gmail.com",
        "nationality": "9",
        "isdCode": 18,
        "isdCodeGUID": "8c7f202f-1f30-4ab9-bb6a-026f272c3c30",
        "zipCode": "76654654",
        "countryGUID": "8d68d0b0-7292-4262-a0b1-076014fcbb9d",
        "state": "kerala",
        "dob": "2023-6-6",
        "emiratesIdNo": null,
        "serviceGUID": null,
        "bookedForProfileGUID": null
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "07/Jun/2023 11:15:19",
    "version": "V1"
}

#react.js #css #javascript

insert witness details RESPONSE

{
    "Output": {
        "saveStatus": true,
        "editStatus": false,
        "deleteStatus": false,
        "itemGUID": "d68afb9e-8bd8-4e66-9bfa-c7666901a8ee",
        "isNotFirstGuardianValue": false,
        "errorMessage": null,
        "isAlreadyExists": false,
        "status": false
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "07/Jun/2023 11:04:21",
    "version": "V1"
}

#react.js #css #javascript

Insert witness details api - payload

{
  "address": "gdfgdf gdfgdf",
  "bookedForProfileGUID": "05fa50b0-a450-437f-ade3-19bb128192a5",
  "city": "Ruyigi",
  "countryGUID": "8d68d0b0-7292-4262-a0b1-076014fcbb9d",
  "dateOfBirth": "2023-06-06T18:30:00.000Z",
  "email": "ckvh@gmail.com",
  "emiratesId": "856345346",
  "foreName": "hdf",
  "isdCode": "+880",
  "isdCodeGUID": "8c7f202f-1f30-4ab9-bb6a-026f272c3c30",
  "nationality": "5f17dd01-c266-4da2-95c9-fedde4c60e73",
  "passportNo": "76575645",
  "phoneNumber": "69573498",
  "state": "kerala",
  "surName": "dfgdf",
  "zipCode": "76654654"
}

#react.js #css #javascript

Witness Details API - POST response

{
    "Output": {
        "saveStatus": true,
        "editStatus": false,
        "deleteStatus": false,
        "itemGUID": "4320abce-c414-4c9b-967d-20323748f427",
        "isNotFirstGuardianValue": false,
        "errorMessage": null,
        "isAlreadyExists": false,
        "status": false
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "07/Jun/2023 10:49:27",
    "version": "V1"
}

#javascript

Create array from a variable of DOM elements

const items = document.getElementsByTagName("li"); // gathers all list item elements

Array.from(items).forEach(el => { // loops over each element
  el.classList.add("hide"); // applies CSS rule .hide
});

#javascript #innerhtml #button #onclick #html

Const in JavaScript

const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error

// JavaScript const variables must be assigned a value when 
//   they are declared : 

// Correct
const PI = 3.14159265359;

// Incorrect
const PI;
PI = 3.14159265359;

// Always declare a variable with const when you know that 
// the value should not be changed.
// Use const when you declare:
// * A new Array
// * A new Object
// * A new Function
// * A new RegExp

//You can change the elements of a constant array :
// You can create a constant array :
const cars = ["Saab", "Volvo", "BMW"];
// You can change an element :
cars[0] = "Toyota";
// You can add an element :
cars.push("Audi");

// But you can NOT reassign the array :
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"]; 
// This creates an ERROR

// You can create a const object :
const car = {type:"Fiat", model:"500", color:"white"};
// You can change a property:
car.color = "red";
// You can add a property:
car.owner = "Johnson";

// But you can NOT reassign the object :
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};   
// ERROR

// Declaring a variable with const is similar to let when it
// comes to Block Scope. The x declared in the block, in this
// example, is not the same as the x declared outside the
// block:
const x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10

// Declaring a variable with const is similar to let when it 
// comes to Block Scope. The x declared in the block, in this
// example, is not the same as the x declared outside the
// block:
var x = 2;     // Allowed
var x = 3;     // Allowed
x = 4;         // Allowed

// New Example
var x = 2;     // Allowed
const x = 2;   // Not allowed

{
let x = 2;     // Allowed
const x = 2;   // Not allowed
}

{
const x = 2;   // Allowed
const x = 2;   // Not allowed

  //New Example
const x = 2;     // Allowed
x = 2;           // Not allowed
var x = 2;       // Not allowed
let x = 2;       // Not allowed
const x = 2;     // Not allowed

{
  const x = 2;   // Allowed
  x = 2;         // Not allowed
  var x = 2;     // Not allowed
  let x = 2;     // Not allowed
  const x = 2;   // Not allowed

//New Example
const x = 2;       // Allowed
{
  const x = 3;   // Allowed
}
{
  const x = 4;   // Allowed
}

#javascript #innerhtml #button #onclick #html

Variables In JavaScript

//Example Variables
var x = 5;
var y = 6;
var z = x + y; // or 11

// Same result, but "let"
let x = 5;
let y = 6;
let z = x + y;

// Again, but "const"
const x = 5;
const y = 6;
const z = x + y;

//Mixed Concept
const price1 = 5;
const price2 = 6;
let total = price1 + price2;

// You can declare many variables in one statement.
// Start the statement with let and separate the variables by comma:
let person = "John Doe", carName = "Volvo", price = 200;

// A declaration can span multiple lines:
let person = "John Doe",
carName = "Volvo",
price = 200;

// JavaScript Dollar Sign $
// Since JavaScript treats a dollar sign as a letter, identifiers containing 
// $ are valid variable names:
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

//In JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to" operator.
//This is different from algebra. The following does not make sense in algebra:
x = x + 
  
// JavaScript variables can hold numbers like 100 and text values like "John Doe".
// In programming, text values are called text strings.
// JavaScript can handle many types of data, but for now, just think of numbers and strings.
// Strings are written inside double or single quotes. Numbers are written without quotes.
// If you put a number in quotes, it will be treated as a text string. Example :
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

// As with algebra, you can do arithmetic with JavaScript variables, using operators like = and + :
let x = 5 + 2 + 3;
// You can also add strings, but strings will be concatenated:
let x = "Venus" + " " + "Martinez";
// Also try this : 
let x = "5" + 2 + 3; // Hint #523

#javascript #innerhtml #button #onclick #html

Creates the Text in the Notes

<!DOCTYPE html>
<html>
<body>

<h2>Practicing HTML</h2>
<h3>My JavaScript Lesson</h3>

<p>You can use document.write to calculate numbers and add words in to fill in the information outside of it.</p>

<script>
document.write(176 + 323 + " have officially rsvp'd, " + 325 * 3 + " people have indicated possibly rsvping. Another " + 34 + " haven't responded.");
</script>

</body>
</html>

#javascript #innerhtml #button #onclick #html

JavaScript Changing the way HTML Works

//This is a bunch of JavaScript Code to be used in HTML

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

//This section follows the html tags up until <head> this goes in head & body both
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>
<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
//Add more body text here if you'd like finish up with footer possibly,
//   and close it all up


//This one is similar the the last except this one, JavaScript goes in the
// <body> instead of the <head> 
<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>


//This one is the External Version Of The Above Two
//  Make a file labeled "anything.js" {literally anything}
//    Insert This Inside
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
//Now you'll need to put something like this inside your .html document
<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="myScript.js"></script>
//This ^^^ is the most essential of these lines in this example

// "Placing scripts in external files has some advantages:
//   * It separates HTML and code
//   * It makes HTML and JavaScript easier to read and maintain
//   * Cached JavaScript files can speed up page loads"
//The above notes quoted directly from :
<a href="https://www.w3schools.com/Js/js_whereto.asp">This Site</a>

#javascript #innerhtml #button #onclick #html

JavaScript {innerHTML form} that creates a lightbulb picture with (separate) on and off switches

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

#javascript #innerhtml #button #onclick #html

Inner HTML JavaScript Of a Button that "onClick" Changes HTML Content

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!">"Click Me!"</button>

#react.js #css #javascript

prompt

"""
<Autocomplete
                    disablePortal
                    id="combo-box-demo"
                    placeholder="+971"
                    options={isdCodesList}
                    isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        {...register('isdCode', {
                          required: true,
                        })}
                      />
                    )}
                    onChange={(e, newVal: any) => {
                      console.log('newVal', newVal);
                      setPhoneNumber(newVal?.label);
                    }}
                  />

"""

Sugeest you are a react developer expert.

I want to show country name instead of country code.
you can make the changes you need.
please update the code and return.

#javascript

Form validation in JSP using JavaScript - Stack Overflow

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
    <style type="text/css">
      *{
             font-family: cursive;
       }
        </style>
        <script type="text/javascript">
            function validate()
            {
                var a = document.getElementById("a");
                var b = document.getElementById("b");
                var valid = true;
                if(a.value.length<=0 || b.value.length<=0)
                    {
                        alert("Don't leave the field empty!");
                        valid = false;
                    }
                    else{
                        if(!IsNumeric(a.value) || !IsNumeric(b.value))
                            alert("Enter a number");
                    valid = false;
                }
                return valid;
            };

        </script>
</head>
<body bgcolor="#CDCDCC" font-family="cursive" font-size="20px;" font-weight="bold">



    <h2>Welcome <%=request.getParameter("uname")%>! Enter the numbers and the operation that you want to perform: </h2>
    <form font-size="75px;" action ="serv" method="get" onsubmit="return validate();" >
        <hr/>
        Enter the 1st number: <input type="text" name="a" /><br/>

        Enter the 2st number: <input type="text" name="b" /><br/><br/>

       <label>Add</label><input type="radio" name="option" value="Add" /><br/>

       <label>Subtract</label><input type="radio" name="option" value="Subtract"/><br/>

       <label>Multiply</label><input type="radio" name="option" value="Multiply"/><br/>

       <label>Divide</label><input type="radio" name="option" value="Divide" /><br/>

       <input type="submit" value="Submit" />


   </form>


</body>

#react.js #css #javascript

SASS CHATGPT PROMPT

"""
<div className="row email-phone-main-wrapper">
            <div className="col-md-6 phone-col-wrapper">
              <div className="mb-3">
                <label htmlFor="phoneNumber" className="form-label phone-number-label w-100">
                  Phone Number*
                </label>
                <div className="d-flex">
                  <Autocomplete
                    disablePortal
                    id="combo-box-demo"
                    placeholder="+971"
                    options={isdCodesList}
                    isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        {...register('isdCode', {
                          required: true,
                        })}
                      />
                    )}
                    onChange={(e, newVal: any) => {
                      console.log('newVal', newVal);
                      setPhoneNumber(newVal?.label);
                    }}
                  />
                  <input
                    type="text"
                    className="form-control-phonenumber"
                    id="phoneNumber"
                    aria-describedby="phoneNumberHelp"
                    placeholder="xxx xxxx xxxxxx"
                    {...register('phoneNumber', {
                      required: true,
                    })}
                    onChange={(e) => setPhoneNumber(e.target.value)}
                  />
                </div>
                {
                  errors?.phoneNumber?.type === 'required' && (
                    <span className="error">
                      please enter your phone number
                    </span>
                  )
                }
              </div>
            </div>
            <div className="col-md-4 email-col-wrapper">
              <div className="mb-3">
                <label htmlFor="email" className="form-label w-100">
                  Email Address
                </label>
                <input
                  type="text"
                  className="form-control"
                  id="email"
                  aria-describedby="emailHelp"
                  placeholder="eg:abc@mail.com"
                  {...register('email')}
                  onChange={(e) => setEmail(e.target.value)}
                />
              </div>
            </div>
          </div>
"""


You aree CSS expert. You have to do following design changes written inbullet points:

parent element - email-phone-main-wrapper
child elements - phone-col-wrapper, email-col-wrapper 
1. childs of email-phone-main-wrapper div element should appear in row format ie top and bottom style when screem with is equal or below 768px and height 1024 px. 
2. Both the child element should have same width when responsive. code for your reference is above.
3. YOu can media queries to achieve this result.
4. Return the updated sass code having media queries.

#react.js #css #javascript

media query responsive withness details component

row {
  
  display: flex;
    flex-direction: column;
}


@media (min-width: 768px)
.phone-number-wrapper {
    flex: 0 0 auto;
    width: 100%;
}

.form .email-col-wrapper {
    margin-left: 0px;
    width: 75%;
}

#react.js #css #javascript

sass gpt prompt

"""
<form className="form">
          <div className="row form-row">
            <div
              className="col-md-4"
            >
              <div className="mb-3">
                <label
                  htmlFor="forename"
                  className="form-label w-100 forename-label"
                >
                  Forename(s) - All First and Middle Names(as per passport)
                </label>
                <input
                  type="text"
                  className="form-control forename-input"
                  id="forename"
                  placeholder="Aron Mathew"
                  onChange={(e) => setForeName(e.target.value)}
                  {...register('foreName', {
                    required: true,
                  })}
                />
                {
                errors?.foreName?.type === 'required' && (
                  <span className="error">
                    please enter your forename
                  </span>
                )
              }
              </div>
            </div>
            <div className="col" />
            <div className="row">
              <div className="col-md-4">
                <div className="mb-3">
                  <label htmlFor="surname" className="form-label w-100">
                    Surname*
                  </label>
                  <input
                    type="text"
                    className="form-control surname-input"
                    id="surname"
                    aria-describedby="surnameHelp"
                    placeholder="Eg: Philip"
                    onChange={(e) => setSurName(e.target.value)}
                    {...register('surName', {
                      required: true,
                    })}
                  />
                  {
                  errors?.surName?.type === 'required' && (
                    <span className="error">
                      please enter your surname
                    </span>
                  )
                }
                </div>
              </div>
            </div>
            {/* date of birth and  nationality */}
            <div className="row">
              <div className="col-md-4">
                <div className="mb-3">
                  <label htmlFor="dateOfBirth" className="form-label date-of-birth-label w-100">
                    Date of Birth*
                  </label>
                  <DatePicker
                    onChange={(e: any) => {
                      handleDatePicker(e);
                    }}
                    value={dateOfBirth}
                    renderInput={(params: any) => (
                      <TextField
                        {...params}
                        inputProps={{
                          ...params.inputProps,
                          placeholder: 'Select Date of Birth',
                        }}
                        {
                            ...register('dateOfBirth', {
                              required: true,
                            })
                          }
                        className="date-picker date-picker-input"
                      />
                    )}
                    className="date-picker-field"
                  />
                  {
                    errors?.surName?.type === 'required' && (
                      <span className="error">
                        please enter your date of birth
                      </span>
                    )
                  }
                </div>
              </div>
              <div className="col-md-4">
                <div className="mb-3">
                  <label htmlFor="nationality" className="form-label nationality-label w-100">
                    Nationality*
                  </label>
                  <Autocomplete
                    disablePortal
                    id="combo-box-demo"
                    options={nationalitiesList}
                    isOptionEqualToValue={(option: any, value: any) => option.nationalityGuid === value.nationalityGuid}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        {...register('nationality', {
                          required: true,
                        })}
                      />
                    )}
                    onChange={(e, newVal: any) => {
                      console.log('newVal', newVal);
                      setNationalityGuid(newVal?.nationalityGuid);
                    }}
                  />
                </div>
              </div>
            </div>

            {/* passport number and emirates ID */}
            <div className="row">
              <div className="col-md-4">
                <div className="mb-3">
                  <label htmlFor="passportNo" className="form-label passport-number-label w-100">
                    Passport Number*
                  </label>
                  <input
                    type="text"
                    className="form-control passport-number-input"
                    id="passportNo"
                    placeholder="xx xxxx xxxx"
                    onChange={(e) => setPassportNo(e.target.value)}
                    {...register('passportNo', {
                      required: true,
                    })}
                  />
                  {
                    errors?.passportNo?.type === 'required' && (
                      <span className="error">
                        please enter your passport number
                      </span>
                    )
                  }
                </div>
              </div>

              <div className="col-md-4">
                <div className="mb-3">
                  <label htmlFor="emiratesId" className="form-label emirates-id-label w-100">
                    Emirates ID*
                  </label>
                  <input
                    type="text"
                    className="form-control emirates-id-input"
                    id="emiratesId"
                    placeholder="Eg: 123456789"
                    onChange={(e) => setEmiratesID(e.target.value)}
                    {...register('emiratesID', {
                      required: true,
                    })}
                  />
                  {
                    errors?.emiratesID?.type === 'required' && (
                      <span className="error">
                        please enter your emirates id
                      </span>
                    )
                  }
                </div>
              </div>
            </div>
            <h4 className="form-sub-head">
              Current Residential Address (Not PO Box)
              <hr />
            </h4>
"""

You are scss expert.
you have to nest form-sub-head element of form class. You have to follow sass conventions.
Return the converted styling.

#html #javascript #css

Estilos para IMC-dinámico

*,
body {
    box-sizing: border-box;
}

body {
    width: 96%;
    margin: auto;
    margin-top: 5%;
    text-align: center;
}

fieldset {
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
    padding: 5vw;
    height: 6vw;
    display: flex;
    flex-direction: column;
    justify-content:center;
    
}


#formContent {
    width: 25%;
    background-color: lightslategray;
}

::placeholder {
    text-align: center;
}

#html #javascript

IMC-js cálcula dinámicamente el índice de masa corporal.

function formularioIMC() {
    // Caja formulario o etiqueta padre. Hija de un div dentro de aside.
    let formulario = document.createElement("form");

    ///////////////////////////////////////////////////////////
    // Conjunto de cajitas fieldset contenedoras de
    // un input + label cada una.    
    let cajitaPeso = document.createElement("fieldset");
    let cajitaAltura = document.createElement("fieldset");

    let tituloPeso = document.createElement("legend");
    let tituloAltura = document.createElement("legend");
    ///////////////////////////////////////////////////////////



    // variables para los saltos de línea, una para salto,
    // otra para salto + raya horizontal.
    let salto = document.createElement("br");
    let salton = document.createElement("hr");
    ////////////////////////////////////////////////////////////    

    // variables para los label principales.
    // Peso y Altura.
    let etiquetaPeso = document.createElement("label");
    let etiquetaAltura = document.createElement("label");
    /////////////////////////////////////////////////////////////    

    // variables para los input principales.
    // Peso y Altura.
    let paraPeso = document.createElement("input");

    let paraAltura = document.createElement("input");

    ///////////////////////////////////////////////////////////// 



    // variables para los input boton.
    // Calcular y borrar.
    let calculo = document.createElement("input");
    let borro = document.createElement("input");
    
    ////////////////////////////////////////////////////////////

    // Asignación de valor o texto a las etiquetas legend.
    tituloPeso.innerHTML = `<i>Indíque su Peso: </i>`;
    tituloAltura.innerHTML = `<i>Indíque su Altura: </i>`;
    ////////////////////////////////////////////////////////////

    // Asignación de valor o texto, a las etiquetas label.
    etiquetaPeso.innerHTML = `<b>Calcular masa con peso y altura</b>`;
    etiquetaAltura.innerHTML = `<b>Calcular masa con peso y altura</b>`;
    ////////////////////////////////////////////////////////////////////////  

    // Asignación de atributos a los input.
    paraPeso.setAttribute('type', "text");
    paraPeso.setAttribute('placeholder', "Indíque su Peso por favor.");
    paraPeso.setAttribute('id', "pesos");
    ////////////////////////////////////////////////////////////////////////
    paraAltura.setAttribute('type', "text");
    paraAltura.setAttribute('placeholder', "Indíque su Altura por favor.");
    paraAltura.setAttribute('id', "alturas");
    ////////////////////////////////////////////////////////////////////////    

    //Asignación de atributos tipo y valor al botón de calcular.
    calculo.setAttribute('type', "button");
    calculo.onclick = function () {
        // Generación de la calculadora de índice de masa corporal.
        var valorPeso = parseInt(document.getElementById("pesos").value);
        var valorAltura = parseInt(document.getElementById("alturas").value);

        var altura = valorAltura / 100;
        var calculo = valorPeso / (altura * altura);
        //////////////////////////////////////////////////////////////////////////

        var mensaje;
        var respuesta;
        if (calculo < 18.5) {
            mensaje = 'Delgadez. Deberías ganar peso.';
            respuesta = `Un saludo, tu índice de Masa Corporal ${calculo} equivale a ${mensaje}`;
            alert(respuesta);
        } else if (calculo < 25) {
            mensaje = 'Peso justo. Ni engordes ni adelgaces.';
            respuesta = `Un saludo, tu índice de Masa Corporal ${calculo} equivale a ${mensaje}`;
            alert(respuesta);
        } else {
            mensaje = 'Sobrepeso. Deberías adelgazar.';
            respuesta = `Un saludo, tu índice de Masa Corporal ${calculo} equivale a ${mensaje}`;
            alert(respuesta);
        }
    }
    calculo.setAttribute('value', "Calcular IMC");
    ////////////////////////////////////////////////////////////////    

    //Asignación de atributos tipo y valor al botón de borrar
    borro.setAttribute('type', "reset");
    borro.setAttribute('value', "Borrar cálculo");


    // Impresión del formulario.

    // Primer fieldset.
    formulario.appendChild(salto);
    cajitaPeso.appendChild(tituloPeso);
    cajitaPeso.appendChild(etiquetaPeso);
    cajitaPeso.appendChild(salto);
    cajitaPeso.appendChild(paraPeso);
    formulario.appendChild(cajitaPeso);

    // Segundo fieldset.
    formulario.appendChild(salton);
    cajitaAltura.appendChild(tituloAltura);
    cajitaAltura.appendChild(etiquetaAltura);
    cajitaAltura.appendChild(salto);
    cajitaAltura.appendChild(paraAltura);
    formulario.appendChild(cajitaAltura);

    formulario.appendChild(salton);


    formulario.appendChild(calculo);
    formulario.appendChild(borro);
    document.getElementById("formContent").appendChild(formulario);
}

#javascript

Check if library is loaded - load if not

let _dp_lib_loaded = $(`script[src="${session_data.app_http_root}libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"]`).length;
if (_dp_lib_loaded == 0) {
	$('head').append(`<link href="${session_data.app_http_root}libs/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" rel="stylesheet"/>`);
	$('head').append(`<script src="${session_data.app_http_root}libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>`);
}

#javascript

Chrome

#react.js #css #javascript

React Development Errors

"""
import styled from '@emotion/styled';
import React from 'react';
import { useDispatch } from 'react-redux';
 
const WillsTable = styled('div')(({ theme }) => ({
    backgroundColor: theme.palette.background.paper,
  }));
"""
 
Property 'palette' does not exist on type 'Theme'.


Solution:

https://stackoverflow.com/a/72594201

Styled should be import from @mui/material/styles, as you can see here. So, the code will be like:

import { styled } from "@mui/material/styles";

#react.js #css #javascript

PROMPT SNIPPET

"""
import styled from '@emotion/styled';
import React from 'react';
import { useDispatch } from 'react-redux';

const WillsTable = styled('div')(({ theme }) => ({
    backgroundColor: theme.palette.background.paper,
  }));
"""

Property 'palette' does not exist on type 'Theme'.

Suggest a solution for the abover error. and update the current code with newer.

#javascript

querySelectorAll indices, setAttribute

function setExclusive() {
  const answers = document.querySelectorAll("input.answer");
  answers[0].setAttribute("type", "radio");
  answers[1].setAttribute("type", "radio");
  answers[2].setAttribute("type", "radio");
}

#react.js #css #javascript

prompt react

"""
<div className="file-list-item" key={index}>

  			<div className="file-info">
                <div
                  className="file-icon"
                >
                  <img src={FileListIcon} alt="File List Icon" />
                </div>
                <div className="file-name">
                  {file.name}
                </div>
              </div>

              <div className="close-icon" onClick={() => removeFile(file)}>
                <span>Remove</span>
              </div>
            </div>
"""

Suggest you are a experienced react developer.

`file-list-item` div element contains two child div elements `file-info` element and `close-icon` div element. These two chilf elements should have space between them. You can apply flex properties if needed. Write the styling from scratch. background color and border radius of parent element is 
#E4FDFF and 30px. Also please explain the change you make. file-icon and file-name should have margin of 10px in between. equal padding around file-list-item div element.  Return the updated version of code ans styles.



You are CSS expert.
help me to resolve this design issue.
currently width of file-list-item is changing based on length of file name. I want the width to stay consistent irrespective of file we attach. It should of same width. return the updated styles

#react.js #css #javascript

UPLOAD DOCUMENTS - UI UPDATE

jsx
----------
<div className="file-list">
  <div className="file-list-header">
    {uploadedFiles.map((file: any, index) => (
      <div className="file-list-item" key={index}>
        <div className="file-info">
          {file.name}
          <div className="close-icon" onClick={() => removeFile(file)}>
            Remove
          </div>
        </div>
        <div className="close-icon" onClick={() => removeFile(file)}>
          &#10006;
        </div>
      </div>
    ))}
  </div>
</div>

css
-----
.file-list {
  background: #E4FDFF;
  border-radius: 30px;
}

.file-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  text-transform: capitalize;
  color: #1B202D;
}

.file-info {
  display: flex;
  align-items: center;
}

.close-icon {
  cursor: pointer;
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  text-decoration-line: underline;
  color: #1B202D;
  margin-left: 8px;
}

.close-icon:last-child {
  margin-left: 0;
}

#react.js #css #javascript

css changes chatgpt prompt

"""
<div className="col-sm-6">
        <div className="edit-remove-sustitute">
          <div className="avatar-container">
            <div className="initials-avatar">S</div>
          </div>
          <div className="profile-card">
            <div className="profile-card__name">Shayne Anto</div>
            <div className="profile-card__role">Substitute</div>
          </div>
          <div className="action-buttons-container">
            <div
              className="edit-button"
              onClick={editSubstitute}
            >
              Edit
            </div>
            <div
              className="remove-button"
              onClick={removeSubstitute}
            >
              Remove
            </div>
          </div>
        </div>
      </div>

      <div className="col-sm-6">
        <div className="add-substitute-control">
          <div className="add-substitute-icon-wrapper">
            <img
              src={addSubstituteIcon}
              alt="Add Substitute Icon"
              onClick={handleOpenModal}
            />
          </div>
          <div
            className="add-substitute-text-wrapper"
          >
            <div className="add-substitute-title">Add Substitute</div>
            <div className="add-substitute-subtitle">Click here to add substitute</div>
          </div>
        </div>
      </div>
"""

Suggest you are CSS expert.

1. I want to change the classname from of both the divs `col-sm-6` to `col-sm-12` when media quey size is width 768px and height is 1024px.

2. Return the updated changes.


code for your reference is given below.

```
@media (max-width: 768px) and (max-height: 1024px) {
  .substitute-manager {
    flex-direction: column;
  }

  .edit-remove-sustitute,
  .add-substitute-control {
    margin-bottom: 1rem;
  }

  .add-substitute-control {
    margin-left: 0;
  }
}
```

#react.js #css #javascript

chatgpt prompt - save beneficiary substitute issue.

<Autocomplete
              id="beneficiaryType"
              placeholder="individual"
              disableClearable
              options={beneficiaryTypeListArray}
              getOptionLabel={(option: any) => option.label}
              style={{
                fontFamily: "Basis Grotesque Arabic Pro",
                fontStyle: "normal",
                fontWeight: 500,
                fontSize: "0.75rem",
                lineHeight: "18px",
                color: "#9799A6",
              }}
              renderOption={(props: any, option: { label: any }) => (
                <AutocompleteOption {...props}>
                  <ListItemContent
                    sx={{
                      fontFamily: "Basis Grotesque Arabic Pro",
                      fontStyle: "normal",
                      fontWeight: 500,
                      fontSize: "0.75rem",
                      lineHeight: "18px",
                      color: "#9799A6",
                    }}
                  >
                    hello world
                  </ListItemContent>
                </AutocompleteOption>
              )}
              {...register("beneficiaryTypeGuid", {
                required: true,
              })}
              onChange={(e: any, newVal: any) => {
                console.log(newVal);
                setBeneficiaryTypeGUID(newVal.beneficiaryTypeGUID);
              }}
            />

Consider you are a react developer.

help me to solve this problem.

- No values are populating in this Beneficiary type field
- api side is working.
- I want to populate the beneficiary types label on dropdown of beneficiary type fied.
- Make appropriate changes and return the updated version of code.

#nodejs #javascript

Node.js: Generate Images from Text Using Canvas - KindaCode

https://www.kindacode.com/snippet/node-js-generate-images-from-text-using-canvas/

#javascript #mongodb

Query To Delete Multiple Documents:

use('myworlddb')

//{} empty fetches all documents
db.person.deleteMany({name:"hemanth"})

#javascript #mongodb

query to delete a single document

use('myworlddb')
 
//{} empty fetches all documents
db.person.deleteOne({name:"hemanth"})

#javascript #mongodb

query to update multiple documents

use('myworlddb')

//{} empty fetches all documents
db.person.updateMany({age:{$lt:30}},{
  $set:{age: 1}
})

#javascript #mongodb

A Demo On MongoDB Running On Docker And Visual Studio Code MongoDB Extension PlayGround

use('myworlddb')
 
//{} empty fetches all documents
db.person.updateOne({name:"hemanth"},{
  $set:{age: 28}
})

#javascript

fetch documents by using the comparison operators like 'lt'(less than), 'lte'(less than equals), 'gt'(greater than)

use('myworlddb')
 
//{} empty fetches all documents
db.person.find({age:{$gt:30}})

#mongodb #javascript

filtering document properties value

use('myworlddb')
 
//{} empty fetches all documents
db.person.find({name:"naveen"})

#javascript

Javascript for annimations on VenusDesigns.xyz

<script>
func hide {
function listener(event) {
  const 1 = document.create("li")
  switch (event.type) {
    case "animationstart":
      l.textContent = `Started: elapsed time is ${event.elapsedTime}`;
      break;
    case "animationend":
      l.textContent = `Ended: elapsed time is ${event.elapsedTime}`;
      break;
    case "animationiteration":
      l.textContent = `New loop started at time ${event.elapsedTime}`;
      break;
  }
  document.getElementById("output").appendChild(l);
}
const element = document.getElementByClass("hidden");
element.addEventListener("animationstart", listener, true);
element.addEventListener("animationend", listener, true);
element.addEventListener("animationiteration", listener, true);
}

func bounce1 {
function listener(event) {
  const 2 = document.createElement("li");
  switch (event.type) {
    case "animationstart":
      l.textContent = `Started: elapsed time is ${event.elapsedTime}`;
      break;
    case "animationend":
      l.textContent = `Ended: elapsed time is ${event.elapsedTime}`;
      break;
    case "animationiteration":
      l.textContent = `New loop started at time ${event.elapsedTime}`;
      break;
  }
  document.getElementById("output").appendChild(l);
}
const element = document.getElementByClass("bounce1");
element.addEventListener("animationstart", listener, true);
element.addEventListener("animationend", listener, true);
element.addEventListener("animationiteration", listener, true);

element.className = "bounce1";
}

const element = document.getElementByClass("slideInFromLeft");
element.addEventListener("animationstartLeft", listener, true);
element.addEventListener("animationendLeft", listener, true);
element.addEventListener("animationiterationLeft", listener, true);

element.className = "slideInFromLeft";

const element = document.getElementByClass("slideInFromRight");
element.addEventListener("animationstartRight", listener, true);
element.addEventListener("animationendRight", listener, true);
element.addEventListener("animationiterationRight", listener, true);

element.className = "slideInFromRight";

</script>

#javascript

javascript - changing a JS value according to media queries on vuejs - Stack Overflow

if (window.matchMedia("(max-width: 768px)").matches) {
   this.fullSideBar = false;
}

#react.js #css #javascript

Personal Information Form Submission - POST Request

const handlePersonalInfo = (data: any, e: any) => {
    e.preventDefault();
    console.log('entered info::', data);
    let hasEmiratesId: boolean;
    if (selectedOption === 'Yes') hasEmiratesId = true;
    else hasEmiratesId = false;
    let isMirrorWill: boolean;
    if (singleWillCheck) isMirrorWill = false;
    else isMirrorWill = true;
    const allData = {
      ...data,
      maritalStatusGUID,
      dateOfBirth,
      referralQuestionGUID,
      hasEmiratesId,
      isMirrorWill,
      isdCodeGUID1: countryGUID,
      isdCodeGUID2: countryGUID,
      nationalityGuid,
      countryGUID,
    };
    console.log('allData test', allData);
    axios.post(personalInformationAPI, allData).then((res) => {
      console.log('res post', res);
    });

#javascript

CREATE AN ARRAY WITH THE THREE RANDOM ELEMENTS

const colors = ["blue", "red", "cyan", "yellow", "orange", "black", "white", "pink", "green", "purple"];
const randomColors = [];

for (let i = 0; i < 3; i++){
      const randomNumbers = Math.floor(Math.random() * colors.length);
      randomColors.push(colors[randomNumbers])
};

console.log(randomColors);

#react.js #css #javascript

Next Step Button Code Snippet

<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}> <button type="submit" className="next-btn"> Next Step </button> {/* {singleWillCheck ? ( <button type="submit" className="next-btn"> Next Step </button> ) : ( <button type="button" className="next-btn" onClick={handleMirrorWill}> Enter Spouse Information </button> )} */}
    <Box sx={{ flex: '1 1 auto' }} /> <Button color="inherit">Skip</Button> <Button color="inherit" onClick={handleBack}> Back </Button>
</Box>

#react.js #css #javascript

Update the activeStep based on pages we want to view

{!(activeStep === 7) && (
if we set active step to 7, then we can view Upload Documents page.

#react.js #css #javascript

Document Uploader Component Snippet

/* eslint-disable array-callback-return */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';

import { AiOutlineClose } from 'react-icons/ai';

import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';

function DocumentManager() {
  const [activeElement, setActiveElement] = useState('top');
  const [uploadedFiles, setUploadedFiles] = useState([]);

  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (element: string) => {
    setActiveElement(element);
  };

  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: string) => ({
    backgroundColor: activeElement === element ? '#023979' : '#FFFFFF',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: string) => ({
    color: activeElement === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: string) => (activeElement === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: string) => (activeElement === element ? TickMarkIconGreen : TickMarkIconGrey);

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
  };

  /**
 * Handles the file input change event.
 *
 * @param {any} e - the event object
 * @return {void}
 */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */
  const checkFileValidity = (files: any) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    const validFiles = files.filter((file: any) => {
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    const invalidFiles = files.filter((file: any) => !validFiles.includes(file));
    if (invalidFiles.length > 0) {
      const invalidFileNames = invalidFiles.map((file: any) => file.name).join(', ');
      alert(`Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`);
    } else {
      setUploadedFiles((prevFiles) => [...prevFiles, ...validFiles]);
      alert('Files uploaded successfully');
    }
  };

  /**
   * Removes a file from the uploaded files list.
   *
   * @param {any} file - The file to be removed.
   */
  const removeFile = (file: any) => {
    setUploadedFiles((prevFiles) => prevFiles.filter((f) => f !== file));
  };

  const {
    getRootProps,
    getInputProps,
  } = useDropzone({
    onDrop: handleFileDrop,
  });

  return (
    <main>
      <section>
        <header className="header">Upload Documents</header>
        <p className="description">Upload the documents in PDF or JPEG format. Click on next to save the files once all the documents have been uploaded</p>
      </section>
      <div className="row document-upload-container">

        <div className="col-lg-6 container">
          <div
            className={`top${activeElement === 'top' ? ' active' : ''}`}
            style={getBackgroundStyle('top')}
            onClick={() => handleElementClick('top')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('top')} alt="File Uploader Icon" />
              </div>
              <div
                className="document-title"
                style={getTitleStyle('top')}
              >
                Testator Passport

              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('top')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`middle${activeElement === 'middle' ? ' active' : ''}`}
            style={getBackgroundStyle('middle')}
            onClick={() => handleElementClick('middle')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('middle')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('middle')}
              >
                Additional Document
              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('middle')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`bottom${activeElement === 'bottom' ? ' active' : ''}`}
            style={getBackgroundStyle('bottom')}
            onClick={() => handleElementClick('bottom')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('bottom')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('bottom')}
              >
                Executor Passport
              </div>
            </div>
            <div className="tick-icon tick-icon-last">
              <img src={getTickMarkicon('bottom')} alt="Tick Mark" />
            </div>
            <div />
          </div>
        </div>

        <div className="col-lg-6 row-item" {...getRootProps()} onClick={handleRowItemClick}>
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button onClick={handleAddFileClick}>Add File</button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedFiles.length > 0 && (
          <div className="file-list">
            <ul>
              {uploadedFiles.map((file: any, index) => (
                <li key={index}>
                  {file.name}
                  <AiOutlineClose
                    className="close-icon"
                    onClick={() => removeFile(file)}
                  />
                </li>
              ))}
            </ul>
          </div>
          )}
        </div>
      </div>
    </main>
  );
}

export default DocumentManager;

#react.js #css #javascript

remove the behavior of opening the folder to select files when clicking on the row-item div element

const handleRowItemClick = (e) => {
  e.stopPropagation();
};

// ...

<div className="col-lg-6 row-item" {...getRootProps()} onClick={handleRowItemClick}>
  {/* Remaining code */}
</div>

#javascript

css - Best way to switch between two colours with javascript? - Stack Overflow

document.querySelector('#myButton').addEventListener('click',e => {
  e.target.classList.toggle('black')

})

#javascript

Notification

/* NOTIFICATION ___________________________________________________________________________________ */

var notification_number = 0;

function noti(title, text, color, bgcolor) {
    var not = document.createElement("div");
    not.style = "transition-duration:0.5s;width:300px;border-radius:8px;padding:10px;position:fixed;z-index:999;" +
        "bottom:20px;right:20px;";
    if (color) { not.style += "color:" + color + ";" }
    if (bgcolor) { not.style += "background-color:" + bgcolor + ";" }
    not.innerHTML =
        "<span id='notification_" + notification_number + "' class='closeButton' style='position:absolute;top:2px;right:10px;font-size:30px;cursor:pointer;'>&times;</span>" +
        "<h2 style='margin:0px;'>" +
        title + "</h3><hr style='border-color:" +
        color + ";'><p style='margin-top:15px;margin-bottom:10px;font-size:1.2em;'>" +
        text + "</p>";
    not.classList.add("notification");
    not.id = "notification_" + notification_number + "_div";
    notification_number++;
    document.body.appendChild(not);
    var closeButtons = document.querySelectorAll(".closeButton");
    closeButtons.forEach(element => {
        element.addEventListener("click", function () {
            var delNot = document.getElementById(element.id + "_div");
            delNot.style.opacity = "0";
            setTimeout(() => {
                delNot.remove();
            }, 1000);
        });
    });
    setTimeout(() => {
        if (not) {
            not.style.opacity = "0";
        }
    }, 5000);
    setTimeout(() => {
        if (not) {
            not.remove();
        }
    }, 6000);
}

#react.js #css #javascript

Add a close icon - ChatGPT Prompt

You are a React and frontend expert.

I want to achieve below changes to my current version of code.

Constraints:

1. Add a AiOutlineClose react icon on right side of each file which is listed.
2. On Clicking this icon, that uploaded file is removed from list and from UI as well.
3. Attached current code for reference.


```
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';

import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';

function DocumentManager() {
  const [activeElement, setActiveElement] = useState('top');
  const [uploadedFiles, setUploadedFiles] = useState([]);

  const handleElementClick = (element: string) => {
    setActiveElement(element);
    console.log(activeElement);
  };

  const getBackgroundStyle = (element: string) => ({
    backgroundColor: activeElement === element ? '#023979' : '#FFFFFF',
  });

  const getTitleStyle = (element: string) => ({
    color: activeElement === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: string) => (activeElement === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: string) => (activeElement === element ? TickMarkIconGreen : TickMarkIconGrey);

  const handleAddFileClick = () => {
    document.getElementById('file-upload-input')?.click();
  };

  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    console.log(newFiles);
    checkFileValidity(newFiles);
    setUploadedFiles((prevFiles) => [...prevFiles, ...newFiles]);
  };

  const handleFileDrop = (acceptedFiles: any) => {
    console.log(acceptedFiles);
    checkFileValidity(acceptedFiles);
    setUploadedFiles((prevFiles) => [...prevFiles, ...acceptedFiles]);
  };

  const checkFileValidity = (files: any) => {
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const validExtensions = ['.pdf', 'jpeg', 'jpg', '.bmp', '.doc', '.docx'];
      const maxFileSize = 20 * 1024 * 1024;

      if (!validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext))) {
        alert(`Invalid File: ${file.name}. Please use A4-size PDF, JPEG, BMP, DOC or DOCX files`);
      } else if (file.size > maxFileSize) {
        alert(`File size exceeds the limit: ${file.name}. Maximum file size is 20MB.`);
      } else {
        alert('File uploaded successfully');
      }
    }
  };

  const {
    getRootProps,
    getInputProps,
    isDragActive,
    isDragAccept,
    isDragReject,
  } = useDropzone({
    onDrop: handleFileDrop,
  });

  return (
    <main>
      <section>
        <header className="header">Upload Documents</header>
        <p className="description">Upload the documents in PDF or JPEG format. Click on next to save the files once all the documents have been uploaded</p>
      </section>
      <div className="row">

        <div className="col-lg-6 container">
          <div
            className={`top${activeElement === 'top' ? ' active' : ''}`}
            style={getBackgroundStyle('top')}
            onClick={() => handleElementClick('top')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('top')} alt="File Uploader Icon" />
              </div>
              <div
                className="document-title"
                style={getTitleStyle('top')}
              >
                Testator Passport

              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('top')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`middle${activeElement === 'middle' ? ' active' : ''}`}
            style={getBackgroundStyle('middle')}
            onClick={() => handleElementClick('middle')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('middle')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('middle')}
              >
                Additional Document
              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('middle')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`bottom${activeElement === 'bottom' ? ' active' : ''}`}
            style={getBackgroundStyle('bottom')}
            onClick={() => handleElementClick('bottom')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('bottom')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('bottom')}
              >
                Executor Passport
              </div>
            </div>
            <div className="tick-icon tick-icon-last">
              <img src={getTickMarkicon('bottom')} alt="Tick Mark" />
            </div>
            <div />
          </div>
        </div>

        <div className="col-lg-6 row-item" {...getRootProps()}>
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button onClick={handleAddFileClick}>Add File</button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
        </div>
        {uploadedFiles.length > 0 && (
          <div className="file-list">
            <ul>
              {uploadedFiles.map((file: any, index) => (
                <li key={index}>{file.name}</li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </main>
  );
}

export default DocumentManager;

```

#react.js #css #javascript

File Upload Feature - ChatGPT Prompt

''' 
 <div className="col-lg-6 row-item">
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button onClick={addFileHandler}>Add File</button>
          </div>
        </div>
   '''
 
 Your are a senior react developer.
 
 I want you to implement a functionality to upload files on button click event and drag and drop.
 
 Contrainst:
 
1. function should be implemented on `addFileHandler` event given above.
2. File can also be uploaded by drag and drop into row-item div element.
3. instructions for file upload is given `file-attach-instructions` div element.
4. You can use packages like `react-uploader` to implement this.
5. Finally return the updated version of code. Current code is above for reference.

#react.js #css #javascript

Center div element having 4 child elements - ChatGPT PROMPT

<div className="col-lg-6 row-item">
   <div className="file-upload-arrow">
     <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
   </div>
   <div className="file-upload-text">
     Drag and drop document here to upload
   </div>
   <div className="file-attach-instructions">
     Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
   </div>
   <div className="file-add-button">
     <button>Add File</button>
   </div>
 </div>
 
 
 Consider you are a CSS expert. Above is the code you have to update and make neccessary styling based on below constraints
 
 Constraints:
 
 1. Center the child elements of row-item div element horizonatally & vertically.
 2. Each child element is aligned center.
 3. Update backgournd of Add File button to #023979.
 4. Set border radious of button to 5px and font color to #FFFFFF.
 5. Fibnally return the updated version of code with change in styles.

#typescript #javascript #angular

Using NodeJs 14 with Mac Silicon (M1)

# Installing Rosetta
/usr/sbin/softwareupdate --install-rosetta --agree-to-license

# Install NVM
# https://github.com/nvm-sh/nvm#install--update-script
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

# Installing Node 14 by NVM
arch
# >>> arm64
arch -x86_64 zsh
arch
# >>> i386
nvm install 14
nvm use 14

#react.js #css #javascript

Background change based on active and inactive elements - ChatGPT Prompt

"""
<div className="top">
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={FileUploadIcon} alt="File Uploader Icon" />
              </div>
              <div className="document-title">Testator Passport</div>
            </div>
            <div className="tick-icon">
              <img src={TickMarkIconGreen} alt="Tick Mark" />
            </div>
          </div>

          <div className="middle">
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={FileUploadIconDark} alt="File Uploader Icon Dark" />
              </div>
              <div className="document-title text-black">Additional Document</div>
            </div>
            <div className="tick-icon">
              <img src={TickMarkIconGrey} alt="Tick Mark" />
            </div>
          </div>

          <div className="bottom">
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={FileUploadIconDark} alt="File Uploader Icon Dark" />
              </div>
              <div className="document-title text-black">Executor Passport</div>
            </div>
            <div className="tick-icon tick-icon-last">
              <img src={TickMarkIconGrey} alt="Tick Mark" />
            </div>
            <div />
         </div>
"""


You are an experienced React Developer.

I want to implement a UI change.

On clicking top, middle or bottom div elements, 
  1. its backgound should be changed to #023979. 
  2. Its document-title element color should be changed to #FFFFFF.
For example. middle div element is clicked, it is active and the backgound changes to #023979.
While background of Inactive elements changes to default color #f4f4f4.
Initially when component loads, top element background is #023979, and bottom 2 element background is #f4f4f4.
you can use react hooks and state if needed. 
Help me to achieve this change by modiyfinh current version of code

I will give styles for reference below.

.container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.top, .middle, .bottom {
    display: flex;
    justify-content: space-between;
    background-color: #f4f4f4;
    border-radius: 5px 0px 0px 5px;
}

.top {
    display: flex;
    align-items: center;
    background-color: #023979;
}

.container div {
    padding: 5px;
    text-align: center;
    cursor: pointer;
}

.document-title {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 14px;
    color: #FFFFFF;
}

.left-container {
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.file-upload-icon,
.document-title {
    margin-right: 12px;
}

.tick-icon {
    margin-left: auto;
    margin-right: 12px;
}

.document-title {
    flex-grow: 1;
}

.tick-icon-last {
    margin-right: 2px !important;
}

#javascript

Looping Wiggle Motion in After Effects

var amplitud = 15; // Amplitud del movimiento
var frecuencia = 2; // Frecuencia del movimiento (en rebotes por segundo)
var duracionBucle = 8; // Duración del bucle en segundos

var wiggleX = wiggle(frecuencia, amplitud)[0];
var wiggleY = wiggle(frecuencia, amplitud)[1];

var tiempoTotal = duracionBucle / 2; // Dividimos por 2 porque el bucle completo consta de un ida y vuelta
var tiempo = time % tiempoTotal;

var posicionInicial = [0, 0]; // Posición inicial del objeto

[posicionInicial[0] + wiggleX, posicionInicial[1] + wiggleY]

#javascript

Movimiento Circular en After Effects

var radio = 25; // Radio de la trayectoria circular
var velocidad = 0.5; // Velocidad de la animación (en grados por segundo)
var duracionBucle = 8; // Duración del bucle en segundos

var vueltasCompletas = duracionBucle * (360 / velocidad);
var angulo = degreesToRadians((360 * time * velocidad) % (360 * vueltasCompletas));

var posicionX = Math.cos(angulo) * radio;
var posicionY = Math.sin(angulo) * radio;

[posicionX+250, posicionY+536.3]

#javascript

Minutos, horas y segundos a milisegundos (+)

function past(h, m, s){
  return ((h*3600)+(m*60)+s)*1000;
}

//////

function past(h, m, s){
  return (m * 60000) + (h * 3600000) + (s * 1000);
}

#javascript

Contar los numeros postivos y sumar los negativos (+)

function countPositivesSumNegatives(input) {
    if (!input || input.length === 0) {
    return [];
    }  
  var total1 = 0;
  var total2 = 0;
  for (i = 0; i < input.length; i++) {   
    if (input[i] > 0) {                  
      total1 += 1;
    }
    if (input[i] < 0) {
      total2 += input[i];
    }
  }
  return [total1, total2];    
}

#javascript

misma cantidad de x y de o de una String (+)

function XO(str) {
  const x = (str.match(/x/ig) || []).length;
  const o = (str.match(/o/ig) || []).length;
  return x === o;
}

#javascript #array #.includes()

Buscar el valor en el array

function check(a,x){
  return a.includes(x);
};

#javascript #array #.repeat()

Repetición de String

function repeatStr (n, s) {
  return s.repeat(n);
}

#javascript #.reduce() #boolean

Comparar tu nota con el promedio

function betterThanAverage(classPoints, yourPoints) {
  return yourPoints > classPoints.reduce((a, b) => a + b, 0) / classPoints.length; 
}

#javascript #string #.match() #expresionesregulares #regex

Contar vocales en el string

//Opción 1:
function getCount(str) {
  const vocal = str.match(/[aeiou]/ig);
  return vocal === null ? 0 : vocal.length; //si no hay vocales devuelve 0, si hay devuelve la cantidad
}

//Opción 2:
function getCount(str) {
  return str.replace(/[^aeiou]/gi, '').length;
}

//Opción 3:
function getCount(str) {
  return (str.match(/[aeiou]/ig)||[]).length;
}

#javascript #array #chatat()

Devolver si la primera letra del string es r/R

//Opción 1:
function areYouPlayingBanjo(name) {
  return name + (name[0].toLowerCase() == 'r' ? ' plays' : ' does not play') + " banjo";
}

//Opción 2:
function areYouPlayingBanjo(name) {
  const letra = name.charAt(0);
  if (letra === "r" || letra === "R") {
    return name + " toca el banjo";
  }
  return name + " no toca el banjo";
}

#javascript #convertir #.split() #.map() #.chatat() #.touppercase() #.slice() #.join()

Primera Letra De Cada Palabra En Mayus

String.prototype.toJadenCase = function () { 
  return this.split(" ").map(function(word){
    return word.charAt(0).toUpperCase() + word.slice(1);
  }).join(" ");
}

#javascript #operaciónmate #array #.reduce() #parseint()

Puntos totales al jugar contra otros (x:x)

const points=games=>games.reduce((output,current)=>{
    return output += current[0]>current[2] ? 3 : current[0]===current[2] ? 1 : 0;
  },0)

//DIFERENTE ESCRITO:
 function points(games) {
   return games.reduce((output,current)=>{
     let x = parseInt(current[0]);
     let y = parseInt(current[2]);
     let value= x>y ? 3 : x===y ? 1 : 0;
     return output+value;
   },0)
 }

#javascript #array #operaciónmate #for

Suma de solo números positivos

function positiveSum(arr) {
  var total = 0;    
  for (i = 0; i < arr.length; i++) {   
    if (arr[i] > 0) {                   // if arr[i] es mayor a 0
      total += arr[i];                  // dar el total de la suma de esos arr[i]
    }
  }
  return total;                         // return total
}

#javascript #boolean #convertir

Boolean a String

//Opción 1:
function booleanToString(b){
  return b.toString();
}

//Opción 2:
function booleanToString(b){
  return b ? 'true' : 'false';
}
// si b es true? devolver 'true' si no lo es devolver 'false'.

//Opción3:
function booleanToString(b){
  return String(b);
}

#javascript #array #.reduce() #if #.length

Calcular promedio

//Opción 1:
function findAverage(array) {
  if(array.length === 0) {
    return(0);
  }
  return array.reduce((a, b) => a + b, 0) / array.length;
} 

//Opción 2:
var find_average = (array) => {  
  return array.length === 0 ? 0 : array.reduce((a, b)=> a + b, 0)/array.length
}

#javascript #array #buscar #.indexof()

Encontrar un valor especifico del array

function findNeedle(haystack) {
  return "found the needle at position " + haystack.indexOf("needle");
}

#javascript #convertir #array #.join()

Juntar palabras formando una oración

smash = function (words) {
  return words.join(" ");
};

#javascript #convertir #.ceil()

dar año, devolver siglo

function century(year) {
  return Math.ceil(year / 100);
}

#javascript #operadordepropagación #array

Operador de propagación ( … )

const parts = ["shoulders", "knees"];

const lyrics = ["head", ...parts, "and", "toes"];

// TOTAL lyrics ["head", "shoulders", "knees", "and", "toes"]

#javascript #operación #operadordepropagación #array

Encontrar el valor máximo y el mínimo

const min = (list) => Math.min(...list);
const max = (list) => Math.max(...list);

#javascript #objetos

Resultado Piedra, Papel, Tijeras con Objeto(reglas)

const rps = (p1, p2) => {
  if (p1 === p2) return "Draw!";
  var rules = {rock: "scissors", paper: "rock", scissors: "paper"};
  if (p2 === rules[p1]) {
    return "Player 1 won!";
  }
  else {
    return "Player 2 won!";
  }
};

#javascript #operación #array #.reduce #.length

El promedio de tres números

//OPCIÓN 1
function getGrade (s1, s2, s3) {
  avg = (s1+s2+s3)/3;
  if (avg < 60)  return "F";
    else if (avg < 70) return "D";
    else if (avg < 80) return "C";
    else if (avg < 90) return "B";
    else return "A";
}

//OPCIÓN 2
function getGrade(...scores) {
  let avg = scores.reduce((a, b) => a + b, 0) / scores.length;
  
  if (avg < 60)  return "F";
    else if (avg < 70) return "D";
    else if (avg < 80) return "C";
    else if (avg < 90) return "B";
    else return "A";

#javascript #convertir #array #.split() #.join() #.reverse()

Voltear palabras

function solution(str){
  return str.split('').reverse().join('');  
}

#javascript #operación

Multiplicar diferenciando par e impar %

// Opción 1:
function simpleMultiplication(n) {
    return n * (n % 2 ? 9 : 8);
}


// Opción 2:
function simpleMultiplication(n){
  return (n % 2 == 0) ? n * 8 : n * 9;
}


// Opción 3:
function simpleMultiplication(n){
    
  if(n % 2 === 0 ){ //si el numero es par...
	return n * 8;
  }
  else{ // si no lo es...
	return n * 9;
  }    
}

#javascript #remover #array #.slice()

Eliminar primer y último carácter

function removeChar(str){
  return str.slice(1, -1); 
};

#javascript #convertir

Numero a string

// 1: .toString
function numberToString(num) {
  return num.toString();
}

// 2: String()
function numberToString(num) {
  return String(num);
}

// 3: '' +
function numberToString(num) {
  return ''+num;
}

#javascript #convertir

De Minus A Mayus (y al contrario)

//minus a mayus
function makeUpperCase(str) {
  return str.toUpperCase();
}

//mayus a minus
function makeLowerCase(str) {
  return str.toLowerCase();
}

#javascript #operación #.reduce

Numero al Cuadrado²

function squareSum(numbers) {
  return numbers.reduce((sum, n) => n * n + sum, 0);
}

#javascript #html #css #typescript #react.js

Modal Close Button - Make button Rounded Shape Prompt

<button
   className="modal-close-button"
   onClick={handleCloseModal}
 >
   <span aria-hidden="true">&times;</span>
 </button>
 
 You are a CSS expert
 
 I want you to do following changes in styling.
 
 1. Rounded shape. Apply border radius to 50pc.
 2. Background to "#f1f1f1".
 3. No outer border color.
 3. border of child element span should be 2px solid #494A53.

#typescript #javascript

Datatables set pagination from serverside..

dataSrc: function (json) {
  json.draw = json.jsonData.draw;
  json.recordsTotal = json.jsonData.Total_Records;
  json.recordsFiltered = json.jsonData.Total_Records;
  // json.data.data = response.jsonData.CR_list;
  //Make your callback here.
  // alert("Done!");
  // console.log(json);
  return json.jsonData.CR_list;
},

#javascript #html #css #typescript #react.js

Create a rounded shape for initials_avatar div.

.initials-avatar {
    background-color: #023979;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    width: 38px;
    height: 38px;
}

#javascript

javascript - How can I center the text in the headers for an AG-grid control? - Stack Overflow

.ag-header-group-cell-label {
      justify-content: center !important;
}

#javascript #webix

Webix window popup with calendar and time picker

function createWindow() {
  webix.Date.startOnMonday = true;
  
  let window = webix.ui({
    view: "window",
    head: "Изберете датум", // Set the window title in Macedonian
    width: 400,
    //position: "center",
    move: false,
    modal: true,
    body: {
      rows: [
        {
          view: "calendar",
          id: "calendar",
          timepicker: true,
          icons: true,
          weekStart: 1, // 1 represents Monday
          calendarTime:"%H:%i",
          format: "%Y-%m-%d %H:%i:%s",
          events:webix.Date.isHoliday,
        },
        {
          view: "toolbar",
          elements: [
            {
              view: "button",
              value: "Готово",
              click: function () {
                var selectedDate = $$("calendar").getValue(); // Get the selected date and time
                if (selectedDate) {
                  var formattedDate = webix.Date.dateToStr(
                    "%Y-%m-%d %H:%i:%s"
                  )(selectedDate); // Format the date in MySQL format
                  
                  document.getElementById("result").innerHTML = "Selected Date: " + formattedDate; // Display the selected date and time in the result div
                }
                window.hide(); // Hide the window when the Done button is clicked
              }
            },
            {
              view: "button",
              value: "Откажи",
              click: function () {
                //$$('result').setValue('otkaz');
                document.getElementById("result").innerHTML = ""; // Display an empty result in the result div
                window.hide(); // Hide the window when the Cancel button is clicked
              }
            }
          ]
        }
      ]
    }
  });
	
  $$("calendar").selectDate(new Date(), true);
  // Show the window when the HTML button is clicked
  document.getElementById("show_window").onclick = function () {
    let button = this;
    let buttonPos = webix.html.offset(button);
    window.setPosition(buttonPos.x, buttonPos.y + button.offsetHeight);
    window.show();
  };
}

// Call the function to create the window
createWindow();

#javascript #webix

Webix setLocale MK

webix.i18n.setLocale({
  // Date and time formats
  dateFormat: "%d.%m.%Y",
  timeFormat: "%H:%i",
  longDateFormat: "%j %F %Y",
  fullDateFormat: "%j %F %Y %H:%i",
  am: "",
  pm: "",
  // Number formatting
  groupDelimiter: ".",
  decimalDelimiter: ",",
  decimalSize: 2,
  // Currency formatting
  currencyCode: "MKD",
  currencySymbol: "ден.",
  currencyPosition: "right",
  // Calendar settings
  calendar: {
    monthFull: [
      "Јануари", "Февруари", "Март", "Април",
      "Мај", "Јуни", "Јули", "Август",
      "Септември", "Октомври", "Ноември", "Декември"
    ],
    monthShort: [
      "Јан.", "Фев.", "Мар.", "Апр.",
      "Мај", "Јун", "Јул", "Авг.",
      "Септ.", "Окт.", "Ноем.", "Дек."
    ],
    dayFull: [
      "Недела", "Понеделник", "Вторник", "Среда",
      "Четврток", "Петок", "Сабота"
    ],
    dayShort: ["Не", "По", "Вт", "Ср", "Че", "Пе", "Са"],
    hours: "Часови",
    minutes: "Минути",
    done: "Готово",
    clear: "Избриши",
    today: "Денес",
    monthSelect: true,
    yearSelect: true,
    yearsBefore: 100,
    yearsAfter: 100,
    weekStart: 1,
    narrow: true
  }
});

#javascript #nodejs #rest

Add an image to a PDF document via a REST service

//---------------------------------------------------------
// REST service to add an image to a PDF document
//---------------------------------------------------------
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const fs = require('fs');
const path = require('path');
const pdfLib = require('pdf-lib');

const app = express();
const port = process.env.PORT || 3000;

// Middleware
app.use(cors());
app.use(bodyParser.json());

// Routes
app.post('/api/addImageToPDF', async function(req, res) {
	const { pdfPath, imagePath, outputName } = req.body;

	// Read PDF file
	const pdfData = await fs.promises.readFile(pdfPath);

	// Read image file
	const imageData = await fs.promises.readFile(imagePath);

	// Load PDF document
	const pdfDoc = await pdfLib.PDFDocument.load(pdfData);

	// Embed image in PDF
	const image = await pdfDoc.embedPng(imageData);
	const page = pdfDoc.getPages()[0];
	const { width, height } = page.getSize();
	page.drawImage(image, {
		x: 0,
		y: height - image.height,
		width: image.width,
		height: image.height,
	});

	// Save modified PDF
	const outputPath = path.join(__dirname, 'modified', outputName);
	const modifiedPdfBytes = await pdfDoc.save();
	await fs.promises.writeFile(outputPath, modifiedPdfBytes);

	// Send response
	res.json({ success: true, message: 'Image added to PDF', url: `http://localhost:${port}/api/getModifiedPDF/${outputName}` });
});

app.get('/api/getModifiedPDF/:fileName', async function(req, res) {
	const { fileName } = req.params;
	const filePath = path.join(__dirname, 'arhiviran', `${fileName}-arhivirano-${new Date().toISOString().replace(/[^\d]/g, '')}.pdf`);
	
	// Read modified PDF file
	const pdfData = await fs.promises.readFile(filePath);

	// Create blob from PDF data
	const blob = new Blob([pdfData], { type: 'application/pdf' });

	// Set response headers
	res.setHeader('Content-Type', 'application/pdf');
	res.setHeader('Content-Disposition', 'attachment; filename=modified.pdf');
	res.setHeader('Content-Length', pdfData.length);

	// Send response
	res.send(blob);
});

// Listen command
app.listen(port, function() {
	console.log(`Server is running on port ${port}`);
});
//---------------------------------------------------------


//---------------------------------------------------------
// How to call the service (client side) with a file name
//---------------------------------------------------------
// Create a FormData object to send the file data
var fileData = new FormData();
fileData.append('file', 'sample.pdf');

// Send the AJAX request to modify the PDF file
$.ajax({
	url: '/modify-pdf',
	method: 'POST',
	data: fileData,
	processData: false,
	contentType: false,
	success: function(data) {
		console.log('File modified successfully. Modified file URL:', data.url);
	},
	error: function() {
		console.error('Error modifying file.');
	}
});

//---------------------------------------------------------
// Send the AJAX request to get the modified PDF file as a blob
//---------------------------------------------------------
$.ajax({
	url: '/get-modified-pdf',
	method: 'GET',
	success: function(data) {
		// Create a blob URL from the received blob
		var blobUrl = URL.createObjectURL(data);
		
		// Create an anchor element to download the file
		var downloadLink = $('<a>')
			.attr('href', blobUrl)
			.attr('download', 'modified.pdf')
			.text('Download modified PDF file');
			
		// Add the anchor element to the page
		$('body').append(downloadLink);
	},
	error: function() {
		console.error('Error getting modified file.');
	}
});
//---------------------------------------------------------

#javascript

Object Type Checking

function checkType(value, expectedType, propName) {
  if (typeof value !== expectedType) {
    throw new Error(`Invalid ${propName} type. Expected ${expectedType}.`);
  }
}

function checkInstance(value, expectedInstance) {
  if (!(value instanceof expectedInstance)) {
    const expectedName = expectedInstance.constructor.name;
    throw new Error(`Invalid type. Expected ${expectedName} instance.`);
  }
}

class Person {
  constructor(id, name, age, isActive, hobbies, address) {
    checkType(id, 'number', "id");
    checkType(name, 'string', "name");
    checkType(age, 'number', "age");
    checkType(isActive, 'boolean', "isActive");
    checkType(hobbies, 'object', "hobbies");
    checkInstance(address, Address);

    this.id = id;
    this.name = name;
    this.age = age;
    this.isActive = isActive;
    this.hobbies = hobbies;
    this.address = address;
  }
}

class Address {
  constructor(city, country, street) {
    checkType(city, 'string', "city");
    checkType(country, 'string', "country");
    checkInstance(street, Street);

    this.city = city;
    this.country = country;
    this.street = street;
  }
}

class Street {
  constructor(name, number, apartment) {
    checkType(name, 'string', "name");
    checkType(number, 'number', "number");
    checkInstance(apartment, Apartment);

    this.name = name;
    this.number = number;
    this.apartment = apartment;
  }
}

class Apartment {
  constructor(floor, number) {
    checkType(floor, 'number', "floor");
    checkType(number, 'number', "number");

    this.floor = floor;
    this.number = number;
  }
}

class PersonBuilder {
  constructor(personData) {
    const person = this.#buildPerson(personData);
    Object.assign(this, person);
  }

  #buildApartment(apartmentData) {
    const { floor, number } = apartmentData;
    return new Apartment(floor, number);
  }

  #buildStreet(streetData) {
    const { name, number, apartment } = streetData;
    const apartmentObj = this.#buildApartment(apartment);
    return new Street(name, number, apartmentObj);
  }

  #buildAddress(addressData) {
    const { city, country, street } = addressData;
    const streetObj = this.#buildStreet(street);
    return new Address(city, country, streetObj);
  }

  #buildPerson(personData) {
    const { id, name, age, isActive, hobbies, address } = personData;
    const addressObj = this.#buildAddress(address);
    return new Person(id, name, age, isActive, hobbies, addressObj);
  }
}

const personData = {
  id: 1,
  name: 'John Doe',
  age: 30,
  isActive: true,
  hobbies:{},
address: {
    city: 'Cityville',
    country: 'Countryland',
    street: {
      name: 'Main Street',
      number: 123,
      apartment: {
        floor: 2,
        number: 201
      }
    }
  }
};

const personBuilder = new PersonBuilder(personData);

console.log(personBuilder);

#javascript

Fixed Table Header

https://codepen.io/vordan/pen/NWGamOz?editors

#javascript #html

Building a dialog component

https://web.dev/building-a-dialog-component/

#javascript #html

Building a lightbox with the Dialog element | Polypane, The browser for ambitious web developers

https://polypane.app/blog/building-a-lightbox-with-the-dialog-element/

#javascript #css

Make Your CSS Dynamic with CSS Custom Properties

Changing the Value of a Custom Property Using JavaScript
I’ve been mentioning throughout this whole article that variables can be updated using JavaScript, so let’s get into that.

Say you have a light theme and want to switch it to a dark theme, assuming you have some CSS like the following:

```css
:root {
  --text-color: black;
  --background-color: white;
}

body {
  color: var(--text-color);
  background: var(--background-color);
}
```

You can update the `--text-color` and `--background-color` custom properties by doing the following:

```js
var bodyStyles = document.body.style;
bodyStyles.setProperty('--text-color', 'white');
bodyStyles.setProperty('--background-color', 'black');
```

#javascript

setting current day to today. using switch statement

let today = new Date();
  let currentDay = today.getDay();
  let day = "";

  switch (currentDay) {
    case 1:
      day = "Monday";
      break;
    case 2:
      day = "Tuesday";
      break;
    case 3:
      day = "Wednesday";
      break;
    case 4:
      day = "Thursday";
      break;
    case 5:
      day = "Friday";
      break;
    case 6:
      day = "Saturday";
      break;
    case 0:
      day = "Sunday";
    default:
      console.log("Error: Current day is equal to: " + currentDay);
      break;
  }

#javascript

string match in the array

let arr = [
  1,
  "Computer Science",
  5,
  "Computer security",
  6,
  "Graphic design",
  4,
  "Programming language",
  3,
  "Software engineering",
  2,
  "Web Designing",
];
let matchName = "Computer Science";
let num = 0;
arr.map((ele) => {
  ele == matchName ? num++ : "none are match";
});
num > 0
  ? console.log("item are already in the array")
  : console.log("item are not mathced");

#javascript

Boilerplate for creating server

const express = require("express");
const bodyParser = require("body-parser");
const request = require("request");

const app = express();

app.use(express.static(__dirname + "/public"));

app.use(bodyParser.urlencoded({ extended: true }));

app.get("/", function(req, res) {
res.sendFile(__dirname + "/signup.html");
});

app.post("/", function(req, res){
app
})

app.listen(3000, function () {
  console.log("Server is running on port 3000.");
});

#javascript

the reduce method that get only one item from the all of the array::

let arrNum = [10, 20, 30, 40, 50, 60];
let reducedArr = arrNum.reduce(function (f , s) {
    // (f) for the first element (s) for the seconde element ;
    return f *= s;
});
console.log("reduced Array" , reducedArr);

#javascript

JavaScript string match from the array of the object (this is done by the map with the filter)

let demoData = [
  [
    { name: "Himanshu", age: 30 },
    { name: "KK", age: 29 },
  ],
  [
    { name: "preyansh", age: 30 },
    { name: "aki", age: 29 },
  ],
];
let uName = "K";
let matched = [];
let notMatched = [];
let mapingData = demoData.map((element, index, array) => {
  return element.filter((innerEle) => {
    return (innerEle.name.toLowerCase().includes(uName.toLowerCase())) ? done.push(innerEle) : wrong.push(innerEle);
  })
});
console.log(done);

#javascript

Filter array by value

// Find the first element with id = 2
const objToFind = myArray.find(obj => obj.id === 2);
console.log(objToFind); // { id: 2, name: 'Jane' }

#javascript #select2 #fontawesome

Select2 with search icon in placeholder

var placeholder = "&#xf002 Select a place";
$(".select2").select2({
  placeholder: placeholder,
  escapeMarkup: function(m) { 
    return m; 
  }
});

#javascript #select2 #fontawesome

Select2 with FontAwesome

<select class="select2-icon" name="icon">
    <option value="fa-user" data-icon="fa-user">user</option>
    <option value="fa-user-circle" data-icon="fa-user-circle">user-circle</option>
    <option value="fa-user-tie" data-icon="fa-user-tie">user-tie</option>
    <option value="fa-user-secret" data-icon="fa-user-secret">user-secret</option>
    <option value="fa-user-ninja" data-icon="fa-user-ninja">user-ninja</option>
</select>


<script>
  function formatText (icon) {
      return $('<span><i class="fas ' + $(icon.element).data('icon') + '"></i> ' + icon.text + '</span>');
  };
  $('.select2-icon').select2({
      width: "50%",
      templateSelection: formatText,
      templateResult: formatText
  });
</script>

#javascript

jQuery Event : Detect changes to the html/text of a div - Stack Overflow

$('mydiv').on('DOMSubtreeModified', function(){
  console.log('changed');
});

#javascript

protected routes

import React, { useEffect, useState } from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import Topbar from "./scenes/global/Topbar";
import Dashboard from "./scenes/dashboard";
import DashboardSales from "./scenes/dashboardsales/index";
import DashboardMerchant from "./scenes/dashboardmerchandiser/index";
import Contacts from "./scenes/contacts/index";
import MerchantInfo from "./scenes/contacts/app";
import Form from "./scenes/form/index.js";
import Merchant from "./scenes/merchant/app";
import { CssBaseline, ThemeProvider } from "@mui/material";
import { ColorModeContext, tokens, useMode } from "./theme";
import Calendar from "./scenes/calendar/calendar";
import GoogleMap from "./scenes/maps/maps";
import RoutePlan from "./scenes/routeplan/RoutePlan";
import Home from "./Home";
import SignUpAdmin from "./SignAdmin";
import LoginAdmin from "./LoginAdmin";
import LoginSales from "./LoginSales";
import LoginMerchant from "./LoginMerchant";
import ProtectedRoute from "./ProtectedRoute";


function App() {
  const [theme, colorMode] = useMode();
  const [isSidebar, setIsSidebar] = useState(true);

  const [isAuthenticated, setIsAuthenticated] = useState(false);

  // function setAuthState(state) {
  //   setIsAuthenticated(state)
  // }
  useEffect(() => {
    const token = localStorage.getItem("jwt");
    console.log({ token });

  }, [isAuthenticated]);

  return (
    <ColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <div className="app">
          <main className="content">
            <Topbar setIsSidebar={setIsSidebar} />
            <Routes>
              <Route path="/" element={<Home />} />

              <Route path="/signup-admin" element={<SignUpAdmin />} />
              <Route path="/admin-log" element={<LoginAdmin />} />
              <Route path="/sales-log" element={<LoginSales />} />
              <Route path="/merchant-log" element={<LoginMerchant />} />
              {/* protect routesclear */}

              <Route
                path="/admin"
                element={
                  <ProtectedRoute
                    element={Dashboard}
                    isAuthenticated={isAuthenticated}
                  />
                }
              />
              <Route
                path="/sales"
                element={
                  <ProtectedRoute
                    element={DashboardSales}
                    isAuthenticated={isAuthenticated}
                  />
                }
              />
              <Route
                path="/merchant"
                element={
                  <ProtectedRoute
                    element={DashboardMerchant}
                    isAuthenticated={isAuthenticated}
                  />
                }
              />
              <Route
                path="/contacts"
                element={
                  <ProtectedRoute
                    element={Contacts}
                    isAuthenticated={isAuthenticated}
                  />
                }
              />
              <Route
                path="/merchantInfo"
                element={
                  <ProtectedRoute
                    element={MerchantInfo}
                    isAuthenticated={isAuthenticated}
                  />
                }
              />
              <Route path="/form" element={<Form />} />
              <Route path="/form-merchant" element={<Merchant />} />
              <Route path="/calendar" element={<Calendar />} />
              <Route path="/maps" element={<GoogleMap />} />
              <Route path="/routeplans" element={<RoutePlan />} />
            </Routes>
          </main>
        </div>
      </ThemeProvider>
    </ColorModeContext.Provider>
  );
}

export default App;

#javascript #localstorage #html

Javascript Code for Local Storage

function doFirst(){
    var button = document.getElementById('button');
    button.addEventListener("click",save,false);
}

function save(){
    var FirstName = document.getElementById('FName').value;
    var LastName = document.getElementById('LName').value;
    localStorage.setItem(FirstName, LastName);
}


if(sessionStorage && window.onload === true){
    sessionStorage.clear('Fname', 'LName');
}

window.addEventListener("load",doFirst,false);

#javascript

auth

import React, { useEffect, useState } from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import Topbar from "./scenes/global/Topbar";
import Dashboard from "./scenes/dashboard";
import DashboardSales from "./scenes/dashboardsales/index";
import DashboardMerchant from "./scenes/dashboardmerchandiser/index";
import Contacts from "./scenes/contacts/index";
import MerchantInfo from "./scenes/contacts/app"
import Form from "./scenes/form/index.js";
import Merchant from "./scenes/merchant/app";
import { CssBaseline, ThemeProvider } from "@mui/material";
import { ColorModeContext, useMode } from "./theme";
import Calendar from "./scenes/calendar/calendar";
import GoogleMap from "./scenes/maps/maps";
import RoutePlan from "./scenes/routeplan/RoutePlan";
import Home from './Home'
import SignUpAdmin from "./SignAdmin";
import LoginAdmin from "./LoginAdmin";
import LoginSales from "./LoginSales";
import LoginMerchant from "./LoginMerchant";

function App() {
  const [theme, colorMode] = useMode();
  const [isSidebar, setIsSidebar] = useState(true);

  const [isAuthenticated, setIsAuthenticated] = useState(false);
    useEffect(() => {
      const token = localStorage.getItem("jwt");
      console.log({token});
    
      if (!token) {
        setIsAuthenticated(false);
      } else {
        setIsAuthenticated(true);
      }
    }, []);

  return (
    <ColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <div className="app">
          <main className="content">
            <Topbar setIsSidebar={setIsSidebar} />
            <Routes>
              {/* protect routesclear */}
              <Route path="/admin" element={isAuthenticated?<Navigate replace to="/admin" />: <Navigate replace to="/" />} />
              <Route path="/sales" element={isAuthenticated?<Navigate replace to="/sales" />: <Navigate replace to="/" />} />
              <Route path="/merchant" element={isAuthenticated?<Navigate replace to="/merchant" />: <Navigate replace to="/" />} />
              <Route path="/contacts" element={isAuthenticated?<Navigate replace to="/contacts" />: <Navigate replace to="/" />} />
              <Route path="/merchantInfo" element={isAuthenticated?<Navigate replace to="/merchantInfo" />: <Navigate replace to="/" />} />
              <Route path="/form" element={isAuthenticated?<Navigate replace to="/form" />: <Navigate replace to="/" />} />
              <Route path="/form-merchant" element={isAuthenticated?<Navigate replace to="/form-merchant" />: <Navigate replace to="/" />} />
              <Route path="/calendar" element={isAuthenticated?<Navigate replace to="/calendar" />: <Navigate replace to="/" />} />
              <Route path="/maps" element={isAuthenticated?<Navigate replace to="/maps" />: <Navigate replace to="/" />} />
              <Route path="/routeplans" element={isAuthenticated?<Navigate replace to="/routeplans" />: <Navigate replace to="/" />} />

              <Route path ="/"  element={<Home/>}/>
              <Route path="/signup-admin" element={<SignUpAdmin />} />
              <Route path="/admin-log" element={<LoginAdmin />} />
              <Route path="/sales-log" element={<LoginSales />} />
              <Route path="/merchant-log" element={<LoginMerchant />} />
              <Route path="/admin" element={<Dashboard />} />
              <Route path="/sales" element={<DashboardSales />} />
              <Route path="/merchant" element={<DashboardMerchant />} />
              <Route path="/contacts" element={<Contacts />} />
              <Route path="/merchantInfo" element={<MerchantInfo />} />

              <Route path="/form" element={<Form />} />
              <Route path="/form-merchant" element={<Merchant />} />

              <Route path="/calendar" element={<Calendar />} />
              <Route path="/maps" element={<GoogleMap/>}/>
              <Route path="/routeplans" element={<RoutePlan />}/>
            </Routes>
          </main>
        </div>
      </ThemeProvider>
    </ColorModeContext.Provider>
  );
}
export default App;

#javascript

Stock span problem | Practice | GeeksforGeeks

calculateSpan(price, n)
    { var ans=[];
   
       var stack=[];
     for(var i=0;i<n;i++)
        { if(stack.length==0)
        ans.push(-1);
        else if(stack.length>0 && stack[stack.length-1][0]>price[i])
            { ans.push(stack[stack.length-1][1])
                
            }
            else if(stack.length>0 && stack[stack.length-1][0]<=price[i])
          { while(stack.length>0 && stack[stack.length-1][0]<=price[i])
              { stack.pop()
              }
              if(stack.length==0)
        ans.push(-1);
         else  { ans.push(stack[stack.length-1][1])
            
        }
           
      
        } stack.push([price[i],i]);
        }
      for(var i=0;i<n;i++)
      { ans[i]=i-ans[i]
          
      }
       return ans;
    }

#javascript

Mock react i18n

jest.mock('react-i18next', () => {
  return {
    useTranslation: () => ({ t: (key: string) => key }),
  };
});

#css #javascript

tailwind config

module.exports = {
  content: ['./src/**/*.{html,js,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primaryColor: '#E17446',
        primaryColorHover: '#db5b24',
        primaryText: '#111130',
        primaryBlue: '#2b5a9c',
        textLight: '#9e9ebc',
        Gray: '#8f9bad',
        f6f9fd: '#f6f9fd',
        dddddd: '#dddddd',
        inputborder: '#e8e8e8',
        borderColor: '#ebebeb',
        green: '#008f02',
        lightGreen: '#e2f2e2',
        orange: '#f05c00',
        orangeLight: '#fcede4',
        redLight: '#fde5e5',
        red: '#f00000',
        border1: '#ebebeb',

        themecolor: '#E17446',
        hoverthemecolor: '#db5b24',
      },
      backgroundImage: {
        close: 'url(/public/images/colse.png)',
        trendBG1: 'url(../../public/images/blog-img.jpg)',
      },
      boxShadow: {
        inputFocus:
          'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px',
        headerFix: 'rgba(0, 0, 0, 0.1) 0px 10px 50px',
        sibarToggle: '-4px 5px 5px #0000000d',
        sibarToggleRTL: '5px -4px 6px #0000000d',
      },
      spacing: {
        '5px': '5px',
        '10px': '10px',
        '14px': '14px',
        '15px': '15px',
        '18px': '18px',
        '20px': '20px',
        '25px': '25px',
        '30px': '30px',
        '35px': '35px',
        '40px': '40px',
        '45px': '45px',
        '50px': '50px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        '106px': '106px',
        '120px': '120px',
        unset: 'unset',
      },
      fontFamily: {
        charter: 'var(--charterFont)',
        sohne: 'var(--sohneFont)',
        poppins: 'var(--poppins)',
        gloock: 'var(--gloock)',
      },
      fontSize: {
        0: '0',
        '5px': '5px',
        '10px': '10px',
        '14px': '14px',
        '15px': '15px',
        '16px': '16px',
        '17px': '17px',
        '20px': '20px',
        '22px': '22px',
        '25px': '25px',
        '28px': '28px',
        '30px': '30px',
        '35px': '35px',
        '40px': '40px',
        '45px': '45px',
        '50px': '50px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        unset: 'unset',
      },
      lineHeight: {
        1: '1',
        '5px': '5px',
        '10x': '10px',
        '15px': '15px',
        '19px': '19px',
        '22px': '22px',
        '20px': '20px',
        '25px': '25px',
        '28px': '28px',
        '30px': '30px',
        '32px': '32px',
        '35px': '35px',
        '36px': '36px',
        '40px': '40px',
        '42px': '42px',
        '46px': '46px',
        '45px': '45px',
        '50px': '50px',
        '52px': '52px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        unset: 'unset',
        Normal: 'normal',
      },
      zIndex: {
        1: '9',
        2: '99',
        3: '999',
        4: '9999',
        5: '99999',
        6: '999999',
      },
      borderRadius: {
        '5px': '5px',
        '10px': '10px',
        '15px': '15px',
      },
      screens: {
        768: '768px',
        992: '992px',
        1200: '1200px',
        1300: '1300px',
        1400: '1400px',
        1500: '1500px',
        1600: '1600px',
        1700: '1700px',
      },
      animation: {
        slow: 'wiggle 2s linear',
      },
      keyframes: {
        wiggle: {
          '0%': { transform: 'transform(164.25px)' },
          '100%': { transform: 'rotate(0px)' },
        },
      },
    },
  },
}

#javascript

javascript

var object = {
  "main": [{
    "id": "123",
    "name": "name 1"
  }, {
    "id": "234",
    "name": "name 2"
  }]
};
var toFind = "name 1";
var filtered = object.main.filter(function(el) {
  return el.name === toFind;
});

document.write(filtered);

#javascript

Dual listbox example

<select class="select1" multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<script>
    let dlb1 = new DualListbox('.select1');
</script>

#javascript

function comparing two arrays and returning a Boolean

const sandwichOne = ["white bread", "lettuce", "brown bread"];
const sandwichTwo = ["white bread", "tomato", "white bread"];

function compareBread(array1,array2) {
     let sameBread;
     if ((array1[0] === array2[0]) && (array1[array1.length - 1] === array2[array2.length - 1])) {
         console.log("Both tops and bottoms are the same!");
         return true;
     } else {
         console.log("They both use different bread -- WEIRDO!");
         return false;
     }
}

compareBread(sandwichOne,sandwichTwo);

#javascript

function looping through array with if-else

let myFriends = ["John", "Jane", "Irma", "Anna"];

// -- My friends are ${friend}.

function createSentence(friends) {
    let friendsStr = "";
    for (let i = 0; i < friends.length; i++) {
        if (i === 0) {
        friendsStr += friends[i];
        } else if (i === friends.length-1) {
            friendsStr += ", and " + friends[i];
        }
        else {
        friendsStr += ", " + friends[i];
        }
    }
    let sentence = `My friends are ${friendsStr}!`;
    return sentence;
}
console.log(createSentence(myFriends));

#javascript #space #replacespace #html

Custom text selection

//html code
<p class="custom-text-selection">Select some of this text.</p>

//css code
::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

#database #postgresql #nodejs #indiafirst #javascript #pgadmin4

PostgreSql-> Table exist check query

SELECT EXISTS (
   SELECT FROM information_schema.tables 
   WHERE  table_schema = 'public'
   AND    table_name   = 'abcd'
   );

#javascript

javascript - What limitations apply to opaque responses? - Stack Overflow

const request = new Request('https://third-party-no-cors.com/', {
  mode: 'no-cors',
});

// Assume `cache` is an open instance of the Cache class.
fetch(request).then(response => cache.put(request, response));

#javascript #space #replacespace

replace space with dash JavaScript - Stack Overflow

alert("this is a test".split(" ").join("-"));

//or

title.replace(/\s/g , "-");

#javascript

Fibonacci Sequence

function fibonacciGenerator (n) {
    let output = []
    if (n === 1) { 
        return output=[0]
    }
    else if (n === 2) { 
        return output=[0,1]
    }
    else {
output=[0,1]
for (let i=2; i<n; i++) {
      output.push(output[output.length-2] + output[output.length-1]); 
        }  
return output 
}  
}

#javascript

99 bottles song

let numOfBottles = 99
let lyrics = []
function beerSong() {
while (numOfBottles >=0) {
}
console.log(numOfBottles + " bottles of beer on the wall " + numOfBottles + " bottles of beer. Take one down and pass it around, " + numOfBottles + " bottles of beer on the wall.");
    
numOfBottles--;
}

#javascript

Whos buying lunch

function whosPaying(names) {
    
names = ["Angela", "Ben", "Jenny", "Michael", "Chloe"]
 
    let nameChosen = names[names.length *Math.random() | 0];
 
    return nameChosen + " is going to buy lunch today!";
 
}

#javascript

FizzBuzz

let output = [];

function fizzbuzz() {
    
  for (let count = 1; count <= 100; count++) {
    if (count % 3 === 0 && count % 5 === 0) {
      output.push("Fizzbuzz");
    } else if (count % 3 === 0) {
      output.push("Fizz");
    } else if (count % 5 === 0) {
      output.push("Buzz");
    } else {
      output.push(count);
    }
    count++;
  }
    
}

fizzbuzz();

#javascript

Leap Year

function isLeap(year) {  
    
    //Write your code here.    


if (year % 4 !== 0) {
    return "Not leap year."
}

if (year % 4 === 0 && year % 100 !== 0)  {
    return "Leap year."
}

if (year % 4 === 0 && year % 100 === 0 && year % 400 === 0) {
    return "Leap year"
}

}

#javascript

creating a simple function

function displayCash() {
 const money = 100;
 const currency = " Euros";
 console.log(money + currency);
}
displayCash();

#javascript

for loop pushing array items in reverse (decrement)

const chores = ["sweep", "mop", "laundry"];
const priority = [];
for (i = (chores.length - 1); i >= 0; i--) {
  priority.push(chores[i]);
}
console.log(priority);

#javascript

push existing array items into new array

const topTen = ['Jack Reacher', 'Beautiful Creatures', 'Safe Haven',
  'Side Effects', 'The Last Stand', 'Silver Linings Playbook', 'Broken City',
  'Cloud Atlas', 'Parker', 'Eternals'
];
const topThree = [];
for (i = 0; i < 3; i++) {
  topThree.push(topTen[i]);
}
console.log(topThree);

#javascript

for loop pushing numbers into an array

const myNumbers = [];
for (let i = 1; i < 1001; i++) {
  myNumbers.push(i);
}
console.log(`The array now has ${myNumbers.length} numbers as elements.`);

#javascript

using reduce on even values of an array

let numbers = [5, 10, 12, 13, 17, 20, 21, 28];

let sumOfEvens = numbers.reduce((total,active) => {
    if (active % 2 === 0) {
        return active + total;
    console.log (`checking...even!`);
    }
    return total
}
, 0);

console.log (sumOfEvens);

#javascript

using reduce method on a string array

let letters = ["M", "I", "M", "O"];

// console.log(letters);

let name = letters.reduce((total,active) => total + active, "");
if (name === "MIMO") {
    console.log(`Success! "${name}" is correct!`)
} else {
    console.log (`Error 0: You suck!`)
}

#javascript

Love Calculator

//prompt for names
 
let name1 = prompt("What is your name?")
let name2 = prompt("What is your crush's name?")
//calculate random number between 1-100
 
let loveScore = Math.random()* 100;
loveScore = Math.floor(loveScore) + 1;
 
 
//alert user their percentage
//alert(name1 + " and " + name2 + ", your love score is " + loveScore + "%");

// alert using conditions
if (loveScore === 100) {
    alert("Wow, " + name1 + " and " + name2 + ", your love score is " + loveScore + "%" + " you have a special kind of love! Marry each other right now!")
} 

if (loveScore > 30 && loveScore <= 99) {
    alert(name1 + " and " + name2 + ", your love score is " + loveScore + "%. Take your chances or go with your gut")
} 

if (loveScore <= 30) {
    alert ("oh dear, " + name1 + " and " + name2 + ", your love score is " + loveScore + "%. Your score is like mixing oil and water")
}

#javascript

Create a random number

//Random Number Generation

var n = Math.random();
console.log(n);

//number will be between 0 and 0.9(to 16 decimal places)

//this will give 0-6 s adding 1 to every answer gives the numbers on a dice
//multiply by whatever range you need

n =  n * 6;

n = Math.floor(n) +1;
//called a pseudo random number generator

#javascript

BMI Calculator

function bmiCalculator (weight, height) {
    
   let bmi = Math.round(weight / (Math.pow(height, 2)));
  
  let interpretation = bmi
  
   if (bmi < 18.5) {
        return "Your BMI is " + bmi + ", so you are underweight.";
    }
    if (bmi >= 18.5 && bmi <= 24.9) {
        return "Your BMI is " + bmi + ", so you have a normal weight.";
    }
    
    if (bmi > 24.9) {
        return "Your BMI is " + bmi + ", so you are overweight.";
    }
  
  
   return interpretation;
}

#javascript

Publish messages for Demo

var testData = {
	name: 'filtered',
       data: 'This should be filtered',
	extras: {
         headers: {
           name: 'update',
           categpory: 'computing',
           location: 'London',
	    product: '"Laptop"',
    quantity: '10' 
         },
       },
     };
     var filterOption = {
       filter: 'headers.category == `"Computing"` && headers.location == `London`',
     };
...
/* set up realtime */
....
var rtChannel = realtime.channels.getDerived('chan', filterOption);
/* subscribe to event */
 rtChannel.subscribe('filtered', function (msg) {

#javascript

Creating and calling function example

function getMilk (money) {
  // this will take take the money you put in and use the modula to find the change received (remainder) when you divide the money by 1.5 and return the total
  return money % 1,5;
}
// this variable saves the result of running the function
let change = getMilk(4)

#javascript

Working out life left in days months and years

function lifeInWeeks(age) {   
    
    //Write your code here.
    let x = age
    let monthsLeft = (90 - x) * 12
    let weeksLeft = ((90-x) * 52)
    let daysLeft = ((90-x) * 365)
    
    console.log("You have " + daysLeft + " days, " + weeksLeft + " weeks, and " +  monthsLeft + " months left to live");

}

#javascript

Tells a robot home bottles of milk to get based on how much money you give

//create function
function getMilk(money, costPerBottle) {//enclose all the instructions
  console.log("leaveHouse");
  console.log("moveRight");
  console.log("moveRight");
  console.log("moveUp");
  console.log("moveUp");
  console.log("moveUp");
  console.log("moveUp");
  console.log("moveRight");
  console.log("moveRight");
  //numOfBottles = however much money you put in () and divide by 1.5, rounded down to the nearest whole number
    
    console.log("buy " + calcBottles(money, costPerBottle) + " bottles of milk");
  console.log("moveLeft");
  console.log("moveLeft");
  console.log("moveDown");
  console.log("moveDown");
  console.log("moveDown");
  console.log("moveDown");
  console.log("moveLeft");
  console.log("moveLeft");
  console.log("enterHouse");
  
  return calcChange(money, costPerBottle) ;
}

function calcBottles(startingMoney, costPerBottle) {
  let numberOfBottles = Math.floor(startingMoney / costPerBottle);
  
  return numberOfBottles;
}

function calcChange(startingMoney, costPerBottle) {
  let change = startingMoney % costPerBottle;
  return change;
}

//call the function
console.log("Hello Alana, here is you " + getMilk(5, 1.5) + " change.");

#javascript

Create a function

//create function

// function --> name of function --> () {}

function getMilk() {
    //enclose all the instructions
}

//call the function
getMilk();

#javascript

increment and decrement

x++ //increment expression
//is equal to x+1

x-- //decrement expression
//is equal to -1

x=2
y=5
x += y // =7

// +=
// -=
// *=
// /=

#javascript

How old is your dog in human years

let dogAge = prompt("How old is your dog?");

let humanAge = ((dogAge-2)*4)+21;

alert("Your dog is " + humanAge + "in human years");

#javascript

Change first letter to capital and the rest to lowercase

let name = prompt("What is your Name?");
let firstLettertoCapital = name.slice(0,1).toUpperCase()
let nameChangetoLowerCase = name.slice(1, name.length).toLowerCase()

//name.toUpperCase();

alert ("Hello, " + firstLettertoCapital + nameChangetoLowerCase)

#javascript

Subscribe to a channel with a filter expression which determines which messages you will receive on that channel. This is done with a special qualifier called filter on the channel name which accepts the filter expression as a parameter.

realtime.channels.get(
  `[filter=${urlencode("headers.key_2 == `2` || headers.key_3 == true")}]foo`
).subscribe(...);

#javascript

Slices a tweet after 140 characters

var name = "Alana"

name.slice(1,4);

// will give l, a, n
// 4-1=3 so you will get 3 characters
// 1 starts at the 2nd letter. 4 stops up to but not including the 5th letter

alert(prompt("Compose your tweet:").slice(0,140));
// allows you to compose your tweet up to 140 characters and no more

#javascript

How to publish messages with Subscription Filters

realtime.channels.get('foo').publish({
    name: 'foo',
    data: 'msg',
    extras: {
        headers: {
            key_1: "value-1",
            key_2: 2,
            key_3: true,
        }
    }
});

#javascript

Count letters in tweet

let tweet = prompt("Compose your tweet:");
let tweetCount = tweet.length

alert ("You have written " + tweetCount " characters. You have " + (140 - tweetCount) + " chracters remaining.");

#javascript

Current date

function currentDate() {
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const format = n => n < 10 ? '0' + n : n;
    return year + '-' + format(month) + '-' + format(day);
}

#javascript

Random number

function rand() {
    return Math.floor(Math.random() * 1_000_000);
}

#javascript

Node.js: what is ENOSPC error and how to solve? - Stack Overflow

sysctl --system

#javascript

Node.js: what is ENOSPC error and how to solve? - Stack Overflow

fs.inotify.max_user_watches=524288

#javascript

Node.js: what is ENOSPC error and how to solve? - Stack Overflow

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

#javascript

user select

import React, { useState } from 'react';

const UserSelect = () => {
  const [selectedOption, setSelectedOption] = useState(""); // Initialize selectedOption state

  const handleChange = (event) => {
    const selectedValue = event.target.value;
    setSelectedOption(selectedValue); // Update selectedOption state

    // Redirect to appropriate login page based on selected option
    switch(selectedValue) {
      case "admin":
        window.location.href = "/admin-login"; // Replace with the actual URL of your admin login page
        break;
      case "sales-manager":
        window.location.href = "/log-manager"; // Replace with the actual URL of your sales manager login page
        break;
      case "merchants":
        window.location.href = "/log-merchant"; // Replace with the actual URL of your merchant login page
        break;
      default:
        // Code for default option
        break;
    }
  }

  return (
    <div>
      <label htmlFor="users">Users:</label>
      <select name="user" id="users" placeholder="select user" onChange={handleChange}>
        <option value="">Select User</option>
        <option value="admin">Admin</option>
        <option value="sales-manager">Sales Manager</option>
        <option value="merchants">Merchants</option>
      </select>
    </div>
  );
}

#javascript

SingleLogin

import React, { useState } from "react";
import { Navigate } from "react-router-dom";
import { Navbar, Nav, Container, Card, Form, Button } from "react-bootstrap";
const LoginPage = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [redirectTo, setRedirectTo] = useState(null);

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleLogin = (event) => {
    event.preventDefault();
    // Implement your login logic here
    // Assume that you get a response object with the user's role as a property
    const response = { role: "admin" }; // replace with your authentication logic
    switch (response.role) {
      case "admin":
        setRedirectTo("/admin");
        break;
      case "manager":
        setRedirectTo("/manager");
        break;
      case "merchant":
        setRedirectTo("/merchants");
        break;
      default:
        console.log("Invalid role");
        break;
    }
  };

  if (redirectTo) {
    return <Navigate to={redirectTo} />;
  }

  return (
    <>
      <Navbar bg="dark" variant="dark" expand="lg">
        <Container>
          <Navbar.Brand>The Merchandisers</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto">
              <Nav.Link>Contact Us</Nav.Link>
            </Nav>
            <Nav>
              <Nav.Link>Logout</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>

      <Container className="mt-4 d-flex justify-content-center">
        <Card style={{ maxWidth: "500px" }}>
          <Card.Body>
            <h1>Product Smart</h1>
            <Form onSubmit={handleLogin}>
              <Form.Group controlId="formBasicUsername">
                <Form.Label></Form.Label>
                <Form.Control
                  type="text"
                  placeholder="enter username"
                  value={username}
                  onChange={handleUsernameChange}
                />
              </Form.Group>

              <Form.Group controlId="formBasicPassword">
                <Form.Label></Form.Label>
                <Form.Control
                  type="password"
                  placeholder="enter password"
                  value={password}
                  onChange={handlePasswordChange}
                />
              </Form.Group>
              <br />

              <Button variant="primary" type="submit">
                Login
              </Button>
              <br />
            </Form>
          </Card.Body>
        </Card>
      </Container>
      </>
  );
};

export default LoginPage;

#javascript

homepage

import React, { useState } from "react";
import { Navigate } from "react-router-dom";
import { Navbar, Nav, Container, Card, Form, Button } from "react-bootstrap";

const LoginPage = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [redirectTo, setRedirectTo] = useState(null);

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleLogin = (event) => {
    event.preventDefault();
    // Implement your login logic here
    // Assume that you get a response object with the user's role as a property
    const response = { role: "admin" }; // replace with your authentication logic
    switch (response.role) {
      case "admin":
        setRedirectTo("/admin");
        break;
      case "manager":
        setRedirectTo("/manager");
        break;
      case "merchants":
        setRedirectTo("/merchants");
        break;
      default:
        console.log("Invalid role");
        break;
    }
  };

  if (redirectTo) {
    return <Navigate to={redirectTo} />;
  }

  return (
    <div>
      <Navbar bg="dark" variant="dark" expand="lg">
        <Container>
          <Navbar.Brand>The Merchandisers</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto">
              <Nav.Link>Contact Us</Nav.Link>
            </Nav>
            <Nav>
              <Nav.Link>Logout</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
      {/* login form */}
      <Container className="mt-4 d-flex justify-content-center">
        <Card style={{ maxWidth: "500px" }}>
          <Card.Body>
            <h1>Product Smart</h1>
            <Form onSubmit={handleLogin}>
              <Form.Group controlId="formBasicUsername">
                <Form.Label></Form.Label>
                <Form.Control
                  type="text"
                  placeholder="enter username"
                  value={username}
                  onChange={handleUsernameChange}
                />
              </Form.Group>

              <Form.Group controlId="formBasicPassword">
                <Form.Label></Form.Label>
                <Form.Control
                  type="password"
                  placeholder="enter password"
                  value={password}
                  onChange={handlePasswordChange}
                />
              </Form.Group>
              <br />

              <Button variant="primary" type="submit">
                Login
              </Button>
              <br />
            </Form>
          </Card.Body>
        </Card>
      </Container>
    </div>
  );
};

export default LoginPage;

#javascript

merchandiser template

import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import HomePage from './components/HomePage';
import LoginAdmin from './components/LoginAdmin';
import SignAdmin from './components/SignAdmin';
import LogManager from './components/LogManager';
import LogMerchant from './components/LogMerchant';
import AdminDashboard from './components/AdminDashboard';
import ManagerDashboard from './components/ManagerDashboard';
import MerchantDashboard from './components/MerchantDashboard';
import LogOut from './components/LogOut';
function App() {
  return (
    <Router>
      <div className="App">
        <div className="auth-wrapper">
          <div  className="auth-inner">
            <Routes>
              <Route exact path="/" element={<HomePage />} />
              <Route path="/sign-in" element={<LoginAdmin />} />
              <Route path="/sign-admin" element={<SignAdmin />} />
              <Route path="/dash-admin" element={<AdminDashboard />} />

              <Route path="/log-manager" element={<LogManager />} />
              <Route path="/dash-manager" element={<ManagerDashboard />} />
              <Route path="/log-merchant" element={<LogMerchant />} />
              <Route path="/dash-merchant" element={<MerchantDashboard />} />

              <Route path="/log-out" element={<LogOut />} />

            </Routes>
          </div>
        </div>
      </div>
    </Router>
  );
}

export default App;

#javascript

How to Add Authentication to React Applications | Hygraph

//SIGN UP API
router.post('/auth/signup', async (req, res) => {
  try {
    const {
      email, password, firstname, lastname,
    } = req.body;
    if (!email || !password || !firstname || !lastname) {
      res.status(400).end();
    }
    const hashedPassword = await bcrypt.hash(password, 8);
    const userData = {
      email,
      password: hashedPassword,
      firstname,
      lastname,
    };
    const response = await gqlClient.request(CreateNextUserMutation, { userData });
    if (!response?.createNextUser) {
      console.log('CreateUser Failed, Response: ', response);
      res.status(400).end()
    }
    const token = jwt.sign({ user: response.createNextUser }, JWT_SECRET, { expiresIn: JWT_EXPIRES_IN });
    res.send({ user: response.createNextUser, token });
  } catch (err) {
    console.log('POST auth/signup, Something Went Wrong: ', err);
    res.status(400).send({ error: true, message: err.message });
  }
});

#javascript

How to Add Authentication to React Applications | Hygraph

import React from 'react';
import { useUser } from '../lib/customHooks';


const Dashboard = () => {
  const { user, authenticated } = useUser();
  if (!user || !authenticated) {
    return <div className="p-16 bg-gray-800 h-screen">
        <div className="text-2xl mb-4 font-bold text-white">Dashboard</div>
        <div className="ml-2 w-8 h-8 border-l-2 rounded-full animate-spin border-white" />
      </div>;
  }


  return (
    <div className="p-16 bg-gray-800 h-screen">
      <div className="text-2xl mb-4 font-bold text-white"> Dashboard </div>
      {
        user &&
        <div className='text-white'>
          <div className="text-lg text-bold mb-2"> User Details </div>
          <div className="flex">
            <div className="w-24 font-medium">
              <div> Email : </div>
              <div> Firstname : </div>
              <div> Lastname : </div>
            </div>
            <div>
              <div> {user.email} </div>
              <div> {user.firstname} </div>
              <div> {user.lastname} </div>
            </div>
          </div>
        </div>
      }
    </div>
  );
}


export default Dashboard;

#javascript

How to Add Authentication to React Applications | Hygraph

import React from 'react';
import axios from 'axios';
import { useState } from 'react';
import { API_ROUTES, APP_ROUTES } from '../utils/constants';
import { Link, useNavigate } from 'react-router-dom';
import { useUser } from '../lib/customHooks';
import { storeTokenInLocalStorage } from '../lib/common';


const SignIn = () => {
  const navigate = useNavigate();
  const { user, authenticated } = useUser();
  if (user || authenticated) {
    navigate(APP_ROUTES.DASHBOARD)
  }


  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);


  const signIn = async () => {
    try {
      setIsLoading(true);
      const response = await axios({
        method: 'post',
        url: API_ROUTES.SIGN_IN,
        data: {
          email,
          password
        }
      });
      if (!response?.data?.token) {
        console.log('Something went wrong during signing in: ', response);
        return;
      }
      storeTokenInLocalStorage(response.data.token);
      navigate(APP_ROUTES.DASHBOARD)
    }
    catch (err) {
      console.log('Some error occured during signing in: ', err);
    }
    finally {
      setIsLoading(false);
    }
  };




  return (
    // SIGN IN FORM TEMPLATE
  );
}


export default SignIn;

#javascript

How to Add Authentication to React Applications | Hygraph

import React from 'react';
import axios from 'axios';
import { useState } from 'react';
import { API_ROUTES, APP_ROUTES } from '../utils/constants';
import { Link, useNavigate } from 'react-router-dom';


const SignUp = () => {
  const navigate = useNavigate()
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [firstname, setFirstname] = useState('');
  const [lastname, setLastname] = useState('');
  const [isLoading, setIsLoading] = useState(false);




  const signUp = async () => {
    try {
      setIsLoading(true);
      const response = await axios({
        method: 'POST',
        url: API_ROUTES.SIGN_UP,
        data: {
          email,
          password,
          firstname,
          lastname
        }
      });
      if (!response?.data?.token) {
        console.log('Something went wrong during signing up: ', response);
        return;
      }
      navigate(APP_ROUTES.SIGN_IN);
    }
    catch (err) {
      console.log('Some error occured during signing up: ', err);
    }
    finally {
      setIsLoading(false);
    }
  };


  return (
    // SIGN UP FORM TEMPLATE
  );
}


export default SignUp;

#javascript

How to Add Authentication to React Applications | Hygraph

import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
import Dashboard from './components/Dashboard';
import SignIn from './components/SignIn';
import SignUp from './components/SignUp';
import { APP_ROUTES } from './utils/constants';


function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route exact path="/" element={<Navigate to={APP_ROUTES.DASHBOARD} />} />
        <Route path={APP_ROUTES.SIGN_UP} exact element={<SignUp />} />
        <Route path={APP_ROUTES.SIGN_IN} element={<SignIn />} />
        <Route path={APP_ROUTES.DASHBOARD} element={<Dashboard />} />
      </Routes>
    </BrowserRouter>
  );
}


export default App;

#javascript

single login

import React, { useState } from 'react';
import { Navigate } from 'react-router-dom';
import { Navbar, Nav, Container, Card, Form, Button } from 'react-bootstrap';

const LoginPage = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [redirectTo, setRedirectTo] = useState(null);

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleLogin = (event) => {
    event.preventDefault();
    // Implement your login logic here
    // Assume that you get a response object with the user's role as a property
    const response = { role: 'admin' }; // replace with your authentication logic
    switch (response.role) {
      case 'admin':
        setRedirectTo('/admin');
        break;
      case 'manager':
        setRedirectTo('/manager');
        break;
      case 'manager':
        setRedirectTo('/merchants');
        break;
      default:
        console.log('Invalid role');
        break;
    }
  };

  if (redirectTo) {
    return <Navigate to={redirectTo} />;
  }

  return (
    <div>
      <Navbar bg="dark" variant="dark" expand="lg">
        <Container>
          <Navbar.Brand>The Merchandisers</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto">
              <Nav.Link>Contact Us</Nav.Link>
            </Nav>
            <Nav>
              <Nav.Link>Logout</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>

      <Container className="mt-4 d-flex justify-content-center">
        <Card style={{ maxWidth: '500px' }}>
          <Card.Body>
            <h1>Product Smart</h1>
            <Form onSubmit={handleLogin}>
              <Form.Group controlId="formBasicUsername">
                <Form.Label></Form.Label>
                <Form.Control type="text" placeholder="Enter username" value={username} onChange={handleUsernameChange} />
              </Form.Group>

              <Form.Group controlId="formBasicPassword">
                <Form.Label></Form.Label>
                <Form.Control type="password" placeholder="Password" value={password} onChange={handlePasswordChange} />
              </Form.Group>
              <br />

              <Button variant="primary" type="submit">Login</Button>
              <br />
            </Form>
          </Card.Body>
        </Card>
      </Container>
    </div>
  );
};

export default LoginPage;

#javascript

Concatenating Objects / Cloning Object without referencing.

const tempObj = {
    prop1 : "value1",
    prop2 : "value2"
}

//-----Concatinating / Adding New Key Values to Object--------//
Object.assign(tempObj, 
{
    "prop123" : "value123",
    "prop456" : "value456"
},

{
    "prop888" : "value888",
    "prop090" : "value090"
}
)

//--------Cloning an Object---------------//
const clonedObject = Object.assign({}, tempObj)
clonedObject.prop1 = "newProperty"  //it does not affect the original object

console.log(tempObj);
//console.log(clonedObject, tempObj);

//Find more in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
//-----------------------------------------------------------//

#javascript #forof #loop #index

using for-of loop for getting index value of iteration

const myArray = ['rock', 'paper', 'scissors'];

for(item of myArray){
        const index = myArray.indexOf(item);
        console.log(index)
    
}

#javascript

detect click out side of an element

const element = document.getElementById('btn');
document.addEventListener('mousedown', (event) => {
  if (!element.contains(event.target)) {
    // do something here
  }
});

#javascript #nodejs

Node.js REST Service Logging - app.js requests

{
  "category": "test",
  "routes": ["route1", "route2"]
}

#javascript #nodejs

Node.js REST Service Logging - app.js

// app.js
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const createLogger = require('./createLogger');
const adminRoutes = require('./adminRoutes');
const useRoutes = require('./useRoutes');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// Initialize the logger
const logger = createLogger();

// Add routes for the "admin" category
app.use('/admin/info', adminRoutes.info(logger));
app.use('/admin/warn', adminRoutes.warn(logger));
app.use('/admin/error', adminRoutes.error(logger));

// Add routes for the "use" category
app.use('/use/info', useRoutes.info(logger));
app.use('/use/warn', useRoutes.warn(logger));
app.use('/use/error', useRoutes.error(logger));

// Endpoint for adding a new category and routes dynamically
app.post('/addCategory', (req, res) => {
  const category = req.body.category;
  const routes = req.body.routes;

  // Create a new logger for the category
  const categoryLogger = createLogger(category);

  // Add routes for the category
  for (const route of routes) {
    app.use(`/${category}/${route}/info`, (req, res) => {
      categoryLogger.info({ message: req.query.message });
      res.send('Logged info message');
    });

    app.use(`/${category}/${route}/warn`, (req, res) => {
      categoryLogger.warn({ message: req.query.message });
      res.send('Logged warning message');
    });

    app.use(`/${category}/${route}/error`, (req, res) => {
      categoryLogger.error({ message: req.query.message });
      res.send('Logged error message');
    });
  }

  res.send(`Added category ${category} with routes ${routes.join(', ')}`);
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

#javascript #nodejs

Node.js REST Service Logging - createLogger.js - 2

const createCategoryLogger = require('./createLogger');

const appLogger = createCategoryLogger('app');
const adminLogger = createCategoryLogger('admin');
const userLogger = createCategoryLogger('user');

#javascript #nodejs

Node.js REST Service Logging - createLogger.js - 1

const { createLogger, format, transports } = require('winston');
const { combine, timestamp, json } = format;

const getLogFileName = (category) => {
  const date = new Date().toISOString().slice(0, 10);
  return `logs/${category}/${category}-${date}.log`;
};

const createCategoryLogger = (category) => {
  return createLogger({
    level: 'info',
    format: combine(timestamp(), json()),
    transports: [
      new transports.File({
        filename: getLogFileName(category),
        level: 'info',
        maxsize: 1024 * 1024 * 10, // 10MB
        maxFiles: 5,
        tailable: true,
      }),
      new transports.Console({
        level: 'debug',
        format: format.combine(format.colorize(), format.simple()),
      }),
    ],
  });
};

module.exports = createCategoryLogger;

#javascript #nodejs

Node.js REST Service Logging - userRoutes.js

const express = require('express');
const router = express.Router();
const userLogger = require('../controllers/userLogger');

// Route for info level logging
router.post('/info', (req, res) => {
  const { message } = req.body;
  userLogger.info(message);
  res.send('Info log successful');
});

// Route for warning level logging
router.post('/warning', (req, res) => {
  const { message } = req.body;
  userLogger.warning(message);
  res.send('Warning log successful');
});

// Route for error level logging
router.post('/error', (req, res) => {
  const { message } = req.body;
  userLogger.error(message);
  res.send('Error log successful');
});

module.exports = router;

#javascript #nodejs

Node.js REST Service Logging - adminRoutes.js

const express = require('express');
const router = express.Router();
const adminLogger = require('../controllers/adminLogger');

// Route for info level logging
router.post('/info', (req, res) => {
  const { message } = req.body;
  adminLogger.info(message);
  res.send('Info log successful');
});

// Route for warning level logging
router.post('/warning', (req, res) => {
  const { message } = req.body;
  adminLogger.warning(message);
  res.send('Warning log successful');
});

// Route for error level logging
router.post('/error', (req, res) => {
  const { message } = req.body;
  adminLogger.error(message);
  res.send('Error log successful');
});

module.exports = router;

#javascript #nodejs

Node.js REST Service Logging - appRoutes.js

const express = require('express');
const router = express.Router();
const appLogger = require('../controllers/appLogger');

// Route for info level logging
router.post('/info', (req, res) => {
  const { message } = req.body;
  appLogger.info(message);
  res.send('Info log successful');
});

// Route for warning level logging
router.post('/warning', (req, res) => {
  const { message } = req.body;
  appLogger.warning(message);
  res.send('Warning log successful');
});

// Route for error level logging
router.post('/error', (req, res) => {
  const { message } = req.body;
  appLogger.error(message);
  res.send('Error log successful');
});

module.exports = router;

#javascript #nodejs

Node.js REST Service Logging - userLogger.js

const winston = require('winston');
const path = require('path');
const { combine, timestamp, label, json } = winston.format;

// Log rotation configuration
const { createLogger, transports } = winston;
const { File } = transports;
const filename = (new Date()).toISOString().slice(0, 19).replace(/[-T]/g, '_');
const userLogRotate = new File({
  filename: path.join(__dirname, `../logs/users_${filename}.log`),
  level: 'info',
  maxsize: 1000000,
  maxFiles: 5,
  tailable: true,
});

// Winston logger configuration
const userLogger = createLogger({
  format: combine(
    label({ label: 'User' }),
    timestamp(),
    json()
  ),
  transports: [
    new winston.transports.Console(),
    userLogRotate
  ]
});

module.exports = userLogger;

#javascript #nodejs

Node.js REST Service Logging - adminLogger.js

const winston = require('winston');
const path = require('path');
const { combine, timestamp, label, json } = winston.format;

// Log rotation configuration
const { createLogger, transports } = winston;
const { File } = transports;
const filename = (new Date()).toISOString().slice(0, 19).replace(/[-T]/g, '_');
const adminLogRotate = new File({
  filename: path.join(__dirname, `../logs/admins_${filename}.log`),
  level: 'info',
  maxsize: 1000000,
  maxFiles: 5,
  tailable: true,
});

// Winston logger configuration
const adminLogger = createLogger({
  format: combine(
    label({ label: 'Admin' }),
    timestamp(),
    json()
  ),
  transports: [
    new winston.transports.Console(),
    adminLogRotate
  ]
});

module.exports = adminLogger;

#javascript #nodejs

Node.js REST Service Logging - appLogger.js

const winston = require('winston');
const path = require('path');
const { combine, timestamp, label, json } = winston.format;

// Log rotation configuration
const { createLogger, transports } = winston;
const { File } = transports;
const filename = (new Date()).toISOString().slice(0, 19).replace(/[-T]/g, '_');
const appLogRotate = new File({
  filename: path.join(__dirname, `../logs/${filename}.log`),
  level: 'info',
  maxsize: 1000000,
  maxFiles: 5,
  tailable: true,
});

// Winston logger configuration
const appLogger = createLogger({
  format: combine(
    label({ label: 'App' }),
    timestamp(),
    json()
  ),
  transports: [
    new winston.transports.Console(),
    appLogRotate
  ]
});

module.exports = appLogger;

#javascript #nodejs

Node.js REST Service Logging - Suggested folder structure

├── controllers
│   ├── appLogger.js
│   ├── adminLogger.js
│   └── userLogger.js
├── logs
│   ├── app-2023-04-20.log
│   ├── admins-2023-04-20.log
│   └── users-2023-04-20.log
├── routes
│   ├── appRoutes.js
│   ├── adminRoutes.js
│   └── userRoutes.js
├── utils
│   └── createLogger.js
└── app.js

#javascript #uuid #guid

Using express-validator for Request Validation

const express = require('express');
const { body, sanitizeBody, validationResult } = require('express-validator');

const app = express();

app.use(express.json());

// Define a route handler that uses request validation middleware
app.post('/register',
  body('username').trim().isLength({ min: 3, max: 30 })
    .withMessage('Username must be between 3 and 30 characters long')
    .escape(),
  body('email').trim().isEmail()
    .withMessage('Please enter a valid email address')
    .normalizeEmail(),
  body('password').isLength({ min: 6 })
    .withMessage('Password must be at least 6 characters long')
    .matches(/\d/)
    .withMessage('Password must contain at least one number')
    .customSanitizer((value, { req }) => {
      // Hash the password before storing it in the database
      const hashedPassword = hashPassword(value);
      req.body.password = hashedPassword;
      return hashedPassword;
    }),
  (req, res) => {
    // Check for validation errors
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(422).json({ errors: errors.array() });
    }

    // Sanitize input data
    sanitizeBody('username').escape();
    sanitizeBody('email').normalizeEmail();

    // Registration logic here
    const username = req.body.username;
    const email = req.body.email;
    const password = req.body.password;
    const message = `Registered user: ${username} (${email}, ${password})`;
    res.send(message);
  });

// Start the server
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

#javascript #uuid #guid

controllers/userController.js

// controllers/userController.js

const userModel = require('../models/userModel');

// Define route handling functions
function getAllUsers(req, res) {
  const users = userModel.getAllUsers();
  res.json(users);
}

function getUserById(req, res) {
  const id = req.params.id;
  const user = userModel.getUserById(id);
  if (!user) {
    res.status(404).send('User not found');
  } else {
    res.json(user);
  }
}

function createUser(req, res) {
  const newUser = req.body;
  const user = userModel.createUser(newUser);
  res.status(201).json(user);
}

function updateUser(req, res) {
  const id = req.params.id;
  const updatedUser = req.body;
  const user = userModel.updateUser(id, updatedUser);
  if (!user) {
    res.status(404).send('User not found');
  } else {
    res.json(user);
  }
}

function deleteUser(req, res) {
  const id = req.params.id;
  const user = userModel.deleteUser(id);
  if (!user) {
    res.status(404).send('User not found');
  } else {
    res.send('User deleted successfully');
  }
}

// Export route handling functions
module.exports = {
  getAllUsers,
  getUserById,
  createUser,
  updateUser,
  deleteUser
};

#javascript #uuid #guid

Use logging to a file

// Here's how you can set up logging to a file:
// Install the winston package by running the following command in your terminal:
npm install winston

// Create a logger.js file in your project directory with the following code:
// This creates a logs folder in the same directory as your logger.js module,
// and places the log files inside it. You can adjust the logsDir variable 
// to specify a different directory if desired.

const path = require('path');
const winston = require('winston');
const { createLogger, format, transports } = winston;
const { combine, timestamp, printf } = format;

const logFormat = printf(({ level, message, timestamp }) => {
  return `${timestamp} ${level}: ${message}`;
});

const logsDir = path.join(__dirname, 'logs');

const logger = createLogger({
  level: 'info',
  format: combine(
    timestamp(),
    logFormat
  ),
  transports: [
    new transports.Console(),
    new transports.File({
      filename: path.join(logsDir, 'error.log'),
      level: 'error',
      maxsize: 5242880, // 5MB
      maxFiles: 5,
      tailable: true
    }),
    new transports.File({
      filename: path.join(logsDir, 'combined.log'),
      maxsize: 5242880, // 5MB
      maxFiles: 5,
      tailable: true
    })
  ]
});

module.exports = logger;

#javascript #uuid #guid

Keep environment variables in a file

// You can keep environment variables in a file, usually named .env, and load them
// into your Node.js application using a package like dotenv.
// 
// Here are the steps to do so:
// 
// Create a file named .env in the root of your project directory.
// 
// Add your environment variables to the .env file in the following format:

VARIABLE_NAME=variable_value

// For example:
MYSQL_USER=myuser
MYSQL_PASSWORD=mypassword

// Install the dotenv package by running the following command in your terminal:
npm install dotenv

// In your Node.js application, require the dotenv package at the top of your entry file (usually index.js), like this:
require('dotenv').config();

// Access your environment variables in your code using the process.env object. For example:

const mysqlUser = process.env.MYSQL_USER;
const mysqlPassword = process.env.MYSQL_PASSWORD;

// It's important to keep your .env file outside of your version control system,
// as it can contain sensitive information that you don't want to share with others.
// If you're using Git, you can add the .env file to your .gitignore file to
// prevent it from being committed.

#javascript #uuid #guid

/index.js

const express = require('express');
const bodyParser = require('body-parser');
const config = require('./config');
const userRouter = require('./routes/user');

const app = express();

// Set up middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// Set up routes
app.use('/users', userRouter);

// Start the server
app.listen(config.port, () => {
  console.log(`Server listening on port ${config.port}...`);
});

#javascript #uuid #guid

/routes/user.js

const express = require('express');
const router = express.Router();
const user = require('../models/user');

// GET all users
router.get('/', async (req, res) => {
  try {
    const userList = await user.getAllUsers();
    res.json(userList);
  } catch (err) {
    console.error(err);
    res.status(500).send('Server error');
  }
});

// POST new user
router.post('/', async (req, res) => {
  try {
    const newUser = req.body;
    await user.addUser(newUser);
    res.status(201).send('User added');
  } catch (err) {
    console.error(err);
    res.status(500).send('Server error');
  }
});

module.exports = router;

#javascript #uuid #guid

/models/user.js

const mysql = require('mysql');
const config = require('../config');

// Set up database connection
const connection = mysql.createConnection({
  host: config.mysqlUri,
  user: process.env.MYSQL_USER,
  password: process.env.MYSQL_PASSWORD,
  database: config.mysqlDBName,
});

// Connect to database
connection.connect((err) => {
  if (err) {
    console.error(`Error connecting to database: ${err.stack}`);
    return;
  }
  console.log(`Connected to database as id ${connection.threadId}`);
});

module.exports = {
  async getAllUsers() {
    return new Promise((resolve, reject) => {
      connection.query('SELECT * FROM users', (error, results, fields) => {
        if (error) {
          console.error(`Error retrieving users: ${error}`);
          reject(error);
        } else {
          resolve(results);
        }
      });
    });
  },

  async addUser(user) {
    return new Promise((resolve, reject) => {
      connection.query('INSERT INTO users SET ?', user, (error, results, fields) => {
        if (error) {
          console.error(`Error adding user: ${error}`);
          reject(error);
        } else {
          resolve(results);
        }
      });
    });
  },
};

#javascript #uuid #guid

config.js

module.exports = {
  port: process.env.PORT || 3000,
  mysqlUri: process.env.MYSQL_URI || 'mysql://localhost:3306',
  mysqlDBName: process.env.MYSQL_DB_NAME || 'my_database',
};

#javascript #uuid #guid

Node skeleton app - Suggested folder structure with modular code

├── app.js
├── config/
│   ├── index.js
│   ├── development.js
│   ├── production.js
│   └── test.js
├── controllers/
│   ├── userController.js
│   └── ...
├── models/
│   ├── user.js
│   └── ...
├── routes/
│   ├── userRoutes.js
│   └── ...
├── services/
│   ├── userService.js
│   └── ...
└── utils/
    ├── logger.js
    └── ...

#javascript

reactjs - In general is it better to use one or many useEffect hooks in a single component? - Stack Overflow

/*
 * Backend tags list have changed add the changes if needed
 */
useEffect(() => {
    setTagsList(setTagsAdded);
}, [setTagsAdded]);

/*
 * Backend files have changed add the changes if needed
 */
useEffect(() => {
    for (let i = 0; i < changedFilesMeta.length; i += 1) {
        // Is the list item value changed
        if (changedFilesMeta[i].id === currentEditableFile.id) {
            unstable_batchedUpdates(() => {
                setTags(changedFilesMeta[i].tags ? changedFilesMeta[i].tags : []);
            });
        }
    }
}, [changedFilesMeta]);

/*
 * Reset when user select new files using the filepicker
 */
useEffect(() => {
    if (setNewFiles.length > 0) {
        unstable_batchedUpdates(() => {
            setCurrentFile(null);
            setDescription('');
            setTitle('');
            setTags([]);
        });
    }
}, [setNewFiles]);

/*
 * User selecet to edit a file, change to that file
 */
useEffect(() => {
    // When user select a file to edit it
    if (currentEditableFile && currentEditableFile !== theCurrentFile) {
        setCurrentFile(currentEditableFile);
        unstable_batchedUpdates(() => {
            setDescription(currentEditableFile.description);
            setTitle(currentEditableFile.title);
            setTags(currentEditableFile.tags);
        });
    }
}, [currentEditableFile]);

#javascript

function returns boolean

function isFreezing(temperature) {
 return temperature < 0;
}
const freezing = isFreezing(-3);
console.log(freezing);

#javascript

creating a function w/ multiple parameters

function mix(first, second, third) {
 return first + second + third;
}
const result = mix("big\n", "bad\n", "wolf\n");
console.log(result);

#javascript

emotion detector for bad reviews

// Get all the reviews on the page
const reviews = document.querySelectorAll('.review');

// Define the keywords to look for and their associated highlight colors
const keywords = {
  'work': 'yellow',
  'experience': 'yellow',
  'unpleasant': 'yellow',
  'felt': 'green'
};

// Loop through each review and highlight the keywords
reviews.forEach((review) => {
  // Get the text content of the review
  const reviewText = review.textContent.toLowerCase();

  // Loop through each keyword and highlight it if it's found in the review
  Object.keys(keywords).forEach((keyword) => {
    if (reviewText.includes(keyword)) {
      const regex = new RegExp(keyword, 'gi');
      const highlightedText = review.innerHTML.replace(regex, `<span style="background-color:${keywords[keyword]}">${keyword}</span>`);
      review.innerHTML = highlightedText;
    }
  });
});

#javascript

emotion detector For Amazon 2.0

// get all the reviews from the Amazon page
const reviews = document.querySelectorAll('.review');

// define the emotion keywords to search for
const emotions = ['less', 'love', 'success', 'relief'];
const highlightColor = 'yellow';

// loop through each review and search for the emotion keywords
reviews.forEach(review => {
  const reviewText = review.textContent.toLowerCase();
  
  emotions.forEach(emotion => {
    if (reviewText.includes(emotion)) {
      const highlightedText = review.innerHTML.replace(new RegExp(emotion, 'gi'), `<span style="background-color: ${highlightColor}">${emotion}</span>`);
      review.innerHTML = highlightedText;
    }
  });
  
  // search for the word "absolutely" and highlight it in green
  const absolutelyRegex = /\babsolutely\b/gi;
  const absolutelyColor = 'green';
  
  if (absolutelyRegex.test(reviewText)) {
    const highlightedText = review.innerHTML.replace(absolutelyRegex, `<span style="background-color: ${absolutelyColor}">absolutely</span>`);
    review.innerHTML = highlightedText;
  }
});

#javascript

Emotion Detector

const emotions = ['love', 'thankful', 'happy', 'relief', 'success'];

function highlightEmotions() {
  const elements = document.getElementsByTagName('*');
  for(let i = 0; i < elements.length; i++) {
    const element = elements[i];
    for(let j = 0; j < element.childNodes.length; j++) {
      const node = element.childNodes[j];
      if(node.nodeType === 3) {
        const text = node.nodeValue;
        const words = text.split(' ');
        for(let k = 0; k < words.length; k++) {
          const word = words[k].toLowerCase();
          if(emotions.includes(word)) {
            const newSpan = document.createElement('span');
            newSpan.style.backgroundColor = 'yellow';
            newSpan.innerText = words[k];
            const parent = node.parentNode;
            parent.replaceChild(newSpan, node);
          }
        }
      }
    }
  }
}

highlightEmotions();

#javascript

Add an Event Listener to Multiple Elements with JavaScript - CodeinWP

let btns = document.querySelectorAll('button');

btns.forEach(function (i) {
  i.addEventListener('click', function() {
    console.log(i);
  });
});

Code language: JavaScript (javascript)

#javascript

Add an Event Listener to Multiple Elements with JavaScript - CodeinWP

let btns = document.querySelectorAll('button');

for (i of btns) {
  i.addEventListener('click', function() {
    console.log(this);
  });
}

Code language: JavaScript (javascript)

#javascript #uuid #guid

Create a GUID / UUID v4

function uuid_v4() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  );
}

#javascript

JSONPlaceholder - Free Fake REST API

fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => console.log(json))

#javascript

updateChat function with user tracking

function updateChat(messages, role, content){
  // tres 4/6 add socket.id for each message
  messages.push({"user": socket.id, "role": role, "content": content});
  return messages; //needed?
}

#javascript

Fine-tuning GPT 3.5 as well as can be done w/o backend access

var messages = [
    {"role": "user", "content": "ask me which option they should take and make two buttons"}
  {"role": "assistant", "content": "which option should they take?  Investigate the mysterious soundsLook for another path through the woods"}];

#javascript

JavaScript code to make API calls to ChatGPT in a webserver

function fetchStuff(prompt){


  updateChat(messages, "user", prompt);
  
  var to_send = [];
  // tres 4/6 iterate through messages array and only load relevant samples
  foreach (message in messages) {
    if (message["user"] == socket.id || message["user"] == "all") {
      to_send.push(message);
    }
  }
  
  fetch("https://api.openai.com/v1/chat/completions", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer sk-(your key goes here)",
  },

  body: JSON.stringify({
    "model": "gpt-3.5-turbo",
    // tres 4/6 updated to send to_send
    "messages": to_send
  }),

})

  .then((response) => response.json())
  .then((data) => {
    let answer = data.choices[0].message.content;
    updateChat(messages, "assistant",data.choices[0].message.content);
    console.log(answer);
    io.sockets.emit('gpt-response', {
      message: "\n" + answer})
      console.log(messages)
  })
  .catch((error) => console.error(error));

}

#javascript

for loops iterating and printing sub-array averages

let temperature_data = [
  [60.2, 61.2, 63.4, 64.8, 65.1, 63.2, 62.9],
  [62.5, 63.8, 63.4, 64.6, 65.8, 64.9, 65.0],
  [63.4, 64.5, 65.2, 64.8, 65.1, 64.9, 66.2],
  [66.3, 66.8, 66.4, 66.8, 67.8, 67.9, 68.2]
];
for (i = 0; i < 4; i++) {
  let length = temperature_data[i].length;
  let weeklySum = 0;
  for (j = 0; j < length; j++) {
    weeklySum += temperature_data[i][j];
  }
  console.log("Week " + i + " Average Temperature: " + (weeklySum / 7));
}

#javascript

For loop iterating on only even array.length values

let meetingAttendees = ["Diane Moll", "CEO", "Stanley Winstead", "CFO",
  "Herta Pickett", "CFO", "Lynn Hanby", "COO"
];

for (i = 0; i < meetingAttendees.length; i += 2) {
  console.log(meetingAttendees[i]);
}

#javascript #html #css

JS Mouse Move Background

<div id="header"></div>
<style>
    #header {
    	height: 200px;
        background-image: url('https://i.postimg.cc/BbRm96cn/daniel-mirlea-u5-Qzs-Kvu7-YA-unsplash.jpg');
    }
</style>

<script>
    document.addEventListener('mousemove', function (event) {
      if (window.event) { // IE fix
          event = window.event;
      }
    
      // Grab the mouse's X-position.
      var mousex = event.clientX;
      var mousey = event.clientY;
      var header = document.getElementById('header');
      header.style.backgroundPosition = '-' + mousex/3 + 'px -' + mousey/2 + 'px';
    }, false);
    
</script>

#javascript

Descargar archivo y cambiar el nombre

import axios from 'axios'
import fileDownload from 'js-file-download'
export default function App() {
  const handleClick = (url, filename) => {
    axios.get(url, {
      responseType: 'blob',
    })
    .then((res) => {
      fileDownload(res.data, filename)
    })
  }
  return (
    <div className="App">
      <button onClick={() => {() => handleClick('https://avatars.githubusercontent.com/u/9919?s=280&v=4', 'sample')}}>
        Download the File</button>
    </div>
  );
}

#javascript

For loop with arrays

const cities = ["Washington", "New York", "Boston"];
const arrivalTimes = ["9:14 PM", "12:27 AM", "2:35 AM"];
for (i = 0; i < cities.length;) {
  console.log(cities[i] + ": " + arrivalTimes[i]);
  i++;
}

#javascript #try #error #catch

try catch

try {
  potentialFail();
} catch (error) {
  console.log(error);
}

#javascript #variables

swap variables

let first_name = "Doe";
let last_name = "John";

//swap
[first_name, last_name] = [last_name, first_name];

console.log(first_name, last_name);

#javascript #array #object #sort #order

sort array of objects in ascending order

const users = [
  { name: "user1", age: 28 },
  { name: "user2", age: 21 },
  { name: "user3", age: 38 },
  { name: "user4", age: 18 }
];

users.sort((user1, user2) => user1.age - user2.age);

console.log(users);

#javascript #loop #object

loop through object

const repository = {
  id: 1,
  language: "javascript",
  public: true
};

for (const value of Object.values(repository)) {
  console.log(value);
}

#javascript #flatten #array

flatten a nested array

const nestedArray = [1, [2], [[3], 4], 5];

const flatten = nestedArray =>
  nestedArray.reduce(
    (flat, item) => flat.concat(Array.isArray(item) ? flatten(item) : [item]),
    []
  );

flatten(nestedArray);

#javascript #array #filter #object

filter objects in array

const friends = [
  { name: "Abby", age: 22 },
  { name: "Boby", age: 16 },
  { name: "Coel", age: 20 },
  { name: "Dany", age: 15 }
];

//who can drink?
friends.filter(friend => friend.age >= 18);

#javascript #array

empty array

const apps = ["phone", "calculator", "clock"];

apps.length = 0;

console.log(apps);

#javascript #css

Changer la couleur lors de la sélection d'un élément

p::selection {
  color : #000;
  background-color : #2CD9FF;
}

#javascript #fetch

How to Send Query Params in GET and POST in JavaScript - Webtips

const post = async (url, params) => {
    const response = await fetch(url, {
        method: 'POST',
        body: JSON.stringify(params),
        headers: {
            'Content-type': 'application/json; charset=UTF-8',
        }
    })

    const data = await response.json()

    return data
}

// Then use it like so with async/await:
(async () => {
    const data = await post('https://jsonplaceholder.typicode.com/posts', {
        title: 'This will be the title',
        body: 'Setting the body property',
        userId: 1
    })

    console.log(data)
})()

// Or using then:
post('https://jsonplaceholder.typicode.com/posts', {
    title: 'This will be the title',
    body: 'Setting the body property',
    userId: 1,
}).then(data => console.log(data))

#javascript #class #generate #constructor #this

define a class

class Pencil {
  constructor(price) {
    this.price = price;
  }

  isExpensive() {
    return this.price >= 10;
  }
}

//usage
const bic = new Pencil(3);
bic.isExpensive();

#javascript #or #logical #check

create logical OR condition

const isUnderage = true;
const isDrunk = false;

if (isUnderage || isDrunk) {
  console.log("Cannot drive");
}

#javascript #not #logical #check

create logical NOT condition

const isOverage = false;

if (!isOverage) {
  console.log("You are underage");
}

#javascript #and #logical #check

create logical AND condition

const isLearning = true;
const isOverwhelmed = true;

if (isLearning && isOverwhelmed) {
  console.log("Take a break");
}

#javascript #object #transform #array

create object from array

const apps = ["phone", "calculator", "clock"];
const object = { ...apps };

console.log(object);

#javascript #array #create

create array from existing array

const apps = ["phone", "calculator", "clock"];

const clonedApps = [...apps];

#javascript #join #array #string

convert array to comma separated string

const elements = ["Eat", "Sleep", "Code", "Repeat"];

elements.join(",");

#javascript #objects #join

concatenate objects

const defaultOptions = {
  verbose: false,
  src: "./src",
  dist: "./dist"
};
const userOptions = { verbose: true };

const options = { ...defaultOptions, ...userOptions };

#javascript #array #arrays #join

concatenate arrays

const winners = ["Jane", "Bob"];
const losers = ["Ronald", "Kevin"];

const players = [...winners, ...losers];

#javascript #object #value #validate

check if an object includes value

const person = {
  first_name: "Sam",
  last_name: "Bradley"
};

Object.values(person).includes("Bradley");

#javascript #object #validate #if #string

check if an object includes substring

const person = {
  first_name: "Joan",
  last_name: "Leon",
  twitter: "@nucliweb"
};

Object.values(person)
  .toString()
  .includes("web");

#javascript #array

check if an array includes element

const apps = ["phone", "calculator", "clock"];

apps.includes("calculator");

#javascript #array #every #loop #function

apply a function to every array element in JavaScript

const ages = [18, 20, 21, 30];

const agesPlusOne = ages.map(age => age + 1);

#javascript #array

add item to array in JavaScript

const apps = [];

apps.push("calculator");

apps.push("phone", "clock");

#javascript #string #uppercase

to uppercase

const text = "Hello World";

text.toUpperCase();

#javascript #counter #count

increments a counter

let counter = 0;
counter++;

#javascript #keys #object

get object keys

const person = {
  key: "value",
  first_name: "John",
  last_name: "Doe"
};

Object.keys(person);

#javascript

Initialize a quasi-class in JS

	function _initialize() {
		topMenuRender();

		pub.uuid = uuid();
		pub.id = 'mod-ocenuvac_prijava-'+pub.uuid;
		pub.idp = pub.id+'-';
		pub.dict = Dictionary;

		//--- URL variables ------------------------
		let _urlVars = nzObject(getUrlVars());
		pub.mode = _urlVars.mode;	// odobruvanje-kandidati|aktiviranje-ocenuvac

		_modules_render();

		$.busyLoadFull('hide');
	}

#webassembly #javascript #nodejs

Dominate the Crypto Market with Your Own Binance Clone App

https://www.opris.exchange/binance-clone-script/

#javascript #nodejs

Code a react native app to manage Bluetooth medical devices

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import BleManager from 'react-native-ble-manager';

const App = () => {
  const [devices, setDevices] = useState([]);
  const [connectedDevice, setConnectedDevice] = useState(null);
  const [deviceData, setDeviceData] = useState(null);

  useEffect(() => {
    BleManager.start({ showAlert: false });
    BleManager.enableBluetooth();
  }, []);

  const scanDevices = () => {
    BleManager.scan([], 5, true)
      .then((results) => {
        setDevices(results);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const connectDevice = (device) => {
    BleManager.connect(device.id)
      .then(() => {
        setConnectedDevice(device);
        BleManager.startNotification(
          device.id,
          'serviceUUID',
          'characteristicUUID'
        ).then(() => {
          console.log('Notification started');
        });
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const disconnectDevice = () => {
    BleManager.disconnect(connectedDevice.id)
      .then(() => {
        setConnectedDevice(null);
        setDeviceData(null);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const readDeviceData = () => {
    BleManager.read(
      connectedDevice.id,
      'serviceUUID',
      'characteristicUUID'
    )
      .then((data) => {
        setDeviceData(data);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Bluetooth Medical Devices Manager</Text>
      {connectedDevice ? (
        <View style={styles.connectedDevice}>
          <Text style={styles.deviceName}>{connectedDevice.name}</Text>
          <Button
            title="Disconnect"
            onPress={() => disconnectDevice()}
          />
          <Button title="Read Data" onPress={() => readDeviceData()} />
          {deviceData ? (
            <Text style={styles.deviceData}>{deviceData}</Text>
          ) : null}
        </View>
      ) : (
        <View style={styles.deviceList}>
          <Text style={styles.subtitle}>Available Devices:</Text>
          {devices.map((device) => (
            <View style={styles.deviceItem} key={device.id}>
              <Text>{device.name}</Text>
              <Button
                title="Connect"
                onPress={() => connectDevice(device)}
              />
            </View>
          ))}
          <Button title="Scan" onPress={() => scanDevices()} />
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  subtitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  connectedDevice: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  deviceName: {
    fontSize: 18,
    fontWeight: '

#javascript #toastnotification #notification

Building a Custom JavaScript Toast Notification System: A Step-by-Step Guide

function showToast(message, duration) {
  // Create a new div element for the toast message
  const toast = document.createElement('div');
  toast.classList.add('toast');

  // Add the message content to the toast
  toast.innerHTML = message;

  // Add the toast to the container element
  const container = document.getElementById('toast-container');
  container.appendChild(toast);

  // Use a timer to remove the toast after the specified duration
  setTimeout(() => {
    container.removeChild(toast);
  }, duration);
}

#javascript

reactjs - Module not found: Can't resolve 'swiper/css' - Stack Overflow

import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'

<Swiper
      spaceBetween={50}
      slidesPerView={3}
      centeredSlides
      onSlideChange={() => console.log("slide change")}
      onSwiper={swiper => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>

#javascript #html

Eddy Old Home page backup

<div class="eddy-new-three-banners">
    <div class="new-three-banners">
        <div class="eddy-big-banner">
            <div class="three-banner-content">
                <h3>20-30% Discount</h3>
                <p> Get the latest products of this category</p>
            </div>
                <a href=""><img src="{{media url=wysiwyg/blocks/Three-banners/en/ADS-LAP-DESK-EN.jpg}}"></a>
        </div>
        <div class="eddy-new-three-two-banners">
            <div class="two-banners-container">
                <div class="three-banner-content">
                    <h3>20-30% Discount</h3>
                    <p> Get the latest products of this category</p>
                </div>
                        <a href=""><img src="{{media url=wysiwyg/blocks/Three-banners/en/ADS-MON-DESK-EN.jpg}}"></a>
            </div>
            <div class="two-banners-container">
                <div class="three-banner-content">
                    <h3>20-30% Discount</h3>
                    <p> Get the latest products of this category</p>
                </div>
                        <a href=""><img src="{{media url=wysiwyg/blocks/Three-banners/en/ADS-TV-DESK-EN.jpg}}"></a> 
            </div>
        </div>
    </div>
</div>
<!-- End Of Three Banners -->

<div class="eddy-weekend-deals">
    <div class="weekend-deals-titles">
        <div class="Weekend-Deals">
            <h2>Weekend Deals</h2>
        </div>
<!--        <div class="weekend-deals-countdown-timer">-->
<!--            <p>End After - <span id="weekend-countdown"></span></p>-->
<!--        </div>-->
        <div class="weekend-deals-view-all">
            <a href="#">View All</a>
        </div>
    </div>
<div class="container">
    {{widget type="Magiccart\Magicproduct\Block\Widget\Product" identifier="cms-static-fearured-products" template="product.phtml"}}
</div>
</div>

<!-- End of WeekEnd Deals -->

<div class="deals-you-dont-want-to-miss-en">
    <div class="deals-you-dont-want-to-miss-titles">
        <div class="deals-you-dont-want-to-miss-heading">
            <h2>Deals You Don't Want To Miss</h2>
        </div>
        <div class="deals-you-dont-want-to-miss-view-all">
            <a href="#">View All</a>
        </div>
    </div>
    <div class="deals-miss-first-row">
        <div class="deals-miss-first-item">
            <a href="#"><img src="{{media url=wysiwyg/blocks/deals-dont-miss/ADS-CM-DESK-EN.jpg}}"></a>
        </div>
        <div class="deals-miss-first-item">
            <a href="#"><img src="{{media url=wysiwyg/blocks/deals-dont-miss/ADS-COOK-DESK-EN.jpg}}"></a>
        </div>
        <div class="deals-miss-first-item">
            <a href="#"><img src="{{media url=wysiwyg/blocks/deals-dont-miss/ADS-CS-DESK-EN.jpg}}"></a>
        </div>
    </div>
    <div class="deals-miss-last-items first-banner">
        <a href="#"><img src="{{media url=wysiwyg/blocks/deals-dont-miss/ADS-BED-DESK-EN.jpg}}"></a>
    </div>
    <div class="deals-miss-last-items last-banner">
        <a href="#"><img src="{{media url=wysiwyg/blocks/deals-dont-miss/ADS-DIN-DESK-EN.jpg}}"></a>
    </div>
</div>

<!-- End of Deals you don't want to miss -->

<div class="eddy-catalog-widget-banners">
    <div class="eddy-widget-category">
        <div class="eddy-cat-ban selected" data-widget=".first-widget">Air Conditioner</div>
        <div class="eddy-cat-ban" data-widget=".second-widget">Vacuums</div>
        <div class="eddy-cat-ban" data-widget=".third-widget">Pressure Washers</div>
        <div class="eddy-cat-ban" data-widget=".forth-widget">Drills</div>
        <div class="eddy-cat-ban" data-widget=".fifth-widget">Indoor Camera's</div>
    </div>

    <div class="eddy-widget-blocks">
        <div class="first-widget catalog-banners active">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-49.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-46.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-47.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-48.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-49.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-47.jpg}}"/></a>

        </div>
        <div class="second-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-54.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-55.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-56.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>

        </div>
        <div class="third-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-1.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-2.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-3.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
        </div>
        <div class="forth-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-50.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-51.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-52.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
        </div>
        <div class="fifth-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-58.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-59.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-60.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
        </div>
    </div>
</div>

<!-- End of First Catalog widget banner block -->

<div class="container">
    {{widget type="Magiccart\Magicproduct\Block\Widget\Product" identifier="cms-static-fearured-products" template="product.phtml"}}
</div>

<!-- End of product slider -->

<div class="eddy-your-own-comfort-zone">
    <div class="eddy-zones eddy-comfort-zone-first-items">
        <div class="eddy-comfort-zone-image">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-small2.jpg}}"></a>
        </div>
        <div class="eddy-comfort-zone-image">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-small1.jpg}}"></a>
        </div>
    </div>
    <div class="eddy-zones eddy-comfort-zone-second-items">
        <div class="eddy-comfort-zone-image-increase">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-big1.jpg}}"></a>
        </div>
    </div>
    <div class="eddy-zones eddy-comfort-zone-third-items">
        <div class="eddy-comfort-zone-image">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-small3.jpg}}"></a>
        </div>
        <div class="eddy-comfort-zone-image">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-small4.jpg}}"></a>
        </div>
    </div>
</div>


<!-- End of comfort zone block -->


<div class="eddy-catalog-widget-banners">
    <div class="eddy-widget-category">
        <div class="eddy-cat-ban selected" data-widget=".first-widget">Air Conditioner</div>
        <div class="eddy-cat-ban" data-widget=".second-widget">Vacuums</div>
        <div class="eddy-cat-ban" data-widget=".third-widget">Pressure Washers</div>
        <div class="eddy-cat-ban" data-widget=".forth-widget">Drills</div>
        <div class="eddy-cat-ban" data-widget=".fifth-widget">Indoor Camera's</div>
    </div>

    <div class="eddy-widget-blocks">
        <div class="first-widget catalog-banners active">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-49.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-46.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-47.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-48.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-49.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-47.jpg}}"/></a>

        </div>
        <div class="second-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-54.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-55.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-56.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>

        </div>
        <div class="third-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-1.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-2.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-3.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
        </div>
        <div class="forth-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-50.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-51.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-52.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
        </div>
        <div class="fifth-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-58.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-59.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-60.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
        </div>
    </div>
</div>

<!-- End of Second Catalog widget banner block -->


<div class="eddy-shop-laptops">
    <div class="shop-laptop">
        <div class="lap-content">
            <h3>IT Technologies for start</h3>
            <h3>Check limited in Opportunities</h3>
            <button class="btn btn-primary">Shop Laptop</button>
        </div>
    </div>
    <div class="shop-all-laptops">
        <div class="shop-all-laptop-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/shop-laptops/COMP-BANNERS-EN-small1.jpg}}"></a>
        </div>
        <div class="shop-all-laptop-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/shop-laptops/COMP-BANNERS-EN-small2.jpg}}"></a>
        </div>
        <div class="shop-all-laptop-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/shop-laptops/COMP-BANNERS-EN-small3.jpg}}"></a>
        </div>
        <div class="shop-all-laptop-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/shop-laptops/COMP-BANNERS-EN-small4.jpg}}"></a>
        </div>
    </div>
</div>

<!-- End of Eddy Shop Laptops -->

<div class="eddy-catalog-widget-banners">
    <div class="eddy-widget-category">
        <div class="eddy-cat-ban selected" data-widget=".first-widget">Air Conditioner</div>
        <div class="eddy-cat-ban" data-widget=".second-widget">Vacuums</div>
        <div class="eddy-cat-ban" data-widget=".third-widget">Pressure Washers</div>
        <div class="eddy-cat-ban" data-widget=".forth-widget">Drills</div>
        <div class="eddy-cat-ban" data-widget=".fifth-widget">Indoor Camera's</div>
    </div>

    <div class="eddy-widget-blocks">
        <div class="first-widget catalog-banners active">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-49.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-46.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-47.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-48.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-49.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-47.jpg}}"/></a>

        </div>
        <div class="second-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-54.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-55.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-56.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>

        </div>
        <div class="third-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-1.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-2.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-3.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
        </div>
        <div class="forth-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-50.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-51.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-52.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
        </div>
        <div class="fifth-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-58.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-59.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-60.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
        </div>
    </div>
</div>

<!-- End of Third catalog banner widget -->

<div class="eddy-shop-microwaves">
    <div class="shop-all-microwaves">
        <div class="shop-all-microwaves-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/shop-microwaves/SDA-BANNERS-EN-small1.jpg}}"></a>
        </div>
        <div class="shop-all-microwaves-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/shop-microwaves/SDA-BANNERS-EN-small2.jpg}}"></a>
        </div>
        <div class="shop-all-microwaves-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/shop-microwaves/SDA-BANNERS-EN-small3.jpg}}"></a>
        </div>
        <div class="shop-all-microwaves-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/shop-microwaves/SDA-BANNERS-EN-small4.jpg}}"></a>
        </div>
    </div>
    <div class="shop-microwaves">
              <div class="microwaves-content">
        <a href="#"><img src="{{media url=wysiwyg/blocks/shop-microwaves/SDA-BANNERS-EN-big.jpg}}"></a>
                </div>
    </div>
</div>


<!-- End of Shop microwaves -->


<div class="eddy-bottom-banner">
    <div class="eddy-first-bottom-banner">
        <a href="#">
            <img src="{{media url=wysiwyg/alothemes/static/banner-menu-bottom_1.jpg}}" alt="" />
        </a>
    </div>
    <div class="eddy-second-bottom-banner">
        <a href="#">
            <img src="{{media url=wysiwyg/alothemes/static/banner-menu-bottom.jpg}}" alt="" />
        </a>
    </div>
</div>  
        

<!-- End of bottom banner -->

<div class="eddy-new-three-banners">
    <div class="new-three-banners">
        <div class="eddy-big-banner">
            <div class="three-banner-content">
                <h3>20-30% Discount</h3>
                <p> Get the latest products of this category</p>
            </div>
                <a href=""><img src="{{media url=wysiwyg/blocks/Three-banners/en/ADS-LAP-DESK-EN.jpg}}"></a>
        </div>
        <div class="eddy-new-three-two-banners">
            <div class="two-banners-container">
                <div class="three-banner-content">
                    <h3>20-30% Discount</h3>
                    <p> Get the latest products of this category</p>
                </div>
                        <a href=""><img src="{{media url=wysiwyg/blocks/Three-banners/en/ADS-MON-DESK-EN.jpg}}"></a>
            </div>
            <div class="two-banners-container">
                <div class="three-banner-content">
                    <h3>20-30% Discount</h3>
                    <p> Get the latest products of this category</p>
                </div>
                        <a href=""><img src="{{media url=wysiwyg/blocks/Three-banners/en/ADS-TV-DESK-EN.jpg}}"></a> 
            </div>
        </div>
    </div>
</div>

<!-- End of Eddy Three banners -->

<div class="eddy-your-own-comfort-zone">
    <div class="eddy-zones eddy-comfort-zone-first-items">
        <div class="eddy-comfort-zone-image">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-small2.jpg}}"></a>
        </div>
        <div class="eddy-comfort-zone-image">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-small1.jpg}}"></a>
        </div>
    </div>
    <div class="eddy-zones eddy-comfort-zone-second-items">
        <div class="eddy-comfort-zone-image-increase">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-big1.jpg}}"></a>
        </div>
    </div>
    <div class="eddy-zones eddy-comfort-zone-third-items">
        <div class="eddy-comfort-zone-image">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-small3.jpg}}"></a>
        </div>
        <div class="eddy-comfort-zone-image">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-small4.jpg}}"></a>
        </div>
    </div>
</div>


<!-- End of eddyـyourـownـcomfortـzoneـen -->

<div class="eddy-get-ready">
    <div class="dining-furniture">
        <div class="dining-furniture-content">
            <h3>Get Ready To</h3>
            <h3>Host in Style</h3>
            <p>Dining set furniture</p>
            <button class="btn btn-primary">Shop Now</button>
        </div>
    </div>
    <div class="dining-tables">
        <div class="dining-table-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/get-ready/ADS-DIN-DESK-EN.jpg}}"></a>
        </div>
    </div>
</div>

<!-- End of eddy-get-ready-en -->

#javascript

JavaScript

let highestMark  = marks.reduce((a, b) => a.mark > b.mark ? a : b)
console.log(highestMark);

#javascript

How to Implement Reveal on Scroll in React using the Intersection Observer API

import "./App.css";

import { useState, useRef, useEffect } from "react";

function App() {
  const [isIntersecting, setIsIntersecting] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsIntersecting(entry.isIntersecting);
      },
      { rootMargin: "-300px" }
    );
    console.log(isIntersecting);
    observer.observe(ref.current);

    return () => observer.disconnect();
  }, [isIntersecting]);

  useEffect(() => {
    if (isIntersecting) {
      ref.current.querySelectorAll("div").forEach((el) => {
        el.classList.add("slide-in");
      });
    } else {
      ref.current.querySelectorAll("div").forEach((el) => {
        el.classList.remove("slide-in");
      });
    }
  }, [isIntersecting]);

  return (
    <div className="App">
      <header>This is the Header</header>
      <main ref={ref}>
        <div className="child-one">Child One</div>
        <div className="child-two">Child Two</div>
      </main>
      <footer>This is the Footer</footer>
    </div>
  );
}

export default App;

#javascript #nodejs

Socket.io server connection

const express = require("express");

const socket = require("socket.io");

// App setup

const app = express();

const server = app.listen(5000, function () {

  console.log(`server running!`);

});

// Static files

app.use(express.static("public"));

// Socket setup

const io = socket(server);

io.on("connection", function (socket) {

  console.log("socket connection on");

});

#javascript

Javascript

let marks = [
    {
        name: 'student1',
        mark: 78
    },{
        name: 'student2',
        mark: 90
    },{
        name: 'student3',
        mark: 69
    },{
        name: 'student4',
        mark: 96
    },{
        name: 'student5',
        mark: 64
    }
]

#javascript

count duplicates

function duplicateCount(text){
  //...
  const lowercase = text.toLowerCase()
  const arr = lowercase.split('')
  arr.sort()
  let answer = 0
  for (i=0; i<arr.length; i++) {
    if (arr[i]===arr[i+1]){
      const letter =arr[i] 
      while (arr[i+1] === letter) {
       i++
     } answer ++
    }
  }
  return answer
}

#javascript

calling letters add beyond the answer. Caesar cipher

function rot13(message){
  //your code here
  const lowercase= ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
  const uppercase= ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
  
  const answer = []
  
for (i=0; i<message.length; i++) {
  
  let arr 
  
  if (message[i]===message[i].toLowerCase()) {
    arr=lowercase
  } else { arr=uppercase }
  let pos = arr.indexOf(message[i])
  if (pos=== -1) {
    answer.push(message[i])
    continue
  }
  pos += 13
  pos = pos % 26
  answer.push(arr[pos])
}
  
  return answer.join('')
}

#javascript

forEach in javascript - Google Search

const avengers = ['thor', 'captain america', 'hulk'];
avengers.forEach((item, index)=>{
	console.log(index, item)
})

#javascript

Detect ad-blockers · Issue #645 · simpleanalytics/roadmap

var box = document.createElement("div");
box.className = "ads AdSense adpopup adszone adslot AD300";
box.style.height = "1px";

var observer = new MutationObserver(function () {
  if (document.body.contains(box)) {
    console.log("It's in the DOM!");
    observer.disconnect();
    setTimeout(function () {
      var hasAdblocker = !box.offsetHeight;
      console.log({ hasAdblocker });
    }, 0);
  }
});

observer.observe(document.body, {
  attributes: false,
  childList: true,
  characterData: false,
  subtree: true,
});

document.body.appendChild(box);

#cdn #javascript #url #code #html

pdj.js CDN

https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js

#javascript

mui css override

sx={{ p: 1}}

#javascript

MUI Stack

<Stack direction="row" spacing={2}>
</Stack>

#javascript

javaScript equality operator

const firstValue = 10;
const secondValue = "10";
console.log(firstValue == secondValue);
// output : true 

console.log(firstValue === secondvalue);
// output : false

#javascript

useState

//USe.jsx file , this file export to App.jsx and run this file

import React,{useState} from 'react';


const use=()=>{
  const[store_age,update_age]=useState(19);
  const handle=()=>{
    update_age(store_age+2);
    
  }

  return(
    <div className="main">
  <h1>toadya ia am {store_age} old</h1>
  <button onClick={handle} > get oldder </button>

    </div>
  )
}
export default use;

#javascript

React Hooks cheat sheet: Best practices with examples (best example)::

const MultipleStateVars = () => {
  const [age, setAge] = useState(19)
  const [siblingsNum, setSiblingsNum] = 
    useState(10)

  const handleAge = () => setAge(age + 1)
  const handleSiblingsNum = () => 
      setSiblingsNum(siblingsNum + 1)
 

  return (
    <div>
      <p>Today I am {age} Years of Age</p>
      <p>I have {siblingsNum} siblings</p>

      <div>
        <button onClick={handleAge}>
          Get older! 
        </button>
        <button onClick={handleSiblingsNum}>
            More siblings! 
        </button>
      </div>
    </div>
  )
}

#javascript

javascript - Multiple populates - mongoosejs - Stack Overflow

let results = await OrderModel.find().populate(['user', 'meal']);

#javascript #php

retrieve information about the computer

<?php
$ip = $_SERVER['REMOTE_ADDR'];
$user_agent = $_SERVER['HTTP_USER_AGENT'];
$referer = $_SERVER['HTTP_REFERER'];
$language = $_SERVER['HTTP_ACCEPT_LANGUAGE'];

echo "IP address: $ip<br>";
echo "User agent: $user_agent<br>";
echo "Referrer: $referer<br>";
echo "Preferred language(s): $language<br>";
?>

#javascript

Code to display “Hello World”

console.log(hello word)

#javascript

Node.js + Express - How to log the request body and response body - Stack Overflow

Hi was looking for same as complete log of request and response as middleware in express js. Found the solution as well w

    /*Added by vikram parihar for log  */
const moment = require('moment');
const rfs = require("rotating-file-stream");
const geoip = require('geoip-lite');
const { PassThrough } = require('stream')
let path = require('path');

const accessLogStream = rfs.createStream('access.log', {
    interval: '1M', // rotate daily
    compress: true,
    path: path.join(__dirname, '../../log')
});

module.exports = function (req, res, next) {
    try {
        let geo = geoip.lookup(req.ip);
        let country = geo ? geo.country : "Unknown";
        let region = geo ? geo.region : "Unknown";
        let log = {
            "time": moment().format('YYYY/MM/DD HH:mm:ss'),
            "host": req.hostname,
            "ip": req.ip,
            "originalUrl": req.originalUrl,
            "geo": {
                "browser": req.headers["user-agent"],
                "Language": req.headers["accept-language"],
                "Country": country,
                "Region": region,
            },
            "method": req.method,
            "path": req.path,
            "url": req.url,
            "body": req.body,
            "params": req.params,
            "query": req.query,
            "response": {
                "body": res.body
            }
        };
        const defaultWrite = res.write.bind(res);
        const defaultEnd = res.end.bind(res);
        const ps = new PassThrough();
        const chunks = [];

        ps.on('data', data => chunks.push(data));

        res.write = (...args) => {
            ps.write(...args);
            defaultWrite(...args);
        }

        res.end = (...args) => {
            ps.end(...args);
            defaultEnd(...args);
        }
        res.on('finish', () => {
            log.response.body = Buffer.concat(chunks).toString()
            accessLogStream.write(JSON.stringify(log) + "\n");
        })
    } catch (error) {
        console.log(error)
        next(error)
    }
    next();
}

#javascript

Import React & React-Dom in CodiLink

import React from "https://esm.sh/react@18.2.0"
import ReactDom from "https://esm.sh/react-dom@18.2.0/client"

#react.js #javascript

Checking the token is expired or not using moment

import moment from 'moment';

const expiryDate = '03-21-2023';
const currentDate = moment();

// Parse the expiry date using Moment.js
const parsedExpiryDate = moment(expiryDate, 'MM-DD-YYYY');

// Compare the expiry date to the current date to check if the token is expired
if (parsedExpiryDate.isBefore(currentDate)) {
  console.log('Token has expired!');
} else {
  console.log('Token is still valid');
}

#javascript

works out time after midnight in milliseconds

function past(h, m, s){
  return s*1000 + m*60000 + h*3600000
}

#javascript

if meets condition then multiplys

function paperwork(n, m) {
  if (n < 0  || m < 0) {
return 0
  } else {
    return n * m 
  }
}

#javascript

q-react

import './ExpenseItem.css'
export default function ExpenseItem(){
    const expenseDate=new Date(2021,2,8)
    const expenseTitle='Car Insurance'
    const expenseAmount=123.354
    let arr=[2,3,4]
    console.log(typeof expenseDate)
   
    console.log(typeof arr)
    return(
        <div className='expense-item '>
            <div>
                {expenseDate.toISOString()}
            </div>
            <div className='expense-item__description'>
                <h2>
                 {arr}
                </h2>
            <div className='expense-item__price'>
            ${expenseAmount}
        </div>
        </div>
        </div>
    );
}

#javascript #npm #node

List all npm packages of global

npm list -g --depth=0

#javascript #nodejs

node.js - How to serve an image using nodejs - Stack Overflow

var path = require('path');
var http = require('http');
var fs = require('fs');

var dir = path.join(__dirname, 'public');

var mime = {
    html: 'text/html',
    txt: 'text/plain',
    css: 'text/css',
    gif: 'image/gif',
    jpg: 'image/jpeg',
    png: 'image/png',
    svg: 'image/svg+xml',
    js: 'application/javascript'
};

var server = http.createServer(function (req, res) {
    var reqpath = req.url.toString().split('?')[0];
    if (req.method !== 'GET') {
        res.statusCode = 501;
        res.setHeader('Content-Type', 'text/plain');
        return res.end('Method not implemented');
    }
    var file = path.join(dir, reqpath.replace(/\/$/, '/index.html'));
    if (file.indexOf(dir + path.sep) !== 0) {
        res.statusCode = 403;
        res.setHeader('Content-Type', 'text/plain');
        return res.end('Forbidden');
    }
    var type = mime[path.extname(file).slice(1)] || 'text/plain';
    var s = fs.createReadStream(file);
    s.on('open', function () {
        res.setHeader('Content-Type', type);
        s.pipe(res);
    });
    s.on('error', function () {
        res.setHeader('Content-Type', 'text/plain');
        res.statusCode = 404;
        res.end('Not found');
    });
});

server.listen(3000, function () {
    console.log('Listening on http://localhost:3000/');
});

#javascript

eslint plugin

npm i eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-config-airbnb eslint-plugin-node eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react --save-dev



aseve gvinda faili

.eslintrc.json   da shig


{
  "extends": ["airbnb", "prettier", "plugin:node/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "spaced-comment": "off",
    "no-console": "warn",
    "consistent-return": "off",
    "func-names": "off",
    "object-shorthand": "off",
    "no-process-exit": "off",
    "no-param-reassign": "off",
    "no-return-await": "off",
    "no-underscore-dangle": "off",
    "class-methods-use-this": "off",
    "prefer-destructuring": ["error", { "object": true, "array": false }],
    "no-unused-vars": ["error", { "argsIgnorePattern": "req|res|next|val" }]
  }
}

#javascript

this

// これまでの関数
var printName = function() {
    document.write(this + "<br>");
    document.write(this.myName + "<br>");
};
var human = {
    myName: "yuu",
    print: printName
}
human.print();
 
// アロー関数
var printNameArrow = () => {
    document.write(this + "<br>");
    document.write(this.myName + "<br>");
};
var humanArrow = {
    myName: "mamoru",
    print: printNameArrow
}
humanArrow.print();

#javascript

アロー関数

// これまでの関数
var fnc = function(a, b) {
    return a + b;
};
document.write(fnc(2, 3) + "<br>");
 
// アロー関数1
var arrow1 = (a, b) => {
    return a + b;
};
document.write(arrow1(3, 4) + "<br>");
 
// アロー関数2（処理がreturnだけなら、省略可能）
var arrow2 = (a, b) => a + b;
document.write(arrow2(4, 5) + "<br>");

#javascript

NODE ჩაბმა - რამოდენიმე როუტის

app.route('/api/v1/tours').get(rame migebis).post(rame migebisfunc)

#javascript

How to Use Recoil for State Management in Your React Projects

import { useRecoilValue } from "recoil";
import { TodoItemCreator } from "./TodoItemCreator";
import { TodoItem } from "./TodoItem";
import { todoListAtom } from "../recoil/atoms/todoAtom";
import "./todo.css";

export const TodoMain = () => {
  const todoList = useRecoilValue(todoListAtom);

  return (
    <div className="parent-container">
      <div>
        <TodoItemCreator />
        {todoList.length > 0 && (
          <div className="todos-list">
            {todoList.map((todoItem) => (
              <TodoItem key={todoItem.id} item={todoItem} />
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

#javascript

How to Use Recoil for State Management in Your React Projects

import { atom } from "recoil";

export const todoListAtom = atom({
  key: "todoListState",
  default: [],
});

#javascript

...arr

function all_max(...array ) // Put it first index of  in new Array 
{
   console.log(array)
}
function koko(array)//extract elements  of array 
{ 
  console.log(...array)
}
function arr(array)
{
  console.log(array)
}
function arr2(...array)
{
  console.log(...array)
}
all_max([20, 30, 40])
koko([20, 30, 40])
arr([20, 30, 40])
arr2([20, 30, 40])

#javascript

JavaScript Variables

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

#javascript

JavaScript Variables

let sum = 44;
console.log(sum);   // 44

#javascript

map() example

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

#javascript #html #css

Form Validate

<!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>Document</title>
    <style>
        body {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-items: center;
            align-items: center;
            background-color: aqua;
            justify-content: center;
            /* text-align: center; */
            height: 100vh;
            background: url(https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1748&q=80);
            background-position: center;
            background-size: cover;
        
        }
        
        h1 {
            text-align: center;
        }
        
        #form {
            background-color: #c7ab9d;
            border: 2px solid rgb(4, 0, 255);
            border-radius: 10px;
            width: 400px;
            height: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        
        }
        
        
        
        h2 {
            font-size: 30px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 5px;
        }
        
        input {
            height: 30px;
            width: 250px;
            border-radius: 5px;
            padding: 10px;
            margin: 5px;
            /* padding: 10px; */
        }
        
        input[type='submit'] {
            background-color: purple;
            text-align: center;
            align-content: center;
            color: white;
            height: 50px;
            font-size: 30px;
            width: 200px;
            padding-bottom: 20px;
            border: 0px;
        }
        
        .error {
            margin: 10px;
            color: blue;
        }
    </style>
</head>

<body>
    <h1>Form Validation</h1>
    <div id="form">
        <h2>Login Form</h2>
        <form action="" onsubmit="return validateform()">
            <input type="text" class="form" name="" id="username" placeholder="Enter Username">
            <br>
            <span id="usererror" class="error"></span>
            <br>
            <input type="password" class="form" id="password" placeholder="Enter Password">
            <br>
            <span class="error" id="passerror"></span>
            <br>
            <!-- <input type="submit" value="Pls Submit"> -->
            <button type="submit">Pls Submit</button>
        </form>
    </div>
    <script>
        let user = document.getElementById('username');
        let pass = document.getElementById('password');
        let condition1 = 0;
        let condition2 = 0;
        
        flag
        function validateform() {
        
            if (user.value == '') {
                document.getElementById('usererror').innerHTML = "User Name Blank";
                condition1 = 0;
            } else if (user.value.length < 5) {
                document.getElementById('usererror').innerHTML = "Pls Enter more than 4 Charactre"
                condition1 = 0;
        
            } else {
                document.getElementById('usererror').innerHTML = ""
                document.getElementById('usererror').style.color = "Green";
                condition1 = 1;
        
            }
            if (pass.value == '') {
                document.getElementById('passerror').innerHTML = "Password Cannot Blank";
                condition2 = 0;
        
            }
            else if (pass.value.length < 5) {
                document.getElementById('passerror').innerHTML = "Pls Enter more than 4 Charactre";
                condition2 = 0;
        
            } else {
                document.getElementById('passerror').innerHTML = "";
                document.getElementById('passerror').style.color = "Green";
                condition2 = 1;
        
            }
            if (condition1 == 1 & condition2 == 1) {
                return true;
            } else {
                return false;
            }
        }
        
    </script>
</body>

</html>

#javascript

Flexbox

Flex-direction:  Column,  row, reverse, - მიმართულება მაღლა დაბლა.
flex-wrap:  wrap, no-wrap, wrap-reverse,   - გადასვლა შემდეგ ხაზზე თუარა. 
flex-flow: column-reverse wrap-reverse;  - ზედა ორის მიქსი. 


The frogs are spread all over the pond, but the lilypads are bunched at the top. You can use align-content to set how multiple lines are spaced apart from each other. This property takes the following values:

flex-start: Lines are packed at the top of the container.
flex-end: Lines are packed at the bottom of the container.
center: Lines are packed at the vertical center of the container.
space-between: Lines display with equal spacing between them.
space-around: Lines display with equal spacing around them.
stretch: Lines are stretched to fit the container.
This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.

#javascript

Save Your ChatGPT Conversation as a Markdown File

function h(html) { return html.replace(/<p>/g, '\n\n').replace(/<\/p>/g, '').replace(/<b>/g, '**').replace(/<\/b>/g, '**').replace(/<i>/g, '_').replace(/<\/i>/g, '_').replace(/<code[^>]*>/g, (match) => { const lm = match.match(/class="[^"]*language-([^"]*)"/); return lm ? '\n```' + lm[1] + '\n' : '```'; }).replace(/<\/code[^>]*>/g, '```').replace(/<[^>]*>/g, '').replace(/Copy code/g, '').replace(/This content may violate our content policy. If you believe this to be in error, please submit your feedback — your input will aid our research in this area./g, '').trim(); } (()=>{ const e=document.querySelectorAll(".text-base");let t="";for(const s of e)s.querySelector(".whitespace-pre-wrap")&&(t+=`**${s.querySelector('img')?'You':'ChatGPT'}**: ${h(s.querySelector(".whitespace-pre-wrap").innerHTML)}\n\n`);const o=document.createElement("a");o.download="Conversation with ChatGPT.md",o.href=URL.createObjectURL(new Blob([t])),o.style.display="none",document.body.appendChild(o),o.click()})();

#javascript

BeliefData.js

export const data = [
    {
        id : 1,
        title: "Equifax UK brings agility and resilience with Google Cloud",
        date: "Case Studies | 24 Jun 2022",
        imgUrl: "https://www.tcs.com/content/dam/global-tcs/en/images/what-we-do/products-platforms/products/tcschroma/AdobeStock_423856912.jpeg/jcr:content/renditions/cq5dam.thumbnail.1280.765.png",
        cardUrl: "https://www.tcs.com/what-we-do/industries/communications-media-information-services/case-study/equifax-cloud-transformation-migration"
    },
    {
        id: 2,
        title: "Maersk partners with TCS for end-to-end IoT-based reefer monitoring solution",
        date: "Case Studies | 29 Jul 2022",
        imgUrl: "https://www.tcs.com/content/dam/global-tcs/en/images/what-we-do/services/iot-and-digital-engineering/next-gen-field-services/AdobeStock_318963598-Web-3840x1512.jpg/jcr:content/renditions/cq5dam.thumbnail.1280.765.png",
        cardUrl: "https://www.tcs.com/what-we-do/industries/travel-and-logistics/case-study/maersk-cloud-iot-platform-automate-reefer-monitoring-system"
    },
    {
        id: 3,
        title: "Morrisons Partners with TCS to Transform HR Operations and EX",
        date: "Case Studies | 30 Nov 2022",
        imgUrl: "https://www.tcs.com/content/dam/global-tcs/en/images/who-we-are/iron-mountain-Web-3840x1512.jpg/jcr:content/renditions/cq5dam.thumbnail.1280.765.png",
        cardUrl: "https://www.tcs.com/what-we-do/services/cognitive-business-operations/case-study/morrisons-supermarkets-hr-operations-employee-experience"
    },
    {
        id: 4,
        title: "Strengthening Cybersecurity with TCS’ Managed Security Services",
        date: "Case Studies | 16 Dec 2022",
        imgUrl: "https://www.tcs.com/content/dam/global-tcs/en/images/insights/blogs/women-workforce-cybersecurity-tcs-careers.jpg/jcr:content/renditions/cq5dam.thumbnail.1280.765.png",
        cardUrl: "https://www.tcs.com/what-we-do/services/cybersecurity/case-study/strengthening-cybersecurity-with-tcs-managed-security-services"
    }, 
]

#javascript #react.js

Belief.js

import React from 'react'
import './App.css';
import { data } from './beliefdata'

export default function Belief() {

  const cardData = data.map(item => {
    return (
      <a key={item.id} className="beliefCard" href={item.cardUrl} target="_blank">
        <img src={item.imgUrl} alt='beliefCard' />
        <h1>{item.title}</h1>
        <p>{item.date}</p>
      </a>
    )
  })

  return (
    <div className='container1'>
      <div className='insightsTitle'>
        <h1>Belief in action</h1>
      </div>

      <div className="beliefCardsContainer">
        {cardData}
      </div>
    </div>
  )
}

#javascript

Add Column Group in Oracle Apex

$("#uiLocation").find('thead').prepend(`
      <tr> +
        <th class="t-Report-colHead" align="center" colspan="1"></th> +
        <th class="t-Report-colHead" align="center" colspan="2">Running Totals</th> +
        <th class="t-Report-colHead" align="center" colspan="2">End of Last Period</th> +
        <th class="t-Report-colHead" align="center" colspan="2">Stock Count
      </tr>`
    );

#javascript

sorting and eliminating duplicates

function longest(s1, s2) {
  const totalString = (s1+s2).split('').sort()
  for (let i=0; i < totalString.length; i++) {
    while(totalString[i] === totalString[i+1]) totalString.splice(i+1, 1)
  }
    return totalString.join('')
}

#javascript

Counting true

function countSheeps(arrayOfSheep) {
  let count = 0
  for (const sheep of arrayOfSheep)
    if (sheep === true) {
      count++
    }
  
  return count
}

function countSheeps(arrayOfSheep) {
  return arrayOfSheep.filter(sheep => sheep).length
}

function countSheeps(arrayOfSheep) {
  //return arrayOfSheep.filter(sheep => sheep).length
  return arrayOfSheep.reduce((total, sheep)=>{
    return sheep ? total+=1 : total
  }, 0)
}

#javascript

Jaden Casing strings

String.prototype.toJadenCase = function () { 
  const words = this.split(' ')

  for(let i = 0; i < words.length; i++){
    const wordArr = words[i].split('')
    wordArr[0] = wordArr[0].toUpperCase()
    words[i] = wordArr.join('')
  }
 return words.join(' ')
  
  }

#javascript

quassstion

/* why if i didnt add(return false) i cant see the result of my console  */


document.getElementById('reg').onsubmit=()=>{
  let phoneinput=document.getElementById('phone').value
  let phoneRe=/\(\d{4}\)\d{3}-\d{4}/ig  //(1234)567-8910
  let validationResult=phoneRe.test(phoneinput)
  console.log("🚀 ~ file: main.js:5 ~ document.getElementById ~ validationResult:", validationResult)
    // return false
}

#javascript

[Dev Tools] Log all events fired on an element

// In the Dev Tools console, paste this:

monitorEvents($0); // $0 refers to the last element selected

// For a specific element, and optionally an event type:
monitorEvents(document.body, 'mouse')

// To cancel:
unmonitorEvents($0)

#javascript

Reverses the words in a string

function reverseWords(str) {
let reverseWords = str.split(" ")
.map(word => word.split("").reverse().join(""))
return reverseWords.join(" ")
}

#html #css #javascript

VideoPicker

<!DOCTYPE html>
<html>
  <head>
	<title>Video Picker</title>
	<link rel="stylesheet" href="style.css">
  </head>
  <body>
	<h1>Video Picker</h1>
	<form>
	  <input type="text" id="videoUrl" placeholder="Enter video URL...">
	  <button type="button" id="addVideoBtn">Add Video</button>
	</form>
	<hr>
	
	<h3 id="videoCount"></h3>

	
	<div id="videoList"></div>
	
	<script src="script.js">
	alert("If you want you can modify the UI of this project, to adapt on your needs\n" + "\nhave a great and blessed day 🤝🏼😊");

alert("Enter as many YouTube video links as you want to, and see the magic")


window.onload = function() {
const videoList = document.getElementById('videoList');
const addVideoBtn = document.getElementById('addVideoBtn');

// Load videos from LocalStorage on page load
loadVideos();

addVideoBtn.addEventListener('click', addVideo);

function addVideo() {
  const videoUrl = document.getElementById('videoUrl').value;
  const videoId = getVideoId(videoUrl);

  if (videoId) {
	const videoItem = createVideoItem(videoId);
	videoList.appendChild(videoItem);
	
	// Save video to LocalStorage
	saveVideo(videoId);
  }

  document.getElementById('videoUrl').value = '';
}

function getVideoId(url) {
  const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/;
  const match = url.match(regex);

  if (match && match[1]) {
	return match[1];
  } else {
	alert('Invalid video URL');
	return null;
  }
}

function createVideoItem(videoId) {
  const videoItem = document.createElement('div');
  videoItem.className = 'video-item';
  const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`;
  const videoUrl = `https://www.youtube.com/watch?v=${videoId}`;
  videoItem.innerHTML = `
	<a href="${videoUrl}" target="_blank">
	  <img src="${thumbnailUrl}" alt="Video thumbnail">
	  <h2>${videoId}</h2>
	</a>
	<button class="remove-video-btn">Remove</button>
  `;

  // Add event listener to the 'Remove' button
  const removeBtn = videoItem.querySelector('.remove-video-btn');

  removeBtn.addEventListener('click', () => {
	removeVideo(videoId);
	videoItem.remove();
  });

  return videoItem;
}

function removeVideo(videoId) {
  let videos = [];
  if (localStorage.getItem('videos')) {
	videos = JSON.parse(localStorage.getItem('videos'));
  }
  const index = videos.indexOf(videoId);
  if (index !== -1) {
	// Display confirmation dialog box
	const confirmed = confirm("Are you sure you want to remove this video? 😥");
	if (confirmed) {
	  // Remove video from list
	  videos.splice(index, 1);
	  localStorage.setItem('videos', JSON.stringify(videos));
	  const videoItem = document.getElementById(videoId);
	  videoList.removeChild(videoItem);
	}
  }
}


function saveVideo(videoId) {
  let videos = [];
  if (localStorage.getItem('videos')) {
	videos = JSON.parse(localStorage.getItem('videos'));
  }
  if (!videos.includes(videoId)) {
	videos.push(videoId);
	localStorage.setItem('videos', JSON.stringify(videos));
  }
}

function loadVideos() {
  if (localStorage.getItem('videos')) {
	const videos = JSON.parse(localStorage.getItem('videos'));
	const videoCount = document.getElementById('videoCount');
	videoCount.textContent = `You have ${videos.length} videos in the list.`;
	videos.forEach(videoId => {
	  const videoItem = createVideoItem(videoId);
	  videoList.appendChild(videoItem);
	});
  }
}

}
/*
The saveVideo() function takes the video ID and saves it to an array in LocalStorage. The loadVideos() function is called on page load and loads the videos from LocalStorage, creating a videoItem for each one and appending it to the videoList. This way, the user's added videos will persist even if they close and reopen the page.*/
	
	</script>
  </body>
</html>

#javascript

npm for node

NPM I SLUGIFY
NPM I NODEMON --save-dev   
npm i nodemon --global   <--globalurad amaxsovrebs

#html #javascript

Clear input fields with button

#HTML#
<lightning-layout-item size="6" >
                <lightning-input type="text" onchange={handleInput} maxlength="9" placeholder="Digite o CEP"> </lightning-input>
</lightning-layout-item>

<lightning-layout-item size="12" padding="horizontal-small">
                <lightning-input disabled="true" value={obj.logradouro} type="text" placeholder="Rua" data-id="form"> </lightning-input>
</lightning-layout-item>

<lightning-button class="btn" onclick={clearFields} label="Limpar" variant="brand"></lightning-button>

#JS#
clearFields() {
        this.template.querySelectorAll('lightning-input').forEach(element => {
            element.value = null;
        });

        // you can also reset one by one by id
        // this.template.querySelector('lightning-input[data-id="form"]').value = null;
}

#javascript

Takes the vowels out of a string

function disemvowel(str) {
    const vowel = ['a', 'e', 'i', 'o', 'u', 'A', 'E', 'I', 'O', 'U'];
    let result = "";
  
  for (let i=0; i<str.length; i++)
    
    if (!vowel.includes (str[i])) {
      result += str[i]
    }
    return result;  
}

#subract #weeks #in #javascript

Subtract in weeks

 var m_names = new Array("JAN", "FEB", "MAR",
     "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC");
 var d = new Date();
 d.setDate(d.getDate() + 70);
 var curr_date = d.getDate();
 var curr_month = d.getMonth();
 var curr_year = d.getFullYear();
 var current = curr_date + "-" + m_names[curr_month] + "-" + curr_year;

 console.log(current)

#javascript

javascript - stop all instances of node.js server - Stack Overflow

// Find process
lsof -Pi :3000

// Kill by PID 
kill 14704


// If it doesn't work using SIGTERM will force it (The SIGTERM signal is a generic signal used to cause program termination. Unlike SIGKILL , this signal can be blocked, handled, and ignored.)
kill -9 14704

#javascript

Finds a needle in a haystack

function findNeedle(haystack) {
  const indexOfNeedle = haystack.indexOf("needle");
 return haystack.includes("needle"), `found the needle at position ${indexOfNeedle}`;
}

#javascript

Count positives, sum negatives

function countPositivesSumNegatives(input) {
  if (!input || !input.length) return []
  let positives = 0
  let negSum = 0
  for(const num of input){
    if(num > 0)positives++
    else negSum+=num
  }
  return [positives, negSum]
}
//OR 
function countPositivesSumNegatives(input) {
  if (!input || !input.length)
    return []
  let countPositive = 0
  let sumNegative = 0
  for (let i=0; i<input.length; i++)
    if(input[i] > 0) {
      countPositive++; 
    }
  else if(input[i] < 0) {
    sumNegative += input[i]};
return [countPositive, sumNegative]
}

#javascript

Make Uppercase

function makeUpperCase(str) {
 return str.toUpperCase()
  
}

#javascript

Abbreviate a two word name

function abbrevName(name){
  const nameArr = name.split(' ')
  return `${nameArr[0][0].toUpperCase()}.${nameArr[1][0].toUpperCase()}`
}

#javascript

Will you make it?

const zeroFuel = (distanceToPump, mpg, fuelLeft) => {
  return fuelLeft * mpg >= distanceToPump

};

#javascript

Hello World

// Write a function "greet" that returns "hello world!"
function greet() {
  return "hello world!"
}

#javascript

Boolean value to string

function boolToWord( bool ){
 if (bool === true) return "Yes"
  else return "No"
}

#javascript

Odd or even

function evenOrOdd(number) {
  if (number%2===0) return "Even"
  else return "Odd"
}

#javascript

Rock paper scissors

const rps = (p1, p2) => {

if (p1 ==="rock" && p2 === "rock") return "Draw!"
if (p1 ==="rock" && p2 === "paper") return "Player 2 won!"
if (p1 ==="rock" && p2 === "scissors") return "Player 1 won!"
  
if (p1 ==="paper" && p2 === "rock") return "Player 1 won!"
if (p1 ==="paper" && p2 === "paper") return "Draw!"
if (p1 ==="paper" && p2 === "scissors") return "Player 2 won!" 
 
if (p1 ==="scissors" && p2 === "rock") return "Player 2 won!"
if (p1 ==="scissors" && p2 === "paper") return "Player 1 won!" 
if (p1 ==="scissors" && p2 === "scissors") return "Draw!"
  
};

#javascript

Return strings

function greet(name){
  return `Hello, ${name} how are you doing today?`
}

#javascript

Simple multiplication

function simpleMultiplication(number) {
   if (number%2 === 0) return number*8
  else return number *9
}

#javascript

Square and Sum

function squareSum(numbers){
  let sum = 0
  for (let i=0; i<numbers.length; i++) {
   sum += numbers[i]**2 
  }
return sum
}

#javascript

Converts a number to a string

function numberToString(num) {
return ""+num
}

#javascript

Convert a boolean to a string

function booleanToString(b){
if(b) { return "true"}
  else{return "false"}
}

#javascript

Remove first and last characters

function removeChar(str){
return str.substring(1, str.length -1)
};

#javascript

Highest and Lowest numbers

function highAndLow(numbers){
  numbers = numbers.split(" ");
 return `${Math.max(...numbers)} ${Math.min(...numbers)}`
}

#javascript

How do I detect a click outside an element?

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

#javascript #nodejs

Running a test intro

const Arithmetic = require("../arithmetic");
//tests arithmetic class
describe("Arithmetic", () => {
  //organizational tool containing tests
  describe("Initialization", () => {
    it("should set 'number' when created", () => {
      // Arrange
      const num = 108;
      // Act
      const obj = new Arithmetic(num);
      // Assert
      expect(obj.number).toEqual(num);
    });
  })
           })

#javascript

javascript - JS map return object - Stack Overflow

const rockets = [
    { country:'Russia', launches:32 },
    { country:'US', launches:23 },
    { country:'China', launches:16 },
    { country:'Europe(ESA)', launches:7 },
    { country:'India', launches:4 },
    { country:'Japan', launches:3 }
];

const launchOptimistic = rockets.map(function(elem) {
  return {
    country: elem.country,
    launches: elem.launches+10,
  } 
});

console.log(launchOptimistic);

#javascript

javascript - Running NPM scripts sequentially - Stack Overflow

npm run pre-build && npm run build_logic && npm run post_build && npm run exit
Use && (double ampersand) for sequential execution.
Use & (single ampersand) for parallel execution.

#javascript

.reduce() example

const people = [
  { name: "Kyle", age: 26 },
  { name: "John", age: 31 },
  { name: "Sally", age: 42 },
  { name: "Jill", age: 42 },
];
// reduce people array down to an individual result which groups by age
const result = people.reduce((groupedPeople, person) => {
    const age = person.age;
    // if theres no one with this age, create array
    if (groupedPeople[age] == null) groupedPeople[age] = [];
    // add person to array by age
    groupedPeople[age].push(person);
    // return all people grouped 
    return groupedPeople;
}, {})

console.log(result)

#javascript #html

Select an Element By ID

<!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>Document</title>
</head>

<body>
    <h1>select an Element By ID</h1>
    <ul>
        <li>List 1</li>
        <li id="second">List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
    </ul>
    <script>
        let elm = document.getElementById("second");
        console.log(elm);   // this stores an element as a object, it returns <li id="second">List 2</li>
        console.log(elm.innerHTML);        // this return the value store by an object  "List 2" // this method is used to get value
        elm.innerHTML = "<p>List Modified</p>";       // this method is used to set the value of an object
        // console.log("This value is After Modifying : " + elm.innerHTML);
    </script>
</body>

</html>

#javascript #html

Get Element By Class Name

<!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>Document</title>
</head>

<body>
    <h1>Select an Element By Class Name</h1>
    <ol>
        <li class="class para">List 1</li>
        <li class="class1">List 2</li>
        <li class="class">List 3</li>
        <li class="class1">List 4</li>
        <li class="class">List 5</li>
    </ol>
    <script>
        let elm1=document.getElementsByClassName("class");
        // Here in case of class there is a collection created of objects
        console.log(elm1);   // This return a collection
        console.log(elm1.length)     // return no. of elements in object
        // to access each elent we use loop
        for(let i=0; i<elm1.length;i++){
            // console.log(elm[i]);    // return object details 
            console.log(elm1[i].innerHTML);      // returns value of an object
            elm1[i].innerHTML="Upadted element with 1 class contains"
        }
        let elm=document.getElementsByClassName("class para");
        // Here in case of class there is a collection created of objects
        console.log(elm);   // This return a collection
        console.log(elm.length)     // return no. of elements in object
        // to access each elent we use loop
        for(let i=0; i<elm.length;i++){
            // console.log(elm[i]);    // return object details 
            console.log(elm[i].innerHTML);      // returns value of an object
            elm[i].innerHTML="Upadted elements with 2 class contains"
            console.log(elm[i].innerHTML);
        
            // Note : if same properties is used in different scripts then last one is executed
        }
    </script>
</body>

</html>

#javascript

JS function basics

function sayHello() {
  console.log("Hello World");
}

sayHello();

function add(num1, num2) {
  console.log(num1 + num2);
}

add(5, 10);

function substract(num1, num2) {
  return num1 - num2;

  console.log("After the return"); // it won't be logged because it's after return
}

const result = substract(10, 2);

console.log(result, substract(20, 5));

#javascript

How to Get Map Time and Distance using Google Apps Script

function getDirection() {
  
  // DECLARE SHEET
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var mapSheet = ss.getSheetByName("MAP");
  
  var start = mapSheet.getRange('B1').getValue();
  var end = mapSheet.getRange('B2').getValue();
  
  var directions = Maps.newDirectionFinder()
    .setOrigin(start)
    .setDestination(end)
    .setMode(Maps.DirectionFinder.Mode.DRIVING)
    .getDirections();
  
  //Logger.log(directions.routes[0].legs[0].duration.text);

  //CLEAR QUESTION AND ANSWER
  mapSheet.getRange('A6:D500').clear();
  
  //NEXT ROW ON MAP SHEET
  var nextRow = mapSheet.getLastRow() + 1;

  for (var i = 0; i < directions.routes[0].legs.length; i++) 
  {
    var endAddress = directions.routes[0].legs[i].end_address;
    var startAddress = directions.routes[0].legs[i].start_address;
    var distance = directions.routes[0].legs[i].distance.text;
    var duration = directions.routes[0].legs[i].duration.text;
    
    mapSheet.getRange(nextRow,1).setValue(startAddress);
    mapSheet.getRange(nextRow,2).setValue(endAddress);
    mapSheet.getRange(nextRow,3).setValue(distance);
    mapSheet.getRange(nextRow,4).setValue(duration);
    
    nextRow++;

  }
}

#javascript

How to Use doGet(e) Function to Start HTML Google Web App

Google Apps Script Code Used in Video Below:

function doGet(e) {
  Logger.log(JSON.stringify(e));
  Logger.log(e.parameter['message']);
  return HtmlService.createHtmlOutputFromFile('ExampleFile1');  
}

//function doGet(e) 
//{
//  Logger.log(JSON.stringify(e));
//  Logger.log(e.parameter['message']);
//  var htmlOutput =  HtmlService.createTemplateFromFile('ExampleFile2');
//  htmlOutput.message = e.parameter['message'];
//  return htmlOutput.evaluate();
//}

//function doGet(e) 
//{
//  Logger.log(JSON.stringify(e));
//  var htmlOutput =  HtmlService.createTemplateFromFile('ExampleFile3');
//  if(!e.parameter['username'])
//  {
//    htmlOutput.username = '';   
//  }
//  else
//  {
//    htmlOutput.username = 'Username is: ' + e.parameter['username'];
//  }
//  htmlOutput.url = getUrl();  
//  return htmlOutput.evaluate();
//}
//
//
//function getUrl() {
// var url = ScriptApp.getService().getUrl();
// return url;
//}

#javascript

text to html converter - Tìm trên Google

jQuery(html).text();

#javascript #reac #jest

simple test example - jest react

test('render h1 element', () => {
  render(<App />);

  screen.debug();

  expect(screen.getByText('Hello World')).toBeInTheDocument();
});

#javascript

Date Object in JavaScript

let x = new Date();
document.write(x, "<br>");
let y = new Date("17 Feb 2023 13:40:59");
document.write(y);
let z = y.getDay();
document.write("<br>", "<br>");
let w = [
"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Firday", "Saturday"
];
document.write("Date in Term of JS Execute : " + z, "<br>", "<br>");

// Using If Else Function
/*
if (z == 0) {
  document.write(w[0]);
} else if (z == 1) {
  document.write(w[1]);
} else if (z == 2) {
  document.write(w[2]);
} else if (z == 3) {
  document.write(w[3]);
} else if (z == 4) {
  document.write(w[4]);
} else if (z == 5) {
  document.write(w[5]);
} else {
  document.write(w[6]);
}
*/
// Using same with Switch Case
switch (z) {
  case 0:
    document.write(w[0]);
    break;
  case 1:
    document.write(w[1]);
    break;
  case 2:
    document.write(w[2]);
    break;
  case 3:
    document.write(w[3]);
    break;
  case 4:
    document.write(w[4]);
    break;
  case 5:
    document.write(w[5]);
    break;
  default:
    document.write(w[6]);
}

#javascript

javascript - Mongoose.js: force always populate - Stack Overflow

var autoPopulateLead = function(next) {
  this.populate('lead');
  next();
};

bandSchema.
  pre('findOne', autoPopulateLead).
  pre('find', autoPopulateLead);

var Band = mongoose.model('band', bandSchema, 'bands');

#javascript #autopopulate

javascript - Mongoose.js: force always populate - Stack Overflow

var autoPopulate = function(next) {
  this.populate('updated_by','name').populate('created_by','name');
  next();
};

ProjectSchema.pre('findOne', autoPopulate);
ProjectSchema.pre('find', autoPopulate);

#javascript

input-2

let mu=document.getElementById("mu")
let res=document.getElementById("result")


mu.onclick=()=>{
let num1 = document.getElementById("firstNumber").value;
let num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 * num2;
}
<!-- **************************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>Document</title>
</head>

<body >

    <form>
        1st Number : <input type="text" id="firstNumber" /><br>
        2nd Number: <input type="text" id="secondNumber" /><br>
        <input type="button" id="mu" Value="Multiply" />
        <input type="button" Value="Divide" />
        </form>
        <p>The Result is : <br>
        <span id = "result"></span>
        </p>





             <!--   This JS IMPORt  -->
    <script src="main.js" type="module"></script>
</body>

</html>
 
<!-- ******************************************************** -->

#javascript

input-1

 <!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>Document</title>
</head>

<body >

    <form>
        1st Number : <input type="text" id="firstNumber" /><br>
        2nd Number: <input type="text" id="secondNumber" /><br>
        <input type="button" onClick="multiplyBy()" Value="Multiply" />
        <input type="button" onClick="divideBy()" Value="Divide" />
        </form>
        <p>The Result is : <br>
        <span id = "result"></span>
        </p>


<script>function multiplyBy()
    {
            num1 = document.getElementById("firstNumber").value;
            num2 = document.getElementById("secondNumber").value;
            document.getElementById("result").innerHTML = num1 * num2;
    }
    </script>





<!-- 
    
  1st Number:<input type="text" id="t1" value="23" ></br>
  2nd Number:<input type="text" id="t2"></br>
     <button onclick="multiplyBy()">Multiply</button>
     <button>Divide</button>
     <p id="result">The Result is:</p> -->
             <!--   This JS IMPORt  -->
    <script src="main.js" type="module"></script>
</body>

</html>
 
<!-- ******************************************************** -->

#javascript

Get scrolling direction

  const [scrollStatus, setScrollStatus] = useState({
    scrollDirection: null,
    scrollPos: 0
  });

  useEffect(() => {
    if (innerRef.current) {
      innerRef.current.addEventListener("scroll", handleScrollDocument);
    }

    return () =>
      innerRef?.current.removeEventListener("scroll", handleScrollDocument);
  }, []);

  function handleScrollDocument() {
    if (!innerRef?.current) return;
    setScrollStatus((prev) => {
      // to get 'previous' value of state
      return {
        scrollDirection:
          innerRef.current.scrollTop > prev.scrollPos ? "down" : "up",
        scrollPos: innerRef.current.scrollTop
      };
    });
  }

#javascript #html

How to link to selected text on a page in Chrome using bookmarklet

javascript:(function()%7Bconst selectedText %3D getSelection().toString()%3Bconst newUrl %3D new URL(location)%3BnewUrl.hash %3D %60%3A~%3Atext%3D%24%7BencodeURIComponent(selectedText)%7D%60%3Bwindow.open(newUrl)%7D)()

#javascript #foreach

Loop Over querySelectorAll Matches

Not all browsers support forEach on NodeLists, but for those that do:

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    console.log("forEach worked");
  });
});

bit deeper browser support.

var divs = document.querySelectorAll('div');
[].forEach.call(divs, function(div) {
  // do whatever
  div.style.color = "red";
});

#javascript

Prints the last edit date of a website

var pageDate = new Date(document.lastModified);
console.log("Page was last modified on: " + pageDate);

#javascript

javascript - Defining and calling function in one step - Stack Overflow

> (function fac (n) {
    return (n === 0 ? 1 : n*fac(n-1));
  })(10)
3628800

#javascript

vercel deploy help

Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope Process

#javascript

Convert 1 or 0 to a boolean in js

Boolean(Number("0"));

#javascript

How to Consume REST APIs in React – a Beginner's Guide

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((response) => response.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      })
      .catch((err) => {
         console.log(err.message);
      });
}, []);

#javascript

Loading animation in react native

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Modal,
  Image,
  ActivityIndicator
} from 'react-native';

class Loader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: this.props.isLoading
    }
  }

  static getDerivedStateFromProps(nextProps) {
    return {
      isLoading: nextProps.isLoading
    };
  }

  render() {
    return (
      <Modal
        transparent={true}
        animationType={'none'}
        visible={this.state.isLoading}
        style={{ zIndex: 1100 }}
        onRequestClose={() => { }}>
        <View style={styles.modalBackground}>
          <View style={styles.activityIndicatorWrapper}>
            <ActivityIndicator animating={this.state.isLoading} color="black" />
            
            {/* If you want to image set source here */}
            {/* <Image
              source={require('../assets/images/loader.gif')}
              style={{ height: 80, width: 80 }}
              resizeMode="contain"
              resizeMethod="resize"
            /> */}
          </View>
        </View>
      </Modal>
    )
  }
}

const styles = StyleSheet.create({
  modalBackground: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'space-around',
    backgroundColor: '#rgba(0, 0, 0, 0.5)',
    zIndex: 1000
  },
  activityIndicatorWrapper: {
    backgroundColor: '#FFFFFF',
    height: 100,
    width: 100,
    borderRadius: 10,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around'
  }
});

export default Loader

#javascript

How to check if the value exists in array?

const army=["Marcos", "DeltaForce", "Seals", "SWAT", "HeadHunters"];  

if(army.indexOf("DeltaForce") !== -1) {
  console.log("exist")
} else {
  console.log("not exist")
}

if(army.includes("DeltaForce")) {
  console.log("exist")
} else {
  console.log("not exist")
}

for(let i = 0; i < army.length; i++) {
  if(army[i] === "DeltaForce") {
    console.log("exist")
    break
  }
}

#javascript

How to print array?

let array = [1, 2, 3, 4, 5];

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

let j = 0;
while(j < array.length) {
  console.log(array[j]);
  j++;
}

for(let value of array) {
  console.log(value)
}

for(let key in array) {
  console.log(array[key])
}

array.forEach(num => console.log(num));

#javascript

js to list row items in console

document.querySelectorAll(".row").forEach(
function(node) {
var text = node.innerText.replaceAll(/\n/g, ", ");
var link = node.innerHTML.match(/reporting\/[0-9a-zA-Z\-_]*/)|| "";
console.log(text + link[0] );
}
);

#javascript #array

Vérifier si une variable est un tableau

console.log(Array.isArray([1, 3, 5]));

#javascript #shopify

javascript for image get image width and height and add height and width attribute on those img tag

Here is a JavaScript code snippet that will get the width and height of all images on a page and add the width and height attributes to each img tag:



var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
    var img = images[i];
    var width = img.naturalWidth;
    var height = img.naturalHeight;
    img.setAttribute("width", width);
    img.setAttribute("height", height);
}


This code uses the document.getElementsByTagName method to select all img tags on the page, then loops through each one using a for loop. The naturalWidth and naturalHeight properties of each img tag are used to get its dimensions, and the setAttribute method is used to add the width and height attributes with the appropriate values.

#javascript

Flow Control in JavaScript: Callbacks, Promises, async/await

async function connect() {
  try {
    const
      connection = await asyncDBconnect('http://localhost:1234'),
      session = await asyncGetSession(connection),
      user = await asyncGetUser(session),
      log = await asyncLogAccess(user);

    return log;
  }
  catch (e) {
    console.log('error', err);
    return null;
  }
}

// run connect (self-executing async function)
(async () => { await connect(); })();

#javascript

Decipher Kitty's Text (Tough Challenge#1)

cipheredText = "54686973007761730061007265616c6c7900746f756768006368616c6c656e676500666f72006d65210042757400490064696400697421";
textLen = cipheredText.length;
RealText = "";
for (i=0; i<textLen;i+=2)
{
 RealText = RealText.concat(String.fromCharCode((parseInt(cipheredText[i]+cipheredText[i+1],16))));
}
console.log(RealText);

#javascript #string

Supprimer un mot d'une chaîne de caractères

mystring.replace('/r','')

#javascript

javascript difference between indexof and findindex - Google Search

/* findIndex vs indexOf methods.
All return -1 when no value is found. */

let myArray = [9, 2, 2, 8, 4, 2, 5, 6, 2, 9];

// findIndex(arg => argCondition): return the first index 
// for which the given function is true.
myArray.findIndex(x => x > 2); // → 3

// indexOf(value): return the value's first index.
myArray.indexOf(2); // → 1

// lastIndexOf(value): return the value's last index.
myArray.lastIndexOf(2); // → 8

// indexOf(value, start): return the value's first index, 
// starting at the given position.
myArray.indexOf(2, 3); // → 5

// lastIndexOf(value, stop): return the value's last index, 
// stopping at the given position.
myArray.lastIndexOf(2, 3); // → 2

#javascript #jest #test

Jest test dom

test('Check addTodo able add todo to todoList', () => {
  document.body.innerHTML = `
    <input id="newTodoInput" />
    <button id="addTodoBtn">Add todo</button>
    <ol id="todoList"></ol>
  `;
  require('../todolist.js');

  const newTodoInput = document.getElementById('newTodoInput');
  const addTodoBtn = document.getElementById('addTodoBtn');
  const todolist = document.getElementById('todoList');

  newTodoInput.value = 'New todolist!';
  addTodoBtn.click();

  expect(todolist.innerHTML).toBe('<li>New todolist!</li>');
});

#javascript #jest #test

jest test ajax

const APP = (() => {
  var userData = null;
  const myURL = "http://stackoverflow.com";
  const getData = () => {
    $.ajax({
      type: "GET",
      url: myURL,
      success: obj.handleSuccess,
      error: obj.handleError,
    });
  };
  const handleError = () => {
    console.log("ERROR");
  };
  const handleSuccess = (data) => {
    userData = data;
    console.log(userData);
  };
  const render = () => {
    return "<div>some stuff</div>";
  };
  const obj = {
    getData,
    handleError,
    handleSuccess,
    render,
  };
  return obj;
})();
module.exports = APP;


const APP = require("../ajax");
describe("Ajax", () => {
  beforeEach(() => {
    jest.restoreAllMocks();
  });
  it("Data should load", () => {
    const ajaxSpy = jest.spyOn($, "ajax");
    APP.getData();
    expect(ajaxSpy).toBeCalledWith({
      type: "GET",
      url: "http://stackoverflow.com",
      success: expect.any(Function),
      error: expect.any(Function),
    });
  });
  it("should handle success", () => {
    const mUser = { userId: 1 };
    const logSpy = jest.spyOn(console, "log");
    APP.handleSuccess(mUser);
    expect(logSpy).toBeCalledWith(mUser);
  });
  it("should handle error", () => {
    const logSpy = jest.spyOn(console, "log");
    APP.handleError();
    expect(logSpy).toBeCalledWith("ERROR");
  });
});

#javascript

Enabling Strong Authentication with WebAuthn - Chrome Developers

let credential = await navigator.credentials.get({ publicKey: {
  challenge: new Uint8Array([139, 66, 181, 87, 7, 203, ...]),
  rpId: "acme.com",
  allowCredentials: [{
    type: "public-key",
    id: new Uint8Array([64, 66, 25, 78, 168, 226, 174, ...])
  }],
  userVerification: "required",
}});

#javascript

Enabling Strong Authentication with WebAuthn - Chrome Developers

let credential = await navigator.credentials.create({ publicKey: {
  challenge: new Uint8Array([117, 61, 252, 231, 191, 241, ...]),
  rp: { id: "acme.com", name: "ACME Corporation" },
  user: {
    id: new Uint8Array([79, 252, 83, 72, 214, 7, 89, 26]),
    name: "jamiedoe",
    displayName: "Jamie Doe"
  },
  pubKeyCredParams: [ {type: "public-key", alg: -7} ]
}});

#javascript

javascript - Copy array by value - Stack Overflow

// Literal values (type1)
const booleanLiteral = true;
const numberLiteral = 1;
const stringLiteral = 'true';

// Literal structures (type2)
const arrayLiteral = [];
const objectLiteral = {};

// Prototypes (type3)
const booleanPrototype = new Bool(true);
const numberPrototype = new Number(1);
const stringPrototype = new String('true');
const arrayPrototype = new Array();
const objectPrototype = new Object(); // or `new function () {}

#javascript

delete item from array of objects javascript - Google Search

const apps = [
  {id:1, name:'Jon'}, 
  {id:2, name:'Dave'},
  {id:3, name:'Joe'}
]

//remove item with id=2
const itemToBeRemoved = {id:2, name:'Dave'}

apps.splice(apps.findIndex(a => a.id === itemToBeRemoved.id) , 1)

//print result
console.log(apps)
 Run code snippet

#javascript

javascript - Remove property for all objects in array - Stack Overflow

const newArray = array.map(({dropAttr1, dropAttr2, ...keepAttrs}) => keepAttrs)

#jquery #javascript

Jquear For Header Scroll in magento 2

require(['jquery'], function($){
  "use strict";

    $(window).scroll(function() {
        if ($(this).scrollTop() > 1){
        $('header').addClass('sticky');
        }
        else{
        $('header').removeClass('sticky');
        }
    });
});

#javascript

javascript - Get the index of the object inside an array, matching a condition - Stack Overflow

a = [
  {prop1:"abc",prop2:"qwe"},
  {prop1:"bnmb",prop2:"yutu"},
  {prop1:"zxvz",prop2:"qwrq"}];
    
index = a.findIndex(x => x.prop2 ==="yutu");

console.log(index);

#c# #javascript

How to escape a single quote from a JSON string?

.replace("'","\\'")

#javascript

Detect Overflows in JavaScript

const findOverflows = () => {
    const documentWidth = document.documentElement.offsetWidth;

    document.querySelectorAll('*').forEach(element => {
        const box = element.getBoundingClientRect();

        if (box.left < 0 || box.right > documentWidth) {
            console.log(element);
            element.style.border = '1px solid red';
        }
    });
};

// Execute findOverflows to find overflows on the page.
findOverflows();

#javascript

javascript - Removing undefined values from Array - Stack Overflow

data.filter(Boolean)

#javascript

Bootstrap · The most popular HTML, CSS, and JS library in the world.

npm i bootstrap@5.3.0-alpha1

#css #javascript

Accordion

$(".acc:first-child h6").addClass('active');
  $(".acc:first-child .answer").addClass('active');
  $(".acc:first-child").addClass('active');
  $(".acc h6").click( function () {
      if ($(this).hasClass('active')) {
        $(this).next().slideUp(function () {
          $(this).parent().find(".active").removeClass('active');
          $(this).parent(".acc.active").removeClass('active');
        });     
      } else {
        $(this).parent().siblings().removeClass('active');
        $(this).parent().siblings().find(".active").removeClass('active');
        $(this).parent().siblings().find(".answer").slideUp(300);
        $(this).parent().siblings().find(".answer").removeClass("open");

        $(this).addClass('active');
        $(this).parent(".acc").addClass('active');
        $(this).next().addClass("open").slideDown(300);
      }
    });

#javascript

Timezone issue for Start Date in map/reduce || RESOLVED THE ISSUE

/**
     * @author Anirban Gupta (Huron)
     * @NApiVersion 2.1
     * @NScriptType UserEventScript
     * @NModuleScope SameAccount
     * @NAmdConfig /SuiteScripts/Library/requireConfig.json
     */
/**
     * Module Description
     * Script to adjust Date and Time to be entered from the User's end if the User's Timezone and Server's Timezone does not match.
     *
     *  Version   Date           Author              Comments
     *  1.0       18 Jan 2023    Anirban Gupta       Script Created.
     *
 */

define(['N/runtime', 'N/format', 'N/config', 'moment', 'moment-timezone'], function (runtime, format, config, moment, momentTz) {
    /**
     * Function definition to be triggered before record is submitted.
     *
     * @param {Object} context - Context
     * @Since 2015.2
     */
    function beforeSubmit(context) {
        log.audit('UE Type', context.type);
        log.audit('Execution Context', runtime.executionContext);
        let userObj = runtime.getCurrentUser();
        log.audit('User', 'User Internal ID:' + userObj.id);

        if (isSupportedUserEventType(context) && isSupportedContext()) {
            try {
                let userTimezone = userObj.getPreference({
                    name: 'timezone'
                });
                log.debug('Timezone', 'User preference for timezone: ' + userTimezone);

                let serverConfigurationRecord = config.load({
                    type: config.Type.COMPANY_INFORMATION
                });

                /* Fetching Server Timezone */
                let serverTimeZone = serverConfigurationRecord.getValue('timezone');
                log.debug('TimeZone', 'Server timezone: ' + serverTimeZone);

                /* If User's Timezone is not the same as the server's Timezone - we are manipulating the Date/Time to be set */
                if (userTimezone !== serverTimeZone) {
                    let startdate = context.newRecord.getValue('startdate');
                    let originalTime = format.parse({
                        value: startdate,
                        type: format.Type.DATETIME,
                        timezone: userTimezone
                    });
                    log.debug('Original Time', 'Original Time: ' + originalTime);
                    let originalDateInMomentFormat = parseInt(originalTime.getFullYear()) + '-' + (originalTime.getMonth() + 1) + '-' + parseInt(originalTime.getDate());

                    /* Calculating difference between Server's Timezone and User's Timezone */
                    let timeDifferenceInMinutes = momentTz(originalDateInMomentFormat).tz(userTimezone).utcOffset() - momentTz(originalDateInMomentFormat).tz(serverTimeZone).utcOffset();

                    /* Sometimes an entire day's minutes (1440) is added to the difference when we are calculating offset between a non-DST timezone and a DST timezone on the DST shift day, hence we are recalculating to get the correct difference */
                    while (timeDifferenceInMinutes > 1440) {
                        timeDifferenceInMinutes -= 1440;
                    }
                    while (timeDifferenceInMinutes < -1440) {
                        timeDifferenceInMinutes += 1440;
                    }

                    /* Adding the difference between the Server's Timezone and User's Timezone to the Date/Time set by the User */
                    let adjustedUserDateTime = new Date(momentTz(originalDateInMomentFormat).add(timeDifferenceInMinutes, 'minutes').tz(userTimezone).toISOString());

                    /* Preparing Date */
                    let adjustedUserDate = (adjustedUserDateTime.getMonth() + 1) + '/' + parseInt(adjustedUserDateTime.getDate()) + '/' + parseInt(adjustedUserDateTime.getFullYear());
                    let formattedAdjustedDate = format.parse({ value: adjustedUserDate, type: format.Type.DATE });
                    log.debug('Adjusted User Date', adjustedUserDate);

                    /* Preparing Time */
                    let adjustedUserTime = moment(adjustedUserDateTime).format("hh:mm a");
                    log.debug('Adjusted User Time', adjustedUserTime);

                    context.newRecord.setValue('startdate', formattedAdjustedDate);
                    context.newRecord.setText('starttime', adjustedUserTime);

                    log.audit('Adjusted Date', 'Adjusted Date And Time is:' + adjustedUserDateTime);
                }
            } catch (error) {
                log.debug("Error", error.name + ' ' + error.message + ' ' + error.stack);
            }
        }
    }

    let isSupportedUserEventType = (context) => {
        let UserEventType = context.UserEventType;
        return [UserEventType.CREATE, UserEventType.EDIT, UserEventType.XEDIT].indexOf(context.type) > -1;
    };

    // Does not support Webstore and RESTlet
    let isSupportedContext = () => {
        let ContextType = runtime.ContextType;

        return [
            ContextType.CLIENT,
            ContextType.CSV_IMPORT,
            ContextType.USEREVENT,
            ContextType.USER_INTERFACE,
            ContextType.WORKFLOW].indexOf(runtime.executionContext) > -1;
    };

    return {
        beforeSubmit: beforeSubmit
    };
});

#javascript

Timezone issue for Start Date in map/reduce

/**
     * @author Anirban Gupta (Huron)
     * @NApiVersion 2.1
     * @NScriptType UserEventScript
     * @NModuleScope SameAccount
     * @NAmdConfig /SuiteScripts/Library/requireConfig.json
     */
/**
     * Module Description
     * Script to adjust Date and Time to be entered from the User's end if the User's Timezone and Server's Timezone does not match.
     *
     *  Version   Date           Author              Comments
     *  1.0       18 Jan 2023    Anirban Gupta       Script Created.
     *
 */

define(['N/runtime', 'N/format', 'N/config', 'moment', 'moment-timezone'], function (runtime, format, config, moment, momentTz) {
    /**
     * Function definition to be triggered before record is submitted.
     *
     * @param {Object} context - Context
     * @Since 2015.2
     */
    function beforeSubmit(context) {
        log.audit('UE Type', context.type);
        log.audit('Execution Context', runtime.executionContext);
        let userObj = runtime.getCurrentUser();
        log.audit('User', 'User Internal ID:' + userObj.id);

        if (isSupportedUserEventType(context) && isSupportedContext()) {
            try {
                let userTimezone = userObj.getPreference({
                    name: 'timezone'
                });
                log.debug('Timezone', 'User preference for timezone: ' + userTimezone);

                let serverConfigurationRecord = config.load({
                    type: config.Type.COMPANY_INFORMATION
                });

                /* Fetching Server Timezone */
                let serverTimeZone = serverConfigurationRecord.getValue('timezone');
                log.debug('TimeZone', 'Server timezone: ' + serverTimeZone);

                /* If User's Timezone is not the same as the server's Timezone - we are manipulating the Date/Time to be set */
                if (userTimezone !== serverTimeZone) {
                    let startdate = context.newRecord.getValue('startdate');
                    let originalTime = format.parse({
                        value: startdate,
                        type: format.Type.DATETIME,
                        timezone: userTimezone
                    });
                    log.debug('Original Time', 'Original Time: ' + originalTime);
                    let originalDateInMomentFormat = parseInt(originalTime.getFullYear()) + '-' + (originalTime.getMonth() + 1) + '-' + parseInt(originalTime.getDate());

                    /* Calculating difference between Server's Timezone and User's Timezone */
                    let timeDifferenceInMinutes = momentTz(originalDateInMomentFormat).tz(userTimezone).utcOffset() - momentTz(originalDateInMomentFormat).tz(serverTimeZone).utcOffset();

                    /* Sometimes an entire day's minutes (1440) is added to the difference when we are calculating offset between a non-DST timezone and a DST timezone on the DST shift day, hence we are recalculating to get the correct difference */
                    while (timeDifferenceInMinutes > 1440) {
                        timeDifferenceInMinutes -= 1440;
                    }
                    while (timeDifferenceInMinutes < -1440) {
                        timeDifferenceInMinutes += 1440;
                    }

                    /* Adding the difference between the Server's Timezone and User's Timezone to the Date/Time set by the User */
                    let adjustedUserDateTime = new Date(momentTz(originalDateInMomentFormat).add(timeDifferenceInMinutes, 'minutes').tz(userTimezone).toISOString());

                    /* Preparing Date */
                    let adjustedUserDate = (adjustedUserDateTime.getMonth() + 1) + '/' + parseInt(adjustedUserDateTime.getDate()) + '/' + parseInt(adjustedUserDateTime.getFullYear());
                    let formattedAdjustedDate = format.parse({ value: adjustedUserDate, type: format.Type.DATE });
                    log.debug('Adjusted User Date', adjustedUserDate);

                    /* Preparing Time */
                    let adjustedUserTime = moment(adjustedUserDateTime).format("hh:mm a");
                    log.debug('Adjusted User Time', adjustedUserTime);

                    context.newRecord.setValue('startdate', formattedAdjustedDate);
                    context.newRecord.setText('starttime', adjustedUserTime);

                    log.audit('Adjusted Date', 'Adjusted Date And Time is:' + adjustedUserDateTime);
                }
            } catch (error) {
                log.debug("Error", error.name + ' ' + error.message + ' ' + error.stack);
            }
        }
    }

    let isSupportedUserEventType = (context) => {
        let UserEventType = context.UserEventType;
        return [UserEventType.CREATE, UserEventType.EDIT, UserEventType.XEDIT].indexOf(context.type) > -1;
    };

    // Does not support Webstore and RESTlet
    let isSupportedContext = () => {
        let ContextType = runtime.ContextType;

        return [
            ContextType.CLIENT,
            ContextType.CSV_IMPORT,
            ContextType.USEREVENT,
            ContextType.USER_INTERFACE,
            ContextType.WORKFLOW].indexOf(runtime.executionContext) > -1;
    };

    return {
        beforeSubmit: beforeSubmit
    };
});

#javascript

NETSUITE SERVER TIMEZONE : (GMT-05:00) Eastern Time (US & Canada) || Problem resolved for Map/reduce

(GMT-05:00) Eastern Time (US & Canada)

Date time will always get in this format in MAP/REDUCE.
i.e what ever the timezone is in the netsuite user account , when map reduce run it will convert the Date time into EST(Eastern timezone ) and then show the result.

________________________________________________________________________________
Currently Anirban logic is:
That whatever the Date is set in start date , manipulate that date (by the help of time ) that when it gets converted into Eastern Time , it gives exact same date(which user tried to set at first place) with time.
i.e Manipulated DATE may look different,as per user set.But when get into map/reduce it will give the correct date as set by user.

#javascript

TO GET Line no. also of Error

catch (error) {
                log.debug("Error", error.name + error.message + error.stack);
            }

#javascript

on click, get element and then find li in element and extract what you need

        function handleClick(e) {
            console.log(e);
            console.log(e.currentTarget);
            // Empty variables
            let fieldID = '';
            let fieldAndType = '';
            // Find the index with the li element
            e.path.find(function (el) {
                if (el.nodeName === 'LI') {
                    fieldID = el.getAttribute('data-id');
                    fieldAndType = el.getAttribute('data-content');
                    el.setAttribute("disabled", "disabled");
                }
            });
            // split data content to get the field and type
            var field = fieldAndType.split('-')[0].trim();
            var type = fieldAndType.split('-')[1].trim();

            // Based on field type create the input and append it to the form
            var optionalField = '';
            if (type == {{\App\Enums\ProfileOptionalFieldsTypeEnum::Text()->value }}) {
                var optionalField = '<div class="col-span-6 sm:col-span-3 lg:col-span-4"> <label for="'+field+'" class="block text-sm font-medium text-gray-700">' + field + '</label>'
                    + '<input type="text" name="' + field + '" id="' + field + '" autocomplete="given-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"></div>';

            } else if (type == {{\App\Enums\ProfileOptionalFieldsTypeEnum::TextArea()->value }}) {
                var optionalField = '<div class="col-span-6 sm:col-span-3 lg:col-span-4"> <label for="'+field+'" class="block text-sm font-medium text-gray-700">' + field + '</label>'
                    + '<textarea type="text" name="' + field + '" id="' + field + '" rows="10" cols="85" class="tinymce" autocomplete="given-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"></textarea></div>';
            }
            // append to div optionalFields
            document.getElementById('optionalFields').innerHTML += optionalField;


        }

#javascript #nodejs #typescript

typescript start

npm install typescript --save-dev
npm install @types/node --save-dev
npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs

#javascript

How to get the difference between two arrays of objects in JavaScript - Stack Overflow

const arrayOne = [ 
  { value: "4a55eff3-1e0d-4a81-9105-3ddd7521d642", display: "Jamsheer" },
  { value: "644838b3-604d-4899-8b78-09e4799f586f", display: "Muhammed" },
  { value: "b6ee537a-375c-45bd-b9d4-4dd84a75041d", display: "Ravi" },
  { value: "e97339e1-939d-47ab-974c-1b68c9cfb536", display: "Ajmal" },
  { value: "a63a6f77-c637-454e-abf2-dfb9b543af6c", display: "Ryan" },
];
          
const arrayTwo = [
  { value: "4a55eff3-1e0d-4a81-9105-3ddd7521d642", display: "Jamsheer"},
  { value: "644838b3-604d-4899-8b78-09e4799f586f", display: "Muhammed"},
  { value: "b6ee537a-375c-45bd-b9d4-4dd84a75041d", display: "Ravi"},
  { value: "e97339e1-939d-47ab-974c-1b68c9cfb536", display: "Ajmal"},
];

const results = arrayOne.filter(({ value: id1 }) => !arrayTwo.some(({ value: id2 }) => id2 === id1));

console.log(results);

#javascript

Scroll to top of the page

    const toTop = () => window.scrollTo(0, 0);
    toTop();

#javascript

How to get distinct values from an array of objects in JavaScript? - Stack Overflow

const data = [
  { group: 'A', name: 'SD' }, 
  { group: 'B', name: 'FI' }, 
  { group: 'A', name: 'MM' },
  { group: 'B', name: 'CO'}
];
const unique = [...new Set(data.map(item => item.group))]; // [ 'A', 'B']

#javascript

Filter list use another list JS

                    let filteredDatatableData = this.datatableDataToFilter.filter(function(item) {
                        const arrSome = lstCustomerResponseTO.some(v => v.person_id === item.personId);
                        return arrSome ? true : false;
                    });


----------------------------------------------------------------------------------------

var datatableData = [{"name":"Teste1","personId":"01"},{"name":"Teste1","personId":"02"},{"name":"Teste1","personId":"03"}];
var lstCustomerResponseTO = [{"name":"Teste1","personId":"01"},{"name":"Teste1","personId":"03"}];
let filteredDatatableData = datatableData.filter(function(item) {
    const arrSome = lstCustomerResponseTO.some(v => v.personId === item.personId);
    return arrSome;
});

console.log(filteredDatatableData)

#javascript

Iterate over object key:value pairs

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// Expected output:
// "a: 1"
// "b: 2"
// "c: 3"

#javascript

Closures example

const counter = (function () {
  let privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }

  return {
    increment() {
      changeBy(1);
    },

    decrement() {
      changeBy(-1);
    },

    value() {
      return privateCounter;
    },
  };
})();

console.log(counter.value()); // 0.

counter.increment();
counter.increment();
console.log(counter.value()); // 2.

counter.decrement();
console.log(counter.value()); // 1.

#javascript

function factory for events listeners using closures

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

document.getElementById('size-12').onclick = makeSizer(12);
document.getElementById('size-14').onclick = makeSizer(14);
document.getElementById('size-16').onclick = makeSizer(16);

#javascript

Day of year - get days btw 1-365

const dayOfYear = date =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date()); // 272

#javascript

Converting JSON date string /Date()/ to Date object - Davidsekar.com

var myDate = moment.utc('/Date(1673371207)/');
console.log(myDate.fomat('DD-MM-YYYY'));

#javascript

Converting JSON date string /Date()/ to Date object - Davidsekar.com

var myDate = moment.utc('/Date(1673371207)/');
console.log(myDate.fomat('DD-MM-YYYY'));

#javascript

understaqnding functional scope

function myDog(){
  var breed = "pug";
  console.log(breed);
}

myDog(); // output => pug
console.log(breed); //output => reference error

#javascript #react.js #input #resized

input - textarea resized

const textAreaResized = () => {
  const handler = (e) => {
    const target = e.currentTarget;
    target.style.height = "auto";
    target.style.height = `${target.scrollHeight}px`;
  };

  return <textarea onChange={handler} />;
};

#javascript

Inspector - Brackets API

    function getDebuggableWindows(host, port) {
        if (!host) {
            host = "127.0.0.1";
        }
        if (!port) {
            port = 9222;
        }
        var def = new $.Deferred();
        var request = new XMLHttpRequest();
        request.open("GET", "http://" + host + ":" + port + "/json");
        request.onload = function onLoad() {
            var sockets = JSON.parse(request.response);
            def.resolve(sockets);
        };
        request.onerror = function onError() {
            def.reject(request.response);
        };

        request.send(null);

        return def.promise();
    }

#javascript

Remove Items from an Array with pop() and shift() FUNCTION

function popShift(arr) {
  let popped = arr.pop();
  let shifted = arr.shift();
  return [shifted, popped];
}

// do not change code below this line
console.log(popShift(["challenge", "is", "not", "complete"]));

#javascript

Add Items to an Array with push() and unshift() FUNCTION

function mixedNumbers(arr) {
  // change code below this line
  arr.unshift("I", 2, "three");
  arr.push(7, "VIII", 9);
  // change code above this line
  return arr;
}

// do not change code below this line
console.log(mixedNumbers(["IV", 5, "six"]));

#javascript

SAVED SEARCH CRITERIA LOGIC FOR WITHIN DATE | | WITHIN START DATE END DATE

Start Date	is on or before 01/03/2023	 
Task End Date (Custom)	is on or after 01/03/2023

IT will verifiy that 01/03/2023  lies between start and end date.

breakdown:
start date <=01/03/2023    i.e   jo date compare krna h wo piche hoga or equal <-----start date
End Date >=01/03/2023  i.e End Date ------> jo date compare krna h wo aghe hoga or equal.

so finally, :-  End Date ------>   jo date compare krna h  <-----start date

#javascript

javascript - How can I group an array of objects by key? - Stack Overflow

const cars = [{
  'make': 'audi',
  'model': 'r8',
  'year': '2012'
}, {
  'make': 'audi',
  'model': 'rs5',
  'year': '2013'
}, {
  'make': 'ford',
  'model': 'mustang',
  'year': '2012'
}, {
  'make': 'ford',
  'model': 'fusion',
  'year': '2015'
}, {
  'make': 'kia',
  'model': 'optima',
  'year': '2012'
}];

const grouped = _.groupBy(cars, car => car.make);

console.log(grouped);

#javascript

javascript - How can I group an array of objects by key? - Stack Overflow

var grouped = _.mapValues(_.groupBy(cars, 'make'),
                          clist => clist.map(car => _.omit(car, 'make')));

console.log(grouped);

#javascript

FILTER ON JSON OBJECT

var acFilter = savedsearchArray.filter(function (obj) {
                return obj.id == accountName;
              });



//##########################################################################################
// Online Javascript Editor for free
// Write, Edit and Run your Javascript code using JS Online Compiler


var savedsearchArray=[{"id":"1","name":"fz","vehicle":"bmw"},{"id":"2"}]

//returns only perticular json object , having that ID.
var acFilter = savedsearchArray.filter(function (obj) {
                return obj.id == 1;
              });
console.log("Welcome to Programiz!",acFilter);

#javascript #js #nodejs

Update all UserDrinks to rename the field:

UserDrinks.update({}, { $rename: { "creator" : "user" } }, { multi: true }, callback)

#javascript #react.js

Easiest CSS reset

*, *::before, *::after{
	box-sizing: border-box;
}

*{
	margin: 0,
	padding: 0,
}

html{
	color-scheme: dark light;
}

body{
	min-height: 100vh;
}

img, picture, video, svg{
	display: block;
	max-width: 100%;
}

input, textarea, select, button {
	font: inherit;
}

#javascript

How to host project using GitHub Pages - The Net Ninja

#1 Login to Github account
#2 Create new Git repository by going to https://github/new
#3 Fill in "Repository Name" field with name of name new repositroy
#4 Optionally fill in the "Description" field
#4 Optionaly select one or more of the "Add a Readme.md", "Add .gitignore", "choose a license" options
#5 Click "Create repository" Button
#6 Get url of new repository - click "Code" button on outer repository page that comes up and then click copy icon at end of https: repository url
#7 Open terminal window and change to the directory the project will be in.
#8 In the terminal "git clone " and past the copied repository url and execute it.
#9 cd into the project directory crated by the clone
#10 Open the directory in Visual Studio Code by entering code .
#11 In VSC create a file name index.html
#12 Edit the created file and type 'doc' and take the emmet expansion
#13 The cursor moves to a empty line after the body tag
#14 Enter an h1 tag with some textual content i.e. <h1>hello world</h1>
#15 Enter a p tab filled with lorem text
#16 duplicate the line with a ctrl-c and multiple ctrl-v's
#17 git status
#18 git ad .
#19 git commit -m "initial commit"
#20 git remote -v
#21 git push origin main
#22 git checkout -b styling		!!! Currently just local
#23 add styles.css to vsc and in index.html add link to styles.css
#24 set contents of styles.css to
body{
  margin:0;
  background:pink;
  text-align: center;
}
git add .
git commit -m styling
git push origin styling

on github repository page go to settings - page and set which branch is being to be displayed as a github page.


#900
https://www.freecodecamp.org/news/git-cheat-sheet-and-best-practices-c6ce5321f52/
https://docs.github.com/en/get-started/quickstart/github-flow

git clone <url>
git init
git remote add origin <URL>
git remote set-url origin <url>

#javascript

Parsing and converting exponential values to decimal in JavaScript - Stack Overflow || first check field type is not text

Number.prototype.noExponents = function() {
  var data = String(this).split(/[eE]/);
  if (data.length == 1) return data[0];

  var z = '',
    sign = this < 0 ? '-' : '',
    str = data[0].replace('.', ''),
    mag = Number(data[1]) + 1;

  if (mag < 0) {
    z = sign + '0.';
    while (mag++) z += '0';
    return z + str.replace(/^\-/, '');
  }
  mag -= str.length;
  while (mag--) z += '0';
  return str + z;
}
var n = 4.65661287307739E-10;
console.log(n.noExponents()) /*  returned value: (String)    0.000000000465661287307739  */
n = 9.935818877444285e+23
console.log(n.noExponents()) /*  returned value: (String)    993581887744428500000000  */

#javascript

Jquery Toggleheight but JS code

let targetStoreEle = document.querySelectorAll('.l-store--tab');

targetStoreEle.forEach(targetEl => {
    targetEl.addEventListener('click', function () {
        targetEl.classList.toggle('isActive');
        if (!targetEl.nextElementSibling.classList.contains('isActive')) {
            targetEl.nextElementSibling.classList.add('isActive');
            targetEl.nextElementSibling.style.height = 'auto';

            var height = targetEl.nextElementSibling.clientHeight + 'px';

            targetEl.nextElementSibling.style.height = '0px';

            setTimeout(function () {
                targetEl.nextElementSibling.style.height = height;
            }, 0);
        } else {
            targetEl.nextElementSibling.style.height = '0px';

            targetEl.nextElementSibling.addEventListener('transitionend', function () {
                targetEl.nextElementSibling.classList.remove('isActive');
            }, {
                once: true
            });
        }
    });
});

#javascript

21 JavaScript Code Snippets for Beginners - Classes

9. Classes
JavaScript classes are templates that consist of methods, variables, and inheritance.

/* Create Class
The following snippet will create a new class that will consist of methods and variables.
*/

class Fruit {

    constructor(name, color) {
        this._name = name;
        this._color = color;
    }

    eat() {
        console.log('You ate the ' + this.name + '.');
    }

    get name() {
        return this._name;
    }

    set name(name) {
        this._name = name;
    }

    get color() {
        return this._color;
    }

    set color(color) {
        this._color = color;
    }   

}
/* Create a new instance: */
let apple = new Fruit('Apple', 'Green');

/* Execute a method: */
apple.eat(); // Output: You ate the Apple.

/* Get property: */
console.log(apple.color); // Output: Green

/* Set property: */
apple.color = 'red';
console.log(apple.color); // Output: red

/* Create a child class: */
class Orange extends Fruit {

    constructor() {
        super('Orange', 'Orange');
    }

    throw() {
        console.log('You threw the ' + this.name + '.');
    }

}

/* Create a new instance of the child class: */
let orange = new Orange();
orange.throw(); // Output: You threw the Orange.
console.log(orange.color); // Output: Orange

#javascript

Subtrair data do Javascript

  const dataExpiracao = new Date('2023-01-03');
  let dateToday = new Date()
  const offset = dateToday.getTimezoneOffset()
  dateToday = new Date(dateToday.getTime() - (offset*60*1000))
  var dateNow = dateToday.toISOString().split('T')[0]
  console.log(dateNow)
  var currentDate = new Date(dateNow);
  console.log(currentDate)
  console.log(dataExpiracao)

  const diffTime = Math.abs(currentDate - dataExpiracao);
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
  console.log(diffTime + " milliseconds");
  console.log(diffDays + " days");

#javascript

URL' deki dataları alma

function getParameterByName(name) {
   var url = window.location.href;
   name = name.replace(/[\[\]]/g, "\\$&");
   var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
   results = regex.exec(url);
   if (!results) return null;
   if (!results[2]) return '';
   return decodeURIComponent(results[2].replace(/\+/g, " "));
}

let data =getParameterByName("filter");

#javascript

blog

var n = 21;
function square(num) {
  return num * num;
}

square(square());

#object #javascript

Basic Object

let name1={
  firstname: "Eloln", 
  lastname: "Musk",
  printFullName: function() {
    console.log(this.firstname + " " + this.lastname);
  }
}

#object #javascript

Basic Object

let name1={
  firstname: "Eloln", 
  lastname: "Musk",
  printFullName: function() {
    console.log(this.firstname + " " + this.lastname);
  }
}

#javascript #react.js

reactjs - Why is localStorage getting cleared whenever I refresh the page? - Stack Overflow

const LOCAL_STORAGE_KEY = "task-list"

function TodoList() {
  const [todoList, setTodoList] = useState(() => {
    return JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || []
  });
    
  useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todoList));
  }, [todoList]);

  ...

#javascript

BUBBLE SORT

const numArray = [20, 30, 34, 12, 3, 12, 2, 4, 5, 9, 4, 34, 1];

const numberSort = (array) => {
  let temp;
  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array.length; j++) {
      if (array[i] > array[j]) {
        temp = array[i];
        array[i] = array[j];
        array[j] = temp;
      }
    }
  }
  return array;
};

const result = numberSort(numArray);
console.log(result);

#java #json #javascript #kotlin #vue.js #android #bash

Results for Raymond Moldenschardt

 9C9299

Gain Unlimited Access to:
Raymond M.

38 Years Old

Location:

Phone:

Full Name
Address History
Age & DOB
Sexual Offenses
Possible Relatives
Social Information
Criminal History
Phone Numbers
Marriage Records
Misdemeanors
Unclaimed Money
Much More!

#javascript

COUNT UNIQUE NUMBERS JAVASCRIPT

// COUNT UNIQUE NUMBERS
// [1, 2, 2, 2, 3, 4, 4, 5, 6, 7, 8, 8]
// output -> 8
// conditions
// i = 0, j = 1
// array[i] !== array[j]
// 1. i++
// 2. array[i] = array[j]

const countUnique = (arr) => {
  if (arr.length > 0) {
    let i = 0;
    for (let j = 1; j < arr.length; j++) {
      if (arr[i] !== arr[j]) {
        i++; 
        arr[i] = arr[j];
      }
    }
    return i + 1;
  } else {
    throw new Error("Array is empty!");
  }
};

const result = countUnique([1, 2, 2, 2, 3, 4, 4, 5, 6, 7, 8, 8]);
console.log(result); // 8

#javascript

STRING ANAGRAM JAVASCRIPT

// STRING ANAGRAM
// "hello" -> "llheo"

// condition
// length check (for both string)
// String "hello"
// { h: 1, e: 1, l: 2, o: 1}

const isAnagram = (str1, str2) => {
  if (str1.length !== str2.length) {
    return false;
  }

  let counter = {};
  for (let letter of str1) {
    counter[letter] = (counter[letter] || 0) + 1;
  }

  for (let letter of str2) {
    if (!counter[letter]) {
      return false;
    }
    counter[letter] -= 1;
  }

  return true;
};

const result = isAnagram("hello", "llheo");
console.log(result); // true

#javascript

CHECKING SUM ZERO - PROBLEM JAVASCRIPT

const sumZeroPair = (arr) => {
  let left = 0, // -4
    right = arr.length - 1; // 4

  while (left < right) {
    let sum = arr[left] + arr[right]; // 0
    if (sum === 0) return [arr[left], arr[right]]; // true
    else if (sum > 0) right--;
    else left++;
  }
};

const res = sumZeroPair([-5, -4, -3, -2, 0, 2, 4, 6, 8]);
console.log(res);

#javascript

javascript - jQuery DataTables Ordering By 2 columns - Stack Overflow

var table = $('#example').DataTable({
  order: [[1, 'asc'], [0, 'asc']]
})

#javascript #react.js

Basic style measure for a webpage

<div class="page__wrapper">
	<header></header>
  	<main></main>
  	<footer></footer>
</div>

// css style
.page__wrapper {
	width: 100%;
	max-width: 1064px;
	margin: 0 auto;
	padding: 24px 20px;
}

#javascript #react.js

Overwriting Swiper navigation

// set ne style in the global style sheet
.swiper-button-prev,
.swiper-button-next {
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;
  padding: 25px;
  //background-color: rgba($black, 0.5);
  border: none;
  border-radius: 50px;
  top: unset !important;
  bottom: -80px;
  outline: none;
  cursor: pointer;
}

.swiper-button-next {
  right: unset !important;
  margin-left: calc(60px + $half-gap);
  background-image: url("../public/arrows-16px-1-tail-right.svg");
  background-repeat: no-repeat;
  background-position: center;

  &::after {
    display: none;
  }

  &.white {
    background-color: rgba($white, 0.5);
  }

  &.black {
    background-color: rgba($black, 0.5);
  }
}

.swiper-button-prev {
  left: 0 !important;
  background-image: url("../public/arrows-16px-1-tail-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(180deg);

  &::after {
    display: none;
  }

  &.white {
    background-color: rgba($white, 0.5);
  }

  &.black {
    background-color: rgba($black, 0.5);
  }
}

#reactnative #javascript

Back Button

import React, { useEffect } from "react";
import { Text, View, StyleSheet, BackHandler, Alert } from "react-native";
import { useBackHandler } from "@react-native-community/hooks"

const App = () => {

  // Callback function for back action
  const backActionHandler = () => {
    Alert.alert("Alert!", "Are you sure you want to exit app?", [
      {
        text: "Cancel",
        onPress: () => null,
        style: "cancel"
      },
      { text: "YES", onPress: () => BackHandler.exitApp() }
    ]);
    return true;
  };

  // hook which handles event listeners under the hood
  useBackHandler(backActionHandler)

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Click Back button!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    fontSize: 18,
    fontWeight: "bold"
  }
});

export default App;

#javascript #shopify #jquery

JS Shopify product JSON

(function($){
    $(document).ready(function(e){
      var store_url = "https://footballsupplements.com/"; // replaced with your shopify store url
      var product_id = "free-multivitamin"; // replaced with your product id
      var full_url = store_url + '/products/' + product_id + '.json';
      
      $.ajax({
        url: full_url,
        success: function(data) {
          //console.log("product id:" + data.product.id);
          //console.log("product title:" + data.product.title);
          // ... to do 
          // all your process with product data logic
          console.log(data);
        }
      });
      
      });
    })(jQuery);

#javascript

in googlesheets put security in a range with sheetname script after sometime and date

function protectOnEdit(event) {
  var ss = SpreadsheetApp.getActive();
  var range = ss.getRange('Statutory Comp Jan-23to Dec-23!D6:E10');
  var timeZone = Session.getScriptTimeZone();
  var stringDate = Utilities.formatDate(new Date(), timeZone, '13/12/22 15:10');
  var description = 'Protected on ' + stringDate;
  var protection = range.protect().setDescription(description);

  // below code taken directly from Google's documentation

  var me = Session.getEffectiveUser();

  protection.addEditor(me);
  protection.removeEditors(protection.getEditors());
  if (protection.canDomainEdit()) {
    protection.setDomainEdit(false);
  }
}

#javascript

Is Before - momentjs.com

moment('2010-10-20').isBefore('2010-10-21'); // true

#javascript

Adaptive Height

// my slick slider as constant object
const mySlider = $('.testimonail-wrapper').on('init', function(slick) {
 
  // on init run our multi slide adaptive height function
  multiSlideAdaptiveHeight(this);
 
}).on('beforeChange', function(slick, currentSlide, nextSlide) {
 
  // on beforeChange run our multi slide adaptive height function
  multiSlideAdaptiveHeight(this);
 
}).slick(options);
 
 
// our multi slide adaptive height function passing slider object
function multiSlideAdaptiveHeight(slider) {
 
  // set our vars
  let activeSlides = [];
  let tallestSlide = 0;
 
  // very short delay in order for us get the correct active slides
  setTimeout(function() {
 
    // loop through each active slide for our current slider
    $('.slick-track .slick-active', slider).each(function(item) {
 
      // add current active slide height to our active slides array
      activeSlides[item] = $(this).outerHeight();
 
    });
 
    // for each of the active slides heights
    activeSlides.forEach(function(item) {
 
      // if current active slide height is greater than tallest slide height
      if (item > tallestSlide) {
 
        // override tallest slide height to current active slide height
        tallestSlide = item;
 
      }
 
    });
 
    // set the current slider slick list height to current active tallest slide height
    $('.slick-list', slider).height(tallestSlide);
 
  }, 10);
 
}
 
 
// when window is resized
$(window).on('resize', function() {
 
  // run our multi slide adaptive height function incase current slider active slides change height responsively
  multiSlideAdaptiveHeight(mySlider);
 
});

#javascript #react.js

Setting pattern and message to be displayed on input validation

<form action="/action_page.php">
  <label for="pswrd">Password:</label>
  <input
    type="password"
    id="pswrd"
    name="pswrd"
    pattern="[a-z0-9]{1,15}"
    title="Password should be digits (0 to 9) or alphabets (a to z)."
  />

  <button type="submit">Submit</button>
</form>

#javascript

【专业技术】如何写出优美的C 代码? - 腾讯云开发者社区-腾讯云

Node *node = NULL; 
List *list = NULL; 
 
void insert(void *node); 
void drop(void *node); 
void clear(); 
int getSize(); 
void print(); 
void* get(int index); 
 
List *ListConstruction(){ 
   list = (List*)malloc(sizeof(List)); 
   node = (Node*)malloc(sizeof(Node)); 
   list->head = node; 
   list->insert = insert;// 将 insert 函数实现注册在 list 实体上
   list->drop = drop; 
   list->clear = clear; 
   list->size = 0; 
   list->getSize = getSize; 
   list->get = get; 
   list->print = print; 
   list->_this = list;// 用 _this 指针将 list 本身保存起来
 
   return (List*)list; 
}

#javascript

【专业技术】如何写出优美的C 代码? - 腾讯云开发者社区-腾讯云

#ifndef _ILIST_H 
 #define     _ILIST_H 
 
 // 定义链表中的节点结构
 typedef struct node{ 
    void *data; 
    struct node *next; 
 }Node; 
 
 // 定义链表结构
 typedef struct list{ 
    struct list *_this; 
    Node *head; 
    int size; 
    void (*insert)(void *node);// 函数指针
    void (*drop)(void *node); 
    void (*clear)(); 
    int (*getSize)(); 
    void* (*get)(int index); 
    void (*print)(); 
 }List; 
 
 void insert(void *node); 
 void drop(void *node); 
 void clear(); 
 int getSize(); 
 void* get(int index); 
 void print(); 
 
 #endif      /* _ILIST_H */

#music #player #javascript

Audio Player HTML5 Wellcome to Rofa Music store

<!-- Called of font style  file -->



<link href='https://fonts.googleapis.com/css?family=Allerta' rel='stylesheet'>





    <h2>Wellcome to Rofa Music store</h2>

    <div class="container-audio">

        <audio controls  loop autoplay>

                   <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/new_year_dubstep_minimix.ogg" type="audio/ogg">

                   Your browser dose not Support the audio Tag

               </audio>

    </div>

    <div class="container-audio">

        <div class="colum1">

            <div class="row"></div>

        </div>

        <div class="colum1">

            <div class="row"></div>

        </div>

        <div class="colum1">

#javascript

8 Ball Questionare Game

let userName = '';
userName ? console.log(`Hello, ${userName}!`) : console.log('Hello!');
let eightBall = '';
console.log(eightBall);
let userQuestion = 3;

let randomNumber = Math.floor(Math.random() * 8);
if (userQuestion === 0) {
    console.log('Outlook not so good');
} else if (userQuestion === 1) {
    console.log('Do not count on it');
} else if (userQuestion === 2) {
    console.log('Signs point to yes');
} else if (userQuestion === 3) {
    console.log('Reply hazy try again');
} else if (userQuestion === 4) {
    console.log('Cannot predict now');
} else if (userQuestion === 5) {
    console.log('It is certain!');
} else if (userQuestion === 6) {
    console.log('It is decidedly so');
} else if (userQuestion === 7) {
  console.log('My sources say no');
} else{console.log('Ask me a question to get started.')};

#javascript

archive habbit weekly

// temporarily disabled 
    // function getJournalDaily() {
    //     const url = "/student/habit-daily";

    //     const loading = `
    //     <tr class="loading-dot bg-white-2">
    //         <td colspan="8">
    //             <div class="d-flex align-items-center">
    //                 <div>
    //                     <div class="snippet col-1" data-title=".dot-flashing">
    //                         <div class="stage">
    //                             <div class="dot-flashing"></div>
    //                         </div>
    //                     </div>
    //                 </div>
    //                 <p class="grey-6 ml-4">Memuat pembiasaan harian...</p>
    //             </div>
    //         </td>
    //     </tr>`;

    //     $.ajax({
    //         method: 'get',
    //         dataType: 'json',
    //         data: {
    //             currentEmptyHabit,
    //         },
    //         url: url,
    //         success: function(response) {
    //             let emptyDate = moment(response.emptyDateHabit[currentEmptyHabit]);
    //             let today = moment(moment().format('YYYY-MM-DD'));
    //             let dateTimeAgo = today.diff(emptyDate, 'days');
    //             let startOfWeek = moment(response.emptyDateHabit[currentEmptyHabit]).startOf('isoWeek').format('YYYY-MM-DD');
    //             let endOfWeek = moment(response.emptyDateHabit[currentEmptyHabit]).endOf('isoWeek').format('YYYY-MM-DD');
    //             if (response.emptyDateHabit == []) {

    //                 let infoBoxHabbitDone = (`
    //                         <div class="info-box-success mt-4">
    //                             <div>
    //                                 <x-icon classicon="fill-dark-green" type="done" />
    //                             </div>
    //                             <div class="ml-4">
    //                                 Alhamdulillah... semua jurnal <b>sudah selesai</b> diisi.
    //                             </div>
    //                         </div>
    //                     `);
    //                 $('#infobox-habbit').html(infoBoxHabbitDone);
    //                 $('.icon-status').html(`<x-icon classicon="fill-green-3" type="done" />`);
    //             } else {
    //                 if (dateTimeAgo === 1) {
    //                     let habitType = '';
    //                     if (response.habitProgress.undone.SALAT_ZIKIR.length != 0) {
    //                         habitType = 'SALAT_ZIKIR';
    //                     } else if (response.habitProgress.undone.DAILY.length != 0) {
    //                         habitType = 'DAILY';
    //                     } else if (response.habitProgress.undone.WEEKLY.length != 0) {
    //                         habitType = 'WEEKLY';
    //                     }

    //                     let infoBoxYesterday = (`
    //                         <div class="info-box-group mt-4">
    //                             <div class="info-box-danger">
    //                                 <div>
    //                                     <x-icon classicon="fill-dark-red" type="due" />
    //                                 </div>
    //                                 <div class="ml-4">
    //                                     Kamu belum selesai mengisi jurnal <b>kemarin</b> (${moment(response.emptyDateHabit[currentEmptyHabit]).format("dddd, DD MMMM YYYY")}).
    //                                     Ayo tuntaskan sebelum lupa. Semangaaat!
    //                                 </div>
    //                             </div>
    //                             <div class="info-box-button">
    //                                 <div id="fill-journal-daily" class="info-box-button-item font-15 line-h20 font-w600 blue cursor-pointer" data-currentdate="${response.emptyDateHabit[currentEmptyHabit]}" data-startdate="${startOfWeek}" data-enddate="${endOfWeek}" data-habitType="${habitType}">
    //                                     Isi Jurnal
    //                                 </div>
    //                                 <div class="info-box-button-item grey-3 cursor-pointer" type="button" onClick="getJournalDaily()" ${currentEmptyHabit == (response.emptyDateHabit.length - 1) ? 'disabled' : ''}>
    //                                     Lewati
    //                                 </div>
    //                             </div>
    //                         </div>
    //                     `);

    //                     $('#infobox-habbit').html(infoBoxYesterday);
    //                 } else if (dateTimeAgo === 0) {
    //                     let infoBoxToday = (`
    //                         <div class="info-box-primary mt-4">
    //                             <div>
    //                                 <x-icon classicon="fill-dark-blue" type="pin" />
    //                             </div>
    //                             <div class="ml-4">
    //                                 Ayo selesaikan mengisi <b>jurnal hari ini</b> (${moment(response.emptyDateHabit[currentEmptyHabit]).format("dddd, DD MMMM YYYY")})!
    //                             </div>
    //                         </div>
    //                         `);

    //                     $('#infobox-habbit').html(infoBoxToday);
    //                     if (response.habitProgress.progress == 0) {
    //                         $('.icon-status').html(`<x-icon classicon="fill-red-3" type="unknown" />`);
    //                     } else {
    //                         $('.salat-zikir-dashboard').removeClass('d-none');
    //                         if (response.habitProgress.progress == 47) {
    //                             $('#progress-salat-zikir').css('width', `100` + '%');
    //                         } else {
    //                             $('#progress-salat-zikir').css('width', `${response.habitProgress.progress * 2}` + '%');
    //                         }
    //                         $('#progress-salat-zikir').attr('aria-valuenow', `${response.habitProgress.progress}`);
    //                         $('#progress-salat-zikir').attr('aria-valuemax', response.habitProgress.max);
    //                     }
    //                 } else if (dateTimeAgo > 0 && dateTimeAgo != 1) {

    //                     let habitType = '';
    //                     if (response.habitProgress.undone.SALAT_ZIKIR.length != 0) {
    //                         habitType = 'SALAT_ZIKIR';
    //                     } else if (response.habitProgress.undone.DAILY.length != 0) {
    //                         habitType = 'DAILY';
    //                     } else if (response.habitProgress.undone.WEEKLY.length != 0) {
    //                         habitType = 'WEEKLY';
    //                     }

    //                     let infoBoxDayAgo = (`
    //                     <div class="info-box-group mt-4">
    //                         <div class="info-box-danger">
    //                             <div>
    //                                 <x-icon classicon="fill-dark-red" type="due" />
    //                             </div>
    //                             <div class="ml-4">
    //                                 Kamu belum selesai mengisi jurnal <b>${dateTimeAgo} hari yang lalu</b> (${moment(response.emptyDateHabit[currentEmptyHabit]).format("dddd, DD MMMM YYYY")}).
    //                                 Ayo tuntaskan sebelum lupa. Semangaaat!
    //                             </div>
    //                         </div>
    //                         <div class="info-box-button">
    //                             <div id="fill-journal-daily" class="info-box-button-item font-15 line-h20 font-w600 blue cursor-pointer" data-currentdate="${response.emptyDateHabit[currentEmptyHabit]}" data-startdate="${startOfWeek}" data-enddate="${endOfWeek}" data-habitType="${habitType}">
    //                                 Isi Jurnal
    //                             </div>
    //                             <div class="info-box-button-item grey-3 cursor-pointer" type="button" onClick="getJournalDaily()" ${currentEmptyHabit == (response.emptyDateHabit.length - 1) ? 'disabled' : ''}>
    //                                 Lewati
    //                             </div>
    //                         </div>
    //                     </div>
    //                     `);
    //                     $('#infobox-habbit').html(infoBoxDayAgo);
    //                 }
    //             }

    //             currentEmptyHabit += 1;

    //         },
    //         error: function(error) {}
    //     });
    // }

    // function getJournalWeekly() {
    //     const url = "/student/habit-weekly";

    //     const loading = `
    //     <tr class="loading-dot bg-white-2">
    //         <td colspan="8">
    //             <div class="d-flex align-items-center">
    //                 <div>
    //                     <div class="snippet col-1" data-title=".dot-flashing">
    //                         <div class="stage">
    //                             <div class="dot-flashing"></div>
    //                         </div>
    //                     </div>
    //                 </div>
    //                 <p class="grey-6 ml-4">Memuat pembiasaan harian...</p>
    //             </div>
    //         </td>
    //     </tr>`;

    //     $.ajax({
    //         method: 'get',
    //         dataType: 'json',
    //         url: url,
    //         success: function(response) {
    //             let dataDeedNull = 0;
    //             response.draftHabituationReport.forEach((index, key) => {
    //                 if (index.deeds == null) {
    //                     dataDeedNull += 1;
    //                 }
    //             });


    //             if (dataDeedNull > 0) {
    //                 let infoBoxDayAgo = (`
    //                 <div class="info-box-group mt-4">
    //                     <div class="info-box-danger">
    //                         <div>
    //                             <x-icon classicon="fill-dark-red" type="due" />
    //                         </div>
    //                         <div class="ml-4">
    //                             Kamu belum selesai mengisi jurnal <b>minggu lalu</b> (${moment(response.startOfWeek).format("DD MMMM YYYY")} - ${moment(response.endOfWeek).format("DD MMMM YYYY")}). Ayo tuntaskan sebelum lupa. Semangaaat!
    //                         </div>
    //                     </div>
    //                     <div class="info-box-button">
    //                         <div id="fill-journal-weekly" class="info-box-button-item font-15 line-h20 font-w600 blue cursor-pointer" data-startdate="${response.startOfWeek}" data-enddate="${response.endOfWeek}">
    //                             Isi Jurnal
    //                         </div>
    //                         <div class="info-box-button-item grey-3 cursor-pointer" type="button" onClick="getJournalDaily()">
    //                             Lewati
    //                         </div>
    //                     </div>
    //                 </div>
    //                 `);
    //                 $('#infobox-habbit').html(infoBoxDayAgo);
    //             } else {
    //                 getJournalDaily();
    //             }
    //         },
    //         error: function(error) {}
    //     });
    // }

#javascript

How to get "COUNT(*)" in Supabase - Stack Overflow

const { data, count } = supabase
  .from('countries')
  .select('*', { count: 'exact' })

#javascript

如何合并多个SQLite数据库？ - 问答 - 腾讯云开发者社区-腾讯云

import sqlite3
import os


def merge_databases(db1, db2):
    con3 = sqlite3.connect(db1)

    con3.execute("ATTACH '" + db2 +  "' as dba")

    con3.execute("BEGIN")
    for row in con3.execute("SELECT * FROM dba.sqlite_master WHERE type='table'"):
        combine = "INSERT OR IGNORE INTO "+ row[1] + " SELECT * FROM dba." + row[1]
        print(combine)
        con3.execute(combine)
    con3.commit()
    con3.execute("detach database dba")


def read_files(directory):
    fname = []
    for root,d_names,f_names in os.walk(directory):
        for f in f_names:
            c_name = os.path.join(root, f)
            filename, file_extension = os.path.splitext(c_name)
            if (file_extension == '.sqlitedb'):
                fname.append(c_name)

    return fname

def batch_merge(directory):
    db_files = read_files(directory)
    for db_file in db_files:
        merge_databases(db_files[0], db_file)

if __name__ == '__main__':
    batch_merge('/directory/to/database/files')

#javascript

regex - Regular expression to get a string between two strings in Javascript - Stack Overflow

const s = "My cow always gives milk, thier cow also gives milk";
const matches = s.matchAll(/cow (.*?) milk/g);
console.log(Array.from(matches, x => x[1]));

#javascript

Find a value in an array of objects in Javascript [duplicate]

let arr = [
    { name: "string 1", value: "this", other: "that" },
    { name: "string 2", value: "this", other: "that" },
  ];

  console.log("arr: ", arr);

#javascript

What's New In DevTools (Chrome 108) - Chrome Developers

function bar(){return foo(),foo(),42}

#javascript

What's New In DevTools (Chrome 108) - Chrome Developers

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

#javascript

MongooseValidator

const mongoose = require('mongoose')
const Schema = mongoose.Schema
const { hash } = require('../helpers/bcrypt')

const userSchema = new Schema({

email: {
    type: String,
    required: [true, 'email is required'],
    match: [/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/, 'Invalid email format'],
    validate: {
        validator: function(v){
            return this.model('User').findOne({ email: v }).then(user => !user)
        },
        message: props => `${props.value} is already used by another user`
    },
},
password: {
    type: String,
    required: [true, 'password is required']
}

})

userSchema.pre('save', function(done){
    this.password = hash(this.password)
    done()
})


module.exports = mongoose.model('User', userSchema)

#javascript #jquery

get url-parameter (key)

function getParameterByName(key,url) {
  name = key.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
  results = regex.exec(url);
  if (results) {
    results = decodeURIComponent(results[1].replace(/\+/g, " "));
  }
  else {
    results = false;
  }
  return results;
}

#javascript

Message passing - Chrome Developers

var port = chrome.runtime.connect({name: "knockknock"});
port.postMessage({joke: "Knock knock"});
port.onMessage.addListener(function(msg) {
  if (msg.question === "Who's there?")
    port.postMessage({answer: "Madame"});
  else if (msg.question === "Madame who?")
    port.postMessage({answer: "Madame... Bovary"});
});

#javascript

Message passing - Chrome Developers

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting === "hello")
      sendResponse({farewell: "goodbye"});
  }
);

#javascript

Message passing - Chrome Developers

chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  console.log(response.farewell);
});

#javascript

Message passing - Chrome Developers

// The ID of the extension we want to talk to.
var laserExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

// Make a simple request:
chrome.runtime.sendMessage(laserExtensionId, {getTargetData: true},
  function(response) {
    if (targetInRange(response.targetData))
      chrome.runtime.sendMessage(laserExtensionId, {activateLasers: true});
  }
);

// Start a long-running conversation:
var port = chrome.runtime.connect(laserExtensionId);
port.postMessage(...);

#javascript

GetFileExtension

function getFileExtension(path) {
  var lastSlash = path.lastIndexOf("/"),
      extension, baseName, parts;
  
  if (lastSlash === path.length - 1) {
    baseName = path.slice(path.lastIndexOf("/", path.length - 2) + 1, -1);
  } else {
    baseName = path.slice(lastSlash + 1);
  }
  
  idx = baseName.lastIndexOf(".");
  
  if (idx === -1) {
    return "";
  }
  
  return baseName.substr(idx + 1);
}

#java #javascript #html

javascript - How to close current tab in a browser window? - Stack Overflow

window.top.close();
Save Snippet

#javascript

reactjs - React 18: Hydration failed because the initial UI does not match what was rendered on the server - Stack Overflow

const ReactDOMServer = require('react-dom/server');

const clientHtml = ReactDOMServer.renderToString(
<StrictMode>
    <App />
</StrictMode>
)
Save Snippet

#javascript

reactjs - React 18: Hydration failed because the initial UI does not match what was rendered on the server - Stack Overflow

const ReactDOMServer = require('react-dom/server');

const clientHtml = ReactDOMServer.renderToString(
<StrictMode>
    <App />
</StrictMode>
)
Save Snippet

#javascript

reactjs - React 18: Hydration failed because the initial UI does not match what was rendered on the server - Stack Overflow

const ReactDOMServer = require('react-dom/server');

const clientHtml = ReactDOMServer.renderToString(
<StrictMode>
    <App />
</StrictMode>
)
Save Snippet

#javascript #nodejs #rollbar

rollbar.js

//Installation
//Install the Rollbar rollbar.js package using npm:
// npm install --save rollbar


// include and initialize the rollbar library with your access token
var Rollbar = require('rollbar')
var rollbar = new Rollbar({
  accessToken: '<ACCESS_TOKEN>',
  captureUncaught: true,
  captureUnhandledRejections: true,
})

// record a generic message and send it to Rollbar
rollbar.log('Hello world!')

#javascript

React Scrollspy

import React, { useState, useEffect } from 'react';
import throttle from 'lodash/fp/throttle';

export interface useScrollSpyParams {
  activeSectionDefault?: string; //The key of the section that should be active by default
  offsetPx?: number;
  sectionElementRefs: { [key: string]: React.RefObject<HTMLElement> }; //The key of each element should be uniq!
  throttleMs?: number;
  scrollingElement?: React.RefObject<HTMLElement>;
}

export const useScrollSpy = ({
  activeSectionDefault = '',
  offsetPx = 0,
  scrollingElement,
  sectionElementRefs = {},
  throttleMs = 100,
}: useScrollSpyParams) => {
  const [activeSection, setActiveSection] = useState(activeSectionDefault);

  const scrollIntoView = (sectionKey: string) => {
    const sectionElement = sectionElementRefs[sectionKey].current;
    const scrollingContainer = scrollingElement?.current || window;
    if (sectionElement && scrollingContainer) {
      scrollingContainer.scrollTo({
        top: sectionElement.getBoundingClientRect().top + offsetPx - 60,
        behavior: 'smooth',
      });
    }
  };

  const handle = throttle(throttleMs, () => {
    let currentSectionId = activeSection;

    Object.entries(sectionElementRefs).forEach(([sectionKey, ref]) => {
      const section = ref.current;
      if (!section || !(section instanceof Element)) return;
      // GetBoundingClientRect returns values relative to viewport
      if (section.getBoundingClientRect().top + offsetPx < 0) {
        currentSectionId = sectionKey;
        return;
      }
      return;
    });
    setActiveSection(currentSectionId);
  });

  useEffect(() => {
    const scrollable = scrollingElement?.current ?? window;
    scrollable.addEventListener('scroll', handle);

    // Run initially
    handle();

    return () => {
      scrollable.removeEventListener('scroll', handle);
    };
  }, [sectionElementRefs, offsetPx, scrollingElement, handle]);
  return { activeSection, scrollIntoView };
};

#javascript

Destructuring

// Object destructuring
const person = {
  name: 'John',
  age: 32,
  city: 'New York',
  country: 'USA'
};

const { name, age } = person;

// Object destructuring with alias

const { name: firstName, age: years } = person;

// Array destructuring
const fruits = ['apple', 'banana', 'orange'];
const [first, second, third] = fruits;

#javascript

dataURLtoFile

function dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);

      while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
      }

      return new File([u8arr], filename, { type: mime });
  }

#javascript

javascript - Script causes “Refused to execute inline script: Either the 'unsafe-inline' keyword, a hash… or a nonce is required to enable inline execution” - Stack Overflow

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data:gap: http://www.visitsingapore.com   https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="lib/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="scripts/key.js"></script>
<script>$.ajax({
        url: ' http://www.visitsingapore.com/api.listing.en.json',
        type: 'GET',
        beforeSend: function (xhr) {
            xhr.setRequestHeader('email ID', '-------@gmail.com');
            xhr.setRequestHeader('token ID', '-------');
        },
        data: {},
        success: function (qwe12) {
            var TrueResult2 = JSON.stringify(qwe12);
            document.write(TrueResult2);
        },
        error: function () { },
    });</script>
Save Code

#javascript

javascript - Script causes “Refused to execute inline script: Either the 'unsafe-inline' keyword, a hash… or a nonce is required to enable inline execution” - Stack Overflow

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data:gap: http://www.visitsingapore.com   https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="lib/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="scripts/key.js"></script>
<script>$.ajax({
        url: ' http://www.visitsingapore.com/api.listing.en.json',
        type: 'GET',
        beforeSend: function (xhr) {
            xhr.setRequestHeader('email ID', '-------@gmail.com');
            xhr.setRequestHeader('token ID', '-------');
        },
        data: {},
        success: function (qwe12) {
            var TrueResult2 = JSON.stringify(qwe12);
            document.write(TrueResult2);
        },
        error: function () { },
    });</script>
Save Code

#javascript

reactjs - React 18: Hydration failed because the initial UI does not match what was rendered on the server - Stack Overflow

 import React from "react";
    
  class App extends React.Component {

  head() {
    return (
      <head>
        <meta charSet="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <meta name="theme-color" content="#000000" />
        <title>React App</title>
      </head>
    );
  }

  body() {
    return (
      <body>
        <div className="App">
          <h1>Client says Hello World</h1>
        </div>
      </body>
    );
  }

  render() {
    return (
      <React.Fragment>
        {this.head()}
        {this.body()}
      </React.Fragment>
    )
  }
}
export default App;
Save Code

#javascript

reactjs - React 18: Hydration failed because the initial UI does not match what was rendered on the server - Stack Overflow

 import React from "react";
    
  class App extends React.Component {

  head() {
    return (
      <head>
        <meta charSet="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <meta name="theme-color" content="#000000" />
        <title>React App</title>
      </head>
    );
  }

  body() {
    return (
      <body>
        <div className="App">
          <h1>Client says Hello World</h1>
        </div>
      </body>
    );
  }

  render() {
    return (
      <React.Fragment>
        {this.head()}
        {this.body()}
      </React.Fragment>
    )
  }
}
export default App;
Save Code

#javascript

javascript - How to close current tab in a browser window? - Stack Overflow

window.top.close();
Save Code

#javascript

JAVA SCRIPT JAVA SCRIPT

// Load content onload if it exists in localStorage
window.onload = function() {
	if(localStorage.getItem('content')) {
		document.querySelector('.content').innerHTML = localStorage.getItem('content');
  }
}

let editBtn = document.querySelector('#edit_content');
let content = document.querySelector('.content');

editBtn.addEventListener('click', () => {
  // Toggle contentEditable on button click
	content.contentEditable = !content.isContentEditable;
  
  // If disabled, save text
  if(content.contentEditable === 'false') {
  	localStorage.setItem('content', content.innerHTML);
  }
});

#b2b #c++ #css #react.js #javascript #mongoshell #mysql #crypto #nft #blockchainfork development

cryptocurrency fork Development

Grab up to 30% off on our blockchain fork development Services limited time Offer ends in November 25.

For the development of many business sectors, blockchain forks are essential. However, depending on the position, the process requires the use of technology. This is why we're going to look at some of the ways that cryptocurrencies can be developed, including forking existing blockchains to create new ones.

Hivelance, a leading blockchain fork development company, creates a customizable Blockchain Fork Development on various blockchain networks such as Ethereum, Tron, and Binance Smart Chain (BSC), allowing innovators to launch their businesses faster.

visit our site for know more-

https://www.hivelance.com/blockchain-forking

#b2b #c++ #css #react.js #javascript #mongoshell #mysql #crypto #nft #nfttoken

NFT Token Development Services

Black Friday sale : Grab up to 30% off on our NFT Token development Services limited time Offer ends in November 25.

Hivelance is a reputable NFT Token development business that works with clients from all over the world and across many industry sectors. We have developed secure, efficient, and revenue-generating NFT development solutions. Hivelance is a leading NFT token development company that offering a  top-notch innovative NFT token development solutions for various businesses across multiple industries. Being the best token development company we create and launch the different types of tokens according to the client’s requirement. We make engaging non-fungible token with transparency, high-end security, and faster delivery.

visit our website for more info-

https://www.hivelance.com/nft-token-development

#erc20 #b2b #c++ #css #react.js #javascript #mongoshell #mysql #crypto

ERC20 Token Development

Grab up to 30% off on our ERC20 Token development Services limited time Offer ends in November 25.

The ERC20 Token contract is the smart contract code logic that executes the fungible token activity. When a contract is put into practise on Ethereum, it can be exchanged for any tokens with a similar value. The ERC20 token standard is used for crypto staking, voting, and the exchange of digital cash as a result. Anyone can generate ERC20 tokens and import them into Ethereum virtual machines.

Hivelance provides ERC20 token development service.  We offer an alot of options as part of our ERC20 Token development package, such as code generation, logo design, an audit of the ERC token contract, deployment to the EVM, ongoing development, security audits at regular intervals, and more. We have supported various ICO projects and helped them scale up their fundraising efforts.

https://www.hivelance.com/erc20-token-development

#php #array #javascript

Cache JS Variables

//Use localStorage for that. It's persistent over sessions.

//Writing :
localStorage['myKey'] = 'somestring'; // only strings

//Reading :
var myVar = localStorage['myKey'] || 'defaultValue';

//If you need to store complex structures, you might serialize them in JSON. For example :

//Reading :
var stored = localStorage['myKey'];
if (stored) myVar = JSON.parse(stored);
else myVar = {a:'test', b: [1, 2, 3]};

//Writing :
localStorage['myKey'] = JSON.stringify(myVar);

//Note that you may use more than one key. They'll all be retrieved by all pages on the same domain.

//Unless you want to be compatible with IE7, you have no reason to use the obsolete and small cookies.

#javascript

javascript - Cycle through materials onclick with three.js - Stack Overflow

var materials = [
    new THREE.MeshBasicMaterial( {color:'#b02030'} ),
    new THREE.MeshLambertMaterial( {color:'#b02030'} ), 
    new THREE.MeshPhongMaterial( {color:'#b02030', shininess: 100 } ),
    new THREE.MeshNormalMaterial(),
    // ...
];
var materialToShow = 0;

#javascript #html

Compares between two coordinates (long & lat)

function degreesToRadians(degrees) {
  return (degrees * Math.PI) / 180
}

function distanceInKmBetweenEarthCoordinates(lat1, lon1, lat2, lon2) {
  const earthRadiusKm = 6371

  const dLat = degreesToRadians(lat2 - lat1)
  const dLon = degreesToRadians(lon2 - lon1)

  lat1 = degreesToRadians(lat1)
  lat2 = degreesToRadians(lat2)

  let a =
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2)
  let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
  return earthRadiusKm * c
}

console.log(
  distanceInKmBetweenEarthCoordinates(
    6.5361348,
    3.3913253,
    6.5362509,
    3.3913711
  )
)

#javascript #html

Gets coordinates on page load (long & Lat)

const findLocation = () => {
  const status = document.querySelectorAll('.status')

  const success = (position) => {
    console.log(position)
  }

  const error = () => {
    status.textContent = 'unable to get location'
  }

  navigator.geolocation.getCurrentPosition(success, error, {
    maximumAge: '10000',
    enableHighAccuracy: true,
  })
}

window.addEventListener('load', findLocation)

#javascript

Code to go

const text = "codetogo saved me tons of time";

text.replace(/ /g, "-");

#javascript #html

Build a responsive 3 column card layout

//HTML
<ul className='card'>
   <li>
    <img src={avatar_url} alt={login} />
      <div>
      <h4>{login}</h4>
 		<a href={html_url}>profile</a>
 	 </div>
  </li>
</ul>


.card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 3rem auto;
}

.card li {
  width: 100%;
  display: flex;
  align-items: center;
  background: var(--clr-white);
  padding: 1rem 2rem;
  border-radius: var(--radius);
  text-align: left;
}

#javascript

Focus a button on Safari and Firefox for Max

document.addEventListener('click', event => {
  if (event.target.matches('button')) {
    event.target.focus()
  }
})

#javascript

coding style - Switch statement fall-through...should it be allowed? - Stack Overflow

switch (value)
{
  case 0:
    result = ZERO_DIGIT;
    break;

  case 1:
  case 3:
  case 5:
  case 7:
  case 9:
     result = ODD_DIGIT;
     break;

  case 2:
  case 4:
  case 6:
  case 8:
     result = EVEN_DIGIT;
     break;
}

#javascript

jquery - Check if object has a set of properties in javascript - Stack Overflow

var propertiesToTest = ["prop1", "prop2", "prop3"];
if (propertiesToTest.every(function(x) { return x in a; })) 
    console.log("a has these properties:'prop1, prop2 and prop3'");

#javascript #jquery

Add class when scrolling

$(window).scroll(function(){
    if ($(this).scrollTop() > 50) {
       $('#dynamic').addClass('newClass');
    } else {
       $('#dynamic').removeClass('newClass');
    }
});

#javascript #jquery

Add class "active" to link of current page

$('nav.topmenu li a').filter(function(){
    return this.href === location.href;
  }).addClass('active');

#javascript

jQuery Replace

jQuery Replace

x.replace(/(\r\n|\n|\r)/gm, ""); //replaces line breaks \n

x.replace(/[A-Za-z]/g, "") //replaces all letters

x.trim() // removes whitespaces

#javascript

Assets fonts in react native

$ npx react-native-asset

#javascript

asynchronous - How to wait until a predicate condition becomes true in JavaScript? - Stack Overflow

function checkFlag() {
    if(flag === false) {
       window.setTimeout(checkFlag, 100); /* this checks the flag every 100 milliseconds*/
    } else {
      /* do something*/
    }
}
checkFlag();

//Si quieres enviar parametros tambien
window.setTimeout( () => { checkFlag(params); }, 100);

#javascript

How to Scrape Websites with Node.js and Cheerio

// Loading the dependencies. We don't need pretty
// because we shall not log html to the terminal
const axios = require("axios");
const cheerio = require("cheerio");
const fs = require("fs");

// URL of the page we want to scrape
const url = "https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3";

// Async function which scrapes the data
async function scrapeData() {
  try {
    // Fetch HTML of the page we want to scrape
    const { data } = await axios.get(url);
    // Load HTML we fetched in the previous line
    const $ = cheerio.load(data);
    // Select all the list items in plainlist class
    const listItems = $(".plainlist ul li");
    // Stores data for all countries
    const countries = [];
    // Use .each method to loop through the li we selected
    listItems.each((idx, el) => {
      // Object holding data for each country/jurisdiction
      const country = { name: "", iso3: "" };
      // Select the text content of a and span elements
      // Store the textcontent in the above object
      country.name = $(el).children("a").text();
      country.iso3 = $(el).children("span").text();
      // Populate countries array with country data
      countries.push(country);
    });
    // Logs countries array to the console
    console.dir(countries);
    // Write countries array in countries.json file
    fs.writeFile("coutries.json", JSON.stringify(countries, null, 2), (err) => {
      if (err) {
        console.error(err);
        return;
      }
      console.log("Successfully written data to file");
    });
  } catch (err) {
    console.error(err);
  }
}
// Invoke the above function
scrapeData();

#javascript

Demo For Website

const Huzaifa = "this is for the purpose of the demo and not permanent"

function huzaifa (){
  
  reutrn  25
  
  
}

#javascript

Feature Input select2

//Feature Input select2
(function ($) {

    var Defaults = $.fn.select2.amd.require('select2/defaults');

    $.extend(Defaults.defaults, {
        searchInputPlaceholder: ''
    });

    var SearchDropdown = $.fn.select2.amd.require('select2/dropdown/search');

    var _renderSearchDropdown = SearchDropdown.prototype.render;

    SearchDropdown.prototype.render = function (decorated) {

        // invoke parent method
        var $rendered = _renderSearchDropdown.apply(this, Array.prototype.slice.apply(arguments));

        this.$search.attr('placeholder', this.options.get('searchInputPlaceholder'));
        $(document).on('select2:open', (e) => {
            var id = e.target.id
            document.querySelector('.select2-search__field[aria-controls=select2-' + id + '-results').focus();
        });

        return $rendered;
    };

})(window.jQuery);
//End Feature Input select2

#javascript

Inheriting the Constructor

class Noodle {
  
  double lengthInCentimeters;
  double widthInCentimeters;
  String shape;
  String ingredients;
  String texture = "brittle";
  
  Noodle(double lenInCent, double wthInCent, String shp, String ingr) {
    
    this.lengthInCentimeters = lenInCent;
    this.widthInCentimeters = wthInCent;
    this.shape = shp;
    this.ingredients = ingr;
    
  }
  
  public void cook() {
    
    this.texture = "cooked";
    
  }
  
  public static void main(String[] args) {
    
    Pho phoChay = new Pho();
    System.out.println(phoChay.shape);
    
  }
  
}

// next file

class Pho extends Noodle {
  
  Pho() {
    
    super(30.0, 0.64, "flat", "rice flour");
    
  }
  
}

#javascript

Inheritance in Practice

class Noodle {
  
  double lengthInCentimeters;
  String shape;
  String texture = "brittle";
  
  public void cook() {
    
    this.texture = "cooked";
    
  }
  
  public static void main(String[] args) {
    Spaghetti spaghettiPomodoro = new Spaghetti(); 
    System.out.println(spaghettiPomodoro.texture);
  }
  
}
//next file

class Spaghetti extends Noodle{
  
}

#javascript

reactjs - How do I change props from a child component using hooks? - Stack Overflow

interface CounterProps {
  num: number;
  setNum: React.Dispatch<React.SetStateAction<number>>;
}

const Counter: React.FC<CounterProps> = ({ num, setNum }) => {
  const handleClick = () => {
    setNum(num + 1);
  };

  return (
    // jsx codes...
  );
};

#javascript

Writing Your Own Static Methods

public class ATM{
  // Static variables
  public static int totalMoney = 0;
  public static int numATMs = 0;

  // Instance variables
  public int money;

  public ATM(int inputMoney){
    this.money = inputMoney;
    numATMs += 1;
    totalMoney += inputMoney;
  }

  public void withdrawMoney(int amountToWithdraw){
    if(amountToWithdraw <= this.money){
      this.money -= amountToWithdraw;
      totalMoney -= amountToWithdraw;
    }
  }

  // Write your averageMoney() method here

  public static void averageMoney(){
    System.out.println(totalMoney / numATMs);
    System.out.println(this.money);
  }

  public static void main(String[] args){

    System.out.println("Total number of ATMs: " + ATM.numATMs); 
    ATM firstATM = new ATM(1000);
    ATM secondATM = new ATM(500);
    System.out.println("Total number of ATMs: " + ATM.numATMs); 

    System.out.println("Total amount of money in all ATMs: " + ATM.totalMoney);  
    firstATM.withdrawMoney(500);
    secondATM.withdrawMoney(200);
    System.out.println("Total amount of money in all ATMs: " + ATM.totalMoney);    

    // Call averageMoney() here
    ATM.averageMoney();
  }

}

#javascript

Modifying Static Variables

public class ATM{
  // Static variables
  public static int totalMoney = 0;
  public static int numATMs = 0;

  // Instance variables
  public int money;

  public ATM(int inputMoney){
    this.money = inputMoney;

    // Steps 1 and 2: Edit numATMs and total money here
    numATMs += 1;
    totalMoney += inputMoney;
  }

  public void withdrawMoney(int amountToWithdraw){
    if(amountToWithdraw <= this.money){
      this.money -= amountToWithdraw;
      // Step 3: Edit totalMoney here
      totalMoney -= amountToWithdraw;
    }
  }

  public static void main(String[] args){

    System.out.println("Total number of ATMs: " + ATM.numATMs); 
    ATM firstATM = new ATM(1000);
    ATM secondATM = new ATM(500);
    System.out.println("Total number of ATMs: " + ATM.numATMs); 

    System.out.println("Total amount of money in all ATMs: " + ATM.totalMoney);  
    firstATM.withdrawMoney(500);
    secondATM.withdrawMoney(200);
    System.out.println("Total amount of money in all ATMs: " + ATM.totalMoney);    



  }

}

#javascript

Static Variables

public class ATM{

  // Step 2: Create your static variables here
public static int totalMoney = 0;
public static int numATMs = 0;
  // Instance variables
  public int money;

  public ATM(int inputMoney){
    this.money = inputMoney;
  }

  public void withdrawMoney(int amountToWithdraw){
    if(amountToWithdraw <= this.money){
      this.money -= amountToWithdraw;
    }
  }

  public static void main(String[] args){
    // Step 1: Create your two ATMs here
  ATM firstATM = new ATM(1000);
  ATM secondATM = new ATM(500);
    // Step 3: Print your static variable in three different ways here
    System.out.println(ATM.totalMoney);
    System.out.println(firstATM.totalMoney);
    System.out.println(secondATM.totalMoney);
  }

}

#javascript

Other Private Methods

public class Bank{
  private CheckingAccount accountOne;
  private CheckingAccount accountTwo;

  public Bank(){
    this.accountOne = new CheckingAccount("Zeus", 100, "1");
    this.accountTwo = new CheckingAccount("Hades", 200, "2");
  }

  public static void main(String[] args){
    Bank bankOfGods = new Bank();
    bankOfGods.accountOne.getAccountInformation();
    bankOfGods.accountOne.calculateNextMonthInterest();
  }

}

//next page
public class CheckingAccount{
  private String name;
  private int balance;
  private String id;
  private double interestRate;

  public CheckingAccount(String inputName, int inputBalance, String inputId){
    this.name = inputName;
    this.balance = inputBalance;
    this.id = inputId;
    this.interestRate = 0.02;
  }

  public void getAccountInformation(){
    System.out.println("Money in account: " + this.getBalance());
    System.out.println("Next Month's Interest: " + this.calculateNextMonthInterest());

  }

  private int getBalance(){
    return this.balance;
  }

  // Write the calculateNextMonthInterest() here
  private double calculateNextMonthInterest(){
    return this.interestRate * this.balance;
  }

}

#javascript

Using this With Methods

public class Person{
  public int age;
  public int wisdom;
  public int fitness;

  public Person(int inputAge){
    this.age = inputAge;
    this.wisdom = inputAge * 5;
    this.fitness = 100 - inputAge;
  }

  public void setAge(int newAge){
    this.age = newAge;
  }

  public void setWisdom(int newWisdom){
    this.wisdom = newWisdom;
  }

  public void setFitness(int newFitness){
    this.fitness = newFitness;
  }

  public void hasBirthday(){
    //Complete this method
    this.setAge(this.age + 1);
    this.setWisdom(this.wisdom + 5);
    this.setFitness(this.fitness - 3);
  }

  public static void main(String[] args){
    Person emily = new Person(20);
    emily.hasBirthday();
    System.out.println("New age is: " + emily.age);
    System.out.println("New wisdom is: " + emily.wisdom);
    System.out.println("New fitness is: " + emily.fitness);
  }
}

#javascript

Scope: The this Keyword

public class SavingsAccount{

  public String owner;
  public int balanceDollar;
  public double balanceEuro;

  public SavingsAccount(String owner, int balanceDollar){
    // Complete the constructor
    this.owner = owner;
    this.balanceDollar = balanceDollar;
    this.balanceEuro = balanceDollar * 0.85;

  }

  public void addMoney(int balanceDollar){
    // Complete this method
    System.out.println("Adding " + balanceDollar + " dollars to the account.");
    this.balanceDollar += balanceDollar;
    System.out.println("The new balance is " + this.balanceDollar + " dollars.");
  }

  public static void main(String[] args){
    SavingsAccount zeusSavingsAccount = new SavingsAccount("Zeus", 1000);

    // Make a call to addMoney() to test your method
    zeusSavingsAccount.addMoney(2000);

  }

}

#javascript

Accessor and Mutator Methods

public class Bank{
  private CheckingAccount accountOne;
  private CheckingAccount accountTwo;

  public Bank(){
    accountOne = new CheckingAccount("Zeus", 100, "1");
    accountTwo = new CheckingAccount("Hades", 200, "2");
  }

  public static void main(String[] args){
    Bank bankOfGods = new Bank();
    bankOfGods.accountOne.setBalance(5000);
    System.out.println(bankOfGods.accountOne.getBalance());
  }

}

//other file with private classes
public class CheckingAccount{
  private String name;
  private int balance;
  private String id;

  public CheckingAccount(String inputName, int inputBalance, String inputId){
    name = inputName;
    balance = inputBalance;
    id = inputId;
  }

  //Write new methods here:
    public int getBalance() {
    return balance;
  }

    public void setBalance(int newBalance) {
    balance = newBalance;
  }



}

#javascript

Katta_son

function elMax(){
let max = Math.max(4,987,8,9,4,87,85,26);
return max;
}
elMax()

#javascript

yig'indi

let a = prompt('sonni kirit'), b = prompt('sonni kirit'), sum = 0;
function summ(a, b){
return sum = a + b;
}
summ(a-0,b-0)

#javascript

Loading Button

const loading = `<div class="spinner spinner-border text-white" role="status">
                <span class="sr-only">Loading...</span>
            </div> Loading`

beforeSend: function () {
    $("#btn-submit").html(loading);
    $("#btn-submit").attr('disabled', true);
},
success: function (response) {
  $("#btn-submit").removeAttr('disabled');
  $("#btn-submit").html("Proses");
}

#javascript

Local Storage

$(document).on("click", '#detail-score', function() {
    localStorage.setItem("typeStage", 'Diagnostik');
    localStorage.setItem("titleStage", $(this).data('titlestage'));
    window.location.href = '/teacher/games-coordinator/akm/diagnostic/unit/' + roundId;
});

#javascript

RGB to hex and hex to RGB -javascript- Stack Overflow

const hexToRgb = hex =>
  hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
             ,(m, r, g, b) => '#' + r + r + g + g + b + b)
    .substring(1).match(/.{2}/g)
    .map(x => parseInt(x, 16))

console.log(hexToRgb("#0033ff")) // [0, 51, 255]
console.log(hexToRgb("#03f")) // [0, 51, 255]

#javascript

DNA Sequencing

public class DNA {
 
  public static void main(String[] args) {
 
    //  -. .-.   .-. .-.   .
    //    \   \ /   \   \ / 
    //   / \   \   / \   \  
    //  ~   `-~ `-`   `-~ `-
 String dna1 = "ATGCGATACGCTTGA";
 String dna2 = "ATGCGATACGTGA";
 String dna3 = "ATTAATATGTACTGA";
 
 String dna = dna3;
 //System.out.println(dna.length());

int start = dna.indexOf("ATG");
int end = dna.indexOf("TGA");


 if (start != -1 && end != -1 && (end - start) % 3 == 0){
   System.out.println("Condition 1, 2 and 3 are satisfied.");

   String protein = dna.substring(start, end+3);
   //+3 is because int end cuts off at where TGA begins
   System.out.println("Protein: " + protein);
 }else{
   System.out.println("No protein.");
 }
  }
 
}

#javascript

toUpperCase() / toLowerCase()

public class Hashtag {
  
  public static void main(String[] args) {
    
    String hashtag = "#100DaysOfCode";
    
    // Make the hashtag lowercase:
    
    System.out.println(hashtag.toLowerCase());

    System.out.println(hashtag.toUpperCase());
    
  }
  
}

#javascript

substring()

public class Poetry {
  
	public static void main(String[] args) {
      
    String line = "The Heav'ns and all the Constellations rung";     
    // Change the arguments:
    System.out.println(line.substring(4, 11));
    System.out.println(line.substring(24));
  }
  
}

#javascript

charAt()

public class Initials {
  
	public static void main(String[] args) {
    
    // Add a first name and a last name:
    String firstName = "Cash";  
    String lastName = "Carti";
    
    // What are the initials?
    System.out.println(firstName.charAt(0));
    System.out.println(lastName.charAt(0));
  }
  
}

#javascript

indexOf()

public class MorseCode {
  
  public static void main(String[] args) {
    
    String code = ".... .. / .. .----. -- / ... --- -. -. -.-- / .- -. -.. / .. / .-.. .. -.- . / - --- / . .- - / .-. .- -- . -.";

    // Write the code:
    
    System.out.println(code.indexOf(". .- -"));
  }
  
}

#javascript

equals()

public class Password {
  
  public static void main(String[] args) {
    
    String password = "IgotTheKEYS";
    
    // Write the code:
    System.out.println(password.equals("Mango"));
    System.out.println(password.equals("IgotTheKEYS"));
    System.out.println(password.equals("igotthekeys"));
    //compares two strings without considering upper/lower cases.
    System.out.println(password.equalsIgnoreCase("igotthekeys"));
  }
  
}

#javascript

concat()

public class CombineNames {
  
	public static void main(String[] args) {
    
    // Add your first names:
    String firstName = "Cash";  
    String lastName = "Carti";

    // What's the full name?
  System.out.println(firstName.concat(" " + lastName));
  }
  
}

#javascript

length()

public class TweetCounter {
  


	public static void main(String[] args) {
    
    String tweet = "Liz Lemon, ninjas are kind of cool... I just dont know any personally. Get on that.";  

    // What's the character count?
    
    System.out.println(tweet.length());


  }
  
}

#javascript #pimcore

Slugify a string from the object data input (no classes just js)

//create a button (layout component) in the object class

//example you want to create a slug based on a field name 'title' (text input)
//to save in the field 'url' (text input)
//click on the button will automatically create the slug

//copy and paste the following code in the button handler
((btn)=>{

//get button id
const id = btn.id
//get button element
const button = document.getElementById(id);
//define the current DataObject as workspace in order to find the elements  
const workspace = '_data_object_name'; //ex. News
  
//find the root element of the record
const root = button.closest('div.pimcore_class_' + workspace);

//find the source input field by name with the value to slugify (in this example 'title')
const source = root.querySelector('input[name="title"]');
//find the targe input field by name with the slugified value (in this example 'url')  
const target = root.querySelector('input[name="url"]');

//set the target value with the slugified value
target.value = slugify(source.value);

function slugify(str)
{
    str = str.replace(/^\s+|\s+$/g, '');

    // Make the string lowercase
    str = str.toLowerCase();

    // Remove accents, swap ñ for n, etc
    var from = "ÁÄÂÀÃÅČÇĆĎÉĚËÈÊẼĔȆÍÌÎÏŇÑÓÖÒÔÕØŘŔŠŤÚŮÜÙÛÝŸŽáäâàãåčçćďéěëèêẽĕȇíìîïňñóöòôõøðřŕšťúůüùûýÿžþÞĐđßÆa·/_,:;";
    var to   = "AAAAAACCCDEEEEEEEEIIIINNOOOOOORRSTUUUUUYYZaaaaaacccdeeeeeeeeiiiinnooooooorrstuuuuuyyzbBDdBAa------";
    for (var i=0, l=from.length ; i<l ; i++) {
        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
    }

    // Remove invalid chars
    str = str.replace(/[^a-z0-9 -]/g, '') 
    // Collapse whitespace and replace by -
    .replace(/\s+/g, '-') 
    // Collapse dashes
    .replace(/-+/g, '-'); 

    return str;
}
});

#javascript

The Prime Directive

// Import statement:
import java.util.ArrayList;
class PrimeDirective {
  
  // Add your methods here:
  public static boolean isPrime(int number){
    if(number>1){
      for(int i=2; i < number; i++){
        if (number % i == 0){
          return false;
        }
      }return true;
    }else{
      return false;
    }
  }

  public ArrayList<Integer> onlyPrimes(int[] numbers){
    ArrayList<Integer> primes = new ArrayList<Integer>();
    for(int i : numbers){
      if(isPrime(i) == true){
        primes.add(i);
      }
    }
    return primes;
  }
  
  public static void main(String[] args) {

    PrimeDirective pd = new PrimeDirective();
    int[] numbers = {2,3,47,6, 29, 28, 33, 11, 100, 101, 43, 89};

    System.out.println(isPrime(7));
    System.out.println(isPrime(28));
    System.out.println(isPrime(2));
    System.out.println(isPrime(0));

System.out.println(pd.onlyPrimes(numbers));


  }  

}

#javascript

javascript - How do You Correctly Import Three.js Modules in a Vue Project? - Stack Overflow

var loader = new GLTFLoader();

#javascript

javascript - THREE.js obj not loading in vue - Stack Overflow

import ha from '../assets/threeD/harrie.obj'

#javascript #typescript

Can't run my Node.js Typescript project TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /app/src/App.ts - Stack Overflow

ts-node-esm my_server.ts

#javascript #typescript

Can't run my Node.js Typescript project TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /app/src/App.ts - Stack Overflow

{
  "compilerOptions": {
    "esModuleInterop": true,
  }
}

#javascript

FizzBUZZ

public class FizzBuzz{

  public static void main(String[] args){

for (int i = 1; i<= 100; i++){

  if((i %3 == 0) && (i %5 == 0)){
    System.out.println("FizzBuzz");
  }else if (i %5 == 0){
     System.out.println("Buzz");
  } else if(i %3 == 0){
    System.out.println("Fizz");
  }else{
  System.out.println(i);
  }
    
     
  }
}


  }

#nodejs #javascript

fix the get berat javascript

const puppeteer = require('puppeteer-extra')
const pluginStealth = require('puppeteer-extra-plugin-stealth')
puppeteer.use(pluginStealth())


async function main() {
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: null,
        executablePath: 'C:\\c-dev\\chrome.exe'
    })
    const [page] = await browser.pages()
    await page.goto('https://www.monotaro.id/s000009132.html', {timeout: 0, waitUntil: 'domcontentloaded'})
    await page.waitForSelector('#product-attribute-specs-table', {timeout: 0})
    const berat = await page.evaluate(() => {
        let b = 0
        const selector_head = '#product-attribute-specs-table tbody tr:nth-child({}) th'
        const selector_body = '#product-attribute-specs-table tbody tr:nth-child({}) td'
        let i = 1
        document.querySelectorAll('#product-attribute-specs-table tbody tr').forEach(el => {
            const data = {
                name: document.querySelector(selector_head.replace('{}', i)).innerText,
                value: document.querySelector(selector_body.replace('{}', i)).innerText
            }
            if(data.name == 'Berat (Kg)') b = data.value.match(/^[0-9]*\.?[0-9]*$/)[0]
            i+=1
        })
        return b
    })
    console.log(berat)
}

main()

#javascript

javascript - Loading STL files with Vue-cli and Three.js - Stack Overflow

Answer
I installed the last version of vue-cli which have a "public" folder. I also installed "vue-3d-model" by hujiulong and now it's working fine! :D

I don't know what was the issue, maybe Vue have restricted permission without a public folder ?

#javascript

Removing Elements During Traversal

import java.util.ArrayList;

class Lunch {
 
  public static ArrayList<String> removeAnts(ArrayList<String> lunchBox) {
    // Add your code below
  
    for (int i = 0; i < lunchBox.size(); i++) {
      if (lunchBox.get(i) == "ant"){
        lunchBox.remove(lunchBox.get(i));
        i--;    
      }
    }

   /*
    // Using a while loop
    int i = 0; 
    while (i < lunchBox.size()) {
      if (lunchBox.get(i) == "ant"){
        lunchBox.remove(lunchBox.get(i));
      } else {
        i++;
      }
    }
   */

    return lunchBox;
  }
 
  
  public static void main(String[] args) {
    ArrayList<String> lunchContainer = new ArrayList<String>();
    lunchContainer.add("apple");
    lunchContainer.add("ant");
    lunchContainer.add("ant");
    lunchContainer.add("sandwich");
    lunchContainer.add("ant");
    lunchContainer = removeAnts(lunchContainer);
    System.out.println(lunchContainer);

  }
}

#javascript

For-Each Loops

import java.util.ArrayList;

class MostExpensive {
  
  public static void main(String[] args) {
    
    ArrayList<Double> expenses = new ArrayList<Double>();
    expenses.add(74.46);
    expenses.add(63.99);
    expenses.add(10.57);
    expenses.add(81.37);
    
    double mostExpensive = 0;
    
    // Iterate over expenses
    for (double expense : expenses) {
      
      if (expense > mostExpensive) {
        mostExpensive = expense;
      }
      
    }
    
    System.out.println(mostExpensive);
    
  }
  
}

#javascript

Funcion each() de jquery

const colors = [
  { 'red': '#f00' },
  { 'green': '#0f0' },
  { 'blue': '#00f' }
];

$.each(colors, function() {
  $.each(this, function(name, value) {
    console.log(`${name} = ${value}`);
  });
});

This example outputs:

red = #f00
green = #0f0
blue = #00f




const numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value){
  console.log(`${index}: ${value}`);
});



This snippet outputs:

0:1
1:2
2:3
3:4
4:5


FUNCION EACH CON CLASES


<div class="productDescription">Red</div>
<div>Pink</div>
<div class="productDescription">Orange</div>
<div class="generalDescription">Teal</div>
<div class="productDescription">Green</div>

$.each($('.productDescription'), function(index, value) {
  console.log(index + ':' + $(value).text());
});


In this case, the output is:

0:Red
1:Orange
2:Green



No tenemos que incluir índice y valor. Estos son solo parámetros que ayudan a determinar en qué elemento DOM estamos iterando actualmente. Además, en este escenario también podemos utilizar el eachmétodo más conveniente. Podemos escribirlo así:

$('.productDescription').each(function() {
  console.log($(this).text());
});
Ahorrar
Y obtendremos esto en la consola:

Red
Orange
Green




<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>each demo</title>
  <style>
  ul {
    font-size: 18px;
    margin: 0;
  }
  span {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
  }
  .example {
    font-style: italic;
  }

  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
To do list: <span>(click here to change)</span>
<ul>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Be merry</li>
</ul>
 
<script>
$( "span" ).click(function() {
  $( "li" ).each(function() {
    $( this ).toggleClass( "example" );
  });
});
</script>
 
</body>
</html>




La función each() en jQuery itera a través de objetos y matrices. Las matrices que tienen la propiedad de longitud se recorren desde el índice 0 hasta la longitud-1 y mientras que las matrices como los objetos se recorren a través de sus nombres de propiedades.

Sintaxis:

$.each('matriz u objeto', función(índice, valor){
  // Tu codigo
})


<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- using jquery library -->
    <script src=
"https://code.jquery.com/jquery-git.js">
    </script>
</head>
  
<body>
  <script>
    let arr = [10, 20, 30, 40, 50];
    $.each(arr, function (index, value) {
        document.write(index + ": " + value + "<br>");
    });
  </script>
</body>
  
</html>



FUNCION EACH() UTILIZADA CON ELEMENTO DEL DOM

<!DOCTYPE html>
<html lang="en">

<head>
	<!-- using jquery library -->
	<script src=
"https://code.jquery.com/jquery-git.js">
	</script>
</head>

<body>
	<p>para-1</p>
	<p>para-2</p>
	<p>para-3</p>
	<p>para-4</p>
	<p>para-5</p>
	<script>
		$("p").each(function (index) {
			console.log(index
				+ ": " + $(this).text());
		});
	</script>
</body>

</html>

#javascript

break and continue

class Numbers {
  public static void main(String[] args) {
    for (int i = 0; i < 100; i++) {
      // Add your code below
if (i % 5 != 0) {
    continue;
  }
  System.out.println(i);

      
    }
  }
}

#javascript

Iterating Over Arrays and ArrayLists

import java.util.ArrayList;

class CalculateTotal {
  
  public static void main(String[] args) {
    
    ArrayList<Double> expenses = new ArrayList<Double>();
    expenses.add(74.46);
    expenses.add(63.99);
    expenses.add(10.57);
    expenses.add(81.37);
    
    double total = 0;
    
    // Iterate over expenses
    for (int i = 0; i < expenses.size(); i++) {
      
      total += expenses.get(i);
      
    }
    
    System.out.println(total);
    
  }
  
}

#javascript

Using For Loops

class Coffee {
  
  public static void main(String[] args) {
    
    for (int cupsOfCoffee = 1; cupsOfCoffee <= 100; cupsOfCoffee++) {
      
      System.out.println("Fry drinks cup of coffee #" + cupsOfCoffee);
       
    }
    
  }
  
}

#javascript

Incrementing While Loops

class Coffee {
  
  public static void main(String[] args) {
    
    // initialize cupsOfCoffee
    int cupsOfCoffee = 1;
    // add while loop with counter
    while(cupsOfCoffee <= 100){
      cupsOfCoffee++;
      System.out.println("Fry drinks cup of coffee #"+cupsOfCoffee);
    }
        
    
  }
  
}

#javascript

While loop

// Importing the Random library
import java.util.Random;

class LuckyFive {
  
  public static void main(String[] args) {
    
    // Creating a random number generator
    Random randomGenerator = new Random();
    
    // Generate a number between 1 and 6
    int dieRoll = randomGenerator.nextInt(6) + 1;

    // Repeat while roll isn't 5
    while (dieRoll != 5) {
 System.out.println(dieRoll);
  dieRoll =5;

}
    
  }
  
}

#javascript

javascript - $emit an event from child to parent in vue.js, es6 syntax - Stack Overflow

this.$parent.$emit('ChangeView', e.target.dataset.section);

#javascript

row to sheet

var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("URLs");
sheet.appendRow(ficUrls.flat());

#javascript

javascript - Allow only numbers to be typed in a textbox - Stack Overflow

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

#javascript

How to Create Forms in React using react-hook-form

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = useState({
    email: "",
    password: ""
  });

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setState((prevProps) => ({
      ...prevProps,
      [name]: value
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(state);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <div className="form-control">
          <label>Email</label>
          <input
            type="text"
            name="email"
            value={state.email}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-control">
          <label>Password</label>
          <input
            type="password"
            name="password"
            value={state.password}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-control">
          <label></label>
          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  );
}

#javascript

Fetch from an api

fetch('api link')
.then(res => res.join())
.then(data => console.log(data))

//data is your api data so you can map over it etc

#javascript #nodejs #express

Nodejs - express

const express = require('express');
const cors = require('cors');

// env
const port = process.env.PORT || 3000;

// server
const app = express();

app.use(cors());

// routes
app.get('/', (req, res) => {
    res.send('Hello World!');
});

// start
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`);
});



///////////////////////////////////////////
// https
/*
npm install -g mkcert
mkcert create-ca
mkcert create-cert

const https = require("https");
const fs = require("fs");

const options = {
    key: fs.readFileSync("./config/cert.key"),
    cert: fs.readFileSync("./config/cert.crt"),
};
https.createServer(options, app).listen(8080, () => {
    console.log(`HTTPS server started on port 8080`);
});

*/

#string #javascript

Reverse a string

//regular way
function reverseString(text) {
    return text.split("").reverse().join("")
}

reverseString('reversedString')

#javascript

Enable design mode

document.designMode = 'on'

#javascript

javascript - Convert js Array to Dictionary/Hashmap - Stack Overflow

const test = [
    { nation: { name: "Germany", iso: "DE", rankingPoints: 293949 } },
    { nation: { name: "Hungary", iso: "HU", rankingPoints: 564161 } },
    { nation: { name: "Serbia", iso: "SR", rankingPoints: 231651 } }
];    

const sorted = test.sort((a, b) => a.nation.rankingPoints - b.nation.rankingPoints);

// Using forEach:

var dict = {}
sorted.forEach((el, index) => dict[el.nation.iso] = sorted.length - index);

// Using reduce:

dict = sorted.reduce(
    (dict, el, index) => (dict[el.nation.iso] = sorted.length - index, dict),
    {}
);

console.log(dict)
console.log("dict['DE'] = ", dict['DE'])

#javascript

ecmascript 6 - JavaScript Reduce Array of objects to object dictionary - Stack Overflow

this.filters = this.filters.reduce((result, filter) => {
    result[filter.name] = filter.value;
    return result;
},{});
//-^----------- here

#javascript

javascript - Angular 4 Bootstrap dropdown require Popper.js - Stack Overflow

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.slim.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js",
  "../node_modules/popper.js/dist/umd/popper.min.js"
],

#javascript

javascript - How to remove specific column from data array (JS) - Stack Overflow

listWithoutTel = list.map(({ tel, ...item }) => item);

#javascript

javascript - How to remove specific column from data array (JS) - Stack Overflow

let list = [
  {
    id: "27",
    order_number: "21251",
    tel: 13911111,
    weight: "10kg"
  },
  {
    id: "245",
    order_number: "223",
    tel: 31,
    weight: "10kg"
  },
  {
    id: "123",
    order_number: "312312321",
    tel: 3213123,
    weight: "10kg"
  }
];
let new_list = list.map(function(obj) {
  return {
    id: obj.id,
    order_number: obj.order_number,
    weight: obj.weight
  }
});

console.log(list);
console.log(new_list)

#nodejs #angular #javascript #php #python #vue.js #react.js

Crypto Token Development Company

https://maticz.com/token-development

#javascript #java #laravel #angular

Create an NFT Marketplace Website Like Opensea

https://maticz.com/how-to-create-nft-marketplace

#javascript #java #php #laravel #angular #nodejs

How to Create Metaverse

https://bit.ly/3GLa8p1

#java #javascript #php #laravel

Create Ethereum Standard Tokens - Ethereum Token Development

After the Ethereum Merge Event, Ethereum has become more admired in the crypto industry. Meantime, the price of ethereum has skyrocketed. Do you wanna create an ethereum standard token? https://bit.ly/3TlCuwx 

Being the trusted Ethereum Token Development Company that rendering excellent Token Development Services on multiple ethereum standards such as ERC20, ERC1155, ERC223, ERC721, ERC777, ERC827, ERC 998, and ERC1400 to enhance your tokenomics business and platform.

For Instant Connect, 
Whatsapp +91 9384587998 || Telegram @maticzofficial

#java #javascript #php #laravel

White Label Crypto Wallet - Grab it Now

https://bit.ly/3RN2YXJ

#javascript

Number Counting Animation

if(SDB.App.exists('body:not(.fl-builder-edit) #cc-counter')){
76
                    var a = 0;
77
                    $(window).scroll(function() {
78

79
                      var oTop = $('#cc-counter').offset().top - window.innerHeight;
80
                      if (a == 0 && $(window).scrollTop() > oTop) {
81
                        $('.counter-value').each(function() {
82
                          var $this = $(this),
83
                            countTo = $this.attr('data-count');
84
                          $({
85
                            countNum: $this.text()
86
                          }).animate({
87
                              countNum: countTo
88
                            },
89

90
                            {
91

92
                              duration: 2000,
93
                              easing: 'swing',
94
                              step: function() {
95
                                $this.text(Math.floor(this.countNum));
96
                              },

#solidity #javascript

Cryptocurrency exchange script

https://coinsqueens.com/

#javascript

reactjs - Programmatically navigate using React router

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

#javascript

reactjs - React pass props to children - Stack Overflow

    <div className="layout">
      {
        React.Children.map(children, (child) => {
          return React.cloneElement(child, {
            props1: 1,
            props2: 2,
          });
        })
      }
    </div>

#javascript

assignment/get-api

// assignment/get-api

// Problem 1 Create an API for GET /movies that returns a list of movies. Define an array of movies in your code and return the value in response.
const movies = [
  "Top Gun: Maverick",
  "Doctor Strange in the Multiverse of Madness",
  "Jurassic World Dominion",
  "The Batman",
  "Minions: The Rise of Gru",
  "Thor: Love and Thunder",
  "Sonic the Hedgehog 2",
  "Elvis",
  "Uncharted Sony",
];
const color = [
  "#fcba03",
  "#62fc03",
  "#03fce3",
  "#035efc",
  "#8003fc",
  "#f403fc",
  "#fc034e",
  "#03fc3d",
  "#fceb03",
];
router.get("/movies", (req, res) => {
  res.write(`<div style="color:blue;text-align:center;" >`);
  movies.forEach((each, i) => {
    res.write(`<h1 style="color:${color[i]};" >${each}<h1/>`);
  });
  res.write(`<div/>`);
  res.end();
});

//Problem=2 Create an API GET /movies/:indexNumber (For example GET /movies/1 is a valid request and it should return the movie in your array at index 1). You can define an array of movies again in your api

router.get("/movies/:ind", (req, res) => {
  const i = Number(req.params.ind);
  if (i < movies.length && typeof i === "number") {
    res.write(`<h1 style="color:${color[i]};" >${movies[i]}<h1/>`);
  } else {
    res.send("Not a valid request");
  }
});

//Problem 4== Write another api called GET /films. Instead of an array of strings define an array of movie objects this time. Each movie object should have values - id, name.

const filemsArr = [];
for (let i = 0; i < movies.length; ++i) {
  filemsArr.push({
    id: i + 1,
    Movie: movies[i],
    Color: color[i],
  });
} 

router.get("/films", (req, res) => {
  res.write(`<div style="color:blue;text-align:center;" >`);
  filemsArr.forEach((each) => {
    res.write(
      `<h1 style="color:${each.Color};" >${each.id}--> ${each.Movie}<h1/>`
    );
  });
  res.write(`<div/>`);
  res.end();
});

//Problem 5 == Write api GET /films/:filmId where filmId is the value received in request path params. Use this value to return a movie object with this id. In case there is no such movie present in the array, return a suitable message in the response body.

router.get("/films/:id", (req, res) => {
  const i = Number(req.params.id);
  if (i < movies.length && typeof i === "number") {
    res.write(
      `<h1 style="color:${filemsArr[i].Color};" > id: ${filemsArr[i].id} ==> ${filemsArr[i].Movie}<h1/>`
    );
  } else {
    res.send("No movie exists with this id");
  }
});

#javascript

Recargar solamente el elemento deseado de una página

$("#divid").load(" #divid");

#javascript #audio #player #jquery

jQuery: Multiple audio player buttons / Botões de audio player

//JavaScript
$(document).ready(function() {
  var playing = false;

  // Add file names.
  $('.audio-button').each(function() {
    var $button = $(this);    
    var $audio = $button.find('audio');
    
    $($('<span>').text($audio.attr('src'))).insertBefore($audio);
  });

  // Add click listener.
  $('.audio-button').click(function() {
    var $button = $(this);    
    var audio = $button.find('audio')[0]; // <-- Interact with this!
    
    // Toggle play/pause
    if (playing !== true) {
      audio.play();
    } else {
      audio.pause();
    }

    // Flip state
    $button.toggleClass('playing');
    playing = !playing
  });
});


// CSS
.fa.audio-button {
  position:      relative;
  display:       block;
  width:         12em;
  height:        2.25em;
  margin-bottom: 0.125em;
  text-align:    left;
}

.fa.audio-button:after {
  position:      absolute;
  right:         0.8em;
  content:       "\f04b";
}

.fa.audio-button.playing:after {
  content:"\f04c";
}

// HTML
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="fa audio-button">
  <audio src="media/test.mp3"></audio>
</button>
<button class="fa audio-button">
  <audio src="media/test2.mp3"></audio>
</button>
<button class="fa audio-button">
  <audio src="media/test3.mp3"></audio>
</button>
<button class="fa audio-button">
  <audio src="media/test4.mp3"></audio>
</button>

#javascript

The Missing Math Methods in JavaScript - SitePoint

const prices = [2.80, 6.10, 1.50, 1.00, 8.99, 2.99]

function totalCost(prices){
    return prices.reduce((sum, item) => sum + item, 0)
}
function product(array){
    return array.reduce((total, num) => total*num, 1)
}
const pricePerKg = 1.50
const numberOfKg = 10
const conversionRate = 1.16
const conversion = [1.50, 10, 1.16]

const USprice = product([pricePerKg,numberOfKg,conversionRate])

#javascript

BX Slider

// Bx Slider 

function custom_scripts()
{
    wp_register_script('bxslider', 'https://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.min.js', array(), false, true);
    wp_enqueue_script('bxslider');
}

add_action('wp_enqueue_scripts', 'custom_scripts');

function bxslider_init() { ?>
    <script>
    (function($){
        $(document).ready(function() {
                $(".image-ticker").show();
                $('.image-ticker').bxSlider({
                    minSlides: 1,
                    maxSlides: 8,
                    slideWidth: 189,
                    slideMargin: 0,
                    ticker: true,
                    speed: 50000
                });
            });
        })(jQuery)   
    </script>
<?php }

add_action ('wp_footer', 'bxslider_init');

#javascript

.find() shorthand

const members = [
{gender: 'M', name: 'John'},
{gender: 'M', name: 'Tim'},
{gender: 'F', name: 'Jenny'},
{gender: 'F', name: 'Alice'}
]
findTim = (name) => {
 for(let member of members) {
  if(member.name === name && member.gender === 'M') {
return member.name
} 
// shorthand
member = members.find(member => member.gender === 'M' && member.name === 'Tim');

#javascript #nullish #object

Nullish with an Object - basic

const person = {
 name: null,
    age: null,
    message: null,
}


<h3>{person?.name ?? 'default Name'}</h3>
<h3>{person?.age ?? 'default age'}</h3>
<h4>{person?.message ?? 'default message'}</h4>

#javascript

javascript - How to set the converted English text to another textbox using Google Translator Api? - Stack Overflow

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load("elements", "1", {packages: "transliteration"});
</script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
function OnLoad() {                
    var options = {
        sourceLanguage:
        google.elements.transliteration.LanguageCode.ENGLISH,
        destinationLanguage:
        [google.elements.transliteration.LanguageCode.HINDI],
        shortcutKey: 'ctrl+g',
        transliterationEnabled: true
    };

    var control = new google.elements.transliteration.TransliterationControl(options);
    control.makeTransliteratable(["txtHindi"]);
    var keyVal = 32; // Space key
    $("#txtEnglish").on('keydown', function(event) {
        if(event.keyCode === 32) {
            var engText = $("#txtEnglish").val() + " ";
            var engTextArray = engText.split(" ");
            $("#txtHindi").val($("#txtHindi").val() + engTextArray[engTextArray.length-2]);

            document.getElementById("txtHindi").focus();
            $("#txtHindi").trigger ( {
                type: 'keypress', keyCode: keyVal, which: keyVal, charCode: keyVal
            } );
        }
    });

    $("#txtHindi").bind ("keyup",  function (event) {
        setTimeout(function(){ $("#txtEnglish").val($("#txtEnglish").val() + " "); document.getElementById("txtEnglish").focus()},0);
    });
} //end onLoad function

google.setOnLoadCallback(OnLoad);
</script> 

</head>
    <body>
       English Text: <input size="40" type="text" id="txtEnglish"/> <br/>
       Hindi Text`enter code here` : <input size="40" type="text" id="txtHindi"/> 
</body>
</html>

#javascript

Satisfiability of Equality Equations-LeetCode

var equationsPossible = function (equations) {
    const Obj = {};
    for (let i = 97, j = 1; i < 124; ++i){
        const char = String.fromCharCode(i);
        Obj[char] = j++;
    }
    equations.forEach(ele => {
        if (ele[1] === '=') {
            if (Obj[ele[0]] != Obj[ele[3]]) {
                const a = Obj[ele[0]]
                const b = Obj[ele[3]]
                for (const key in Obj) {
                    if (Obj[key] === a) {
                        Obj[key] = b;
                    }
                }
            }
        }
    });
    console.log(Obj);
    for (let i = 0; i < equations.length; ++i){
        if (equations[i][1] === '!') {
           if (Obj[equations[i][0]] === Obj[equations[i][3]]) {
             return false;
           } 
        }
    }
    return true;
};

#javascript

3Sum Closest - LeetCode

var threeSumClosest = function (nums, target) {
    /// [4, 0, 5, -5, 3, 3, 0, -4, -5], -2)
    
    let sum = Number.MAX_SAFE_INTEGER;
    let min_diff = Number.MAX_SAFE_INTEGER;
    nums.sort((a, b) => a - b);
    // -5, -5, -4, 0, 0, 3, 3, 4, 5  O(n^2)
    
    for (let i = 0, j = 1, k = nums.length - 1; i < nums.length - 2; ++i){
        while (j < k) {
            const currSum = nums[i] + nums[j] + nums[k];
            const diff = Math.abs(target - currSum);
            if (diff < min_diff) {
                min_diff = diff;
                sum = currSum;
            }
            if (target === currSum) {
                return target;
            } else if (currSum < target) {
                j++;
            } else {
                k--;
            }
        }
        j = i + 2;
        k = nums.length - 1;
    }
    return sum;
};

#javascript

React useReducer Hook ultimate guide - LogRocket Blog

const reducer = (accumulator, currentValue) => accumulator + currentValue;
[2, 4, 6, 8].reduce(reducer)
// expected output: 20

#javascript #react.js

dob picker

  let currentYear = (new Date()).getFullYear();
  // year
  const options = [];
  for (let i = 1950; i <= currentYear; i++) {
    options.push(i);
  }

jsx //

<select className='border p-2 border-l-pink-700 mr-2' defaultValue={currentYear} onChange={handleYear} name="year" id="year">
            {
              options.map(option => {
                return <option key={option} value={option}>{option}</option>
              })
            }
          </select>

#javascript #react.js

age calculate

<script>
    var dob = new Date("12/11/2012");
    //calculate month difference from current date in time
    var month_diff = Date.now() - dob.getTime();
    
    //convert the calculated difference in date format
    var age_dt = new Date(month_diff); 
    
    //extract year from date    
    var year = age_dt.getUTCFullYear();
    
    //now calculate the age of the user
    var age = Math.abs(year - 1970);
    
    //display the calculated age
    document.write("Age of the date entered: " + age + " years");
</script>

#javascript #regex

http regex

https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)

#javascript

javascript - How do I redirect to another webpage? - Stack Overflow

// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");

// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";

#javascript

Abstract Operation

https://dev.to/aman_singh/abstract-operations-the-key-to-understand-coercion-in-javascript-453i

#javascript

formToJSON_deconstructed

const formToJSON_deconstructed = (elements) => {
  // This is the function that is called on each element of the array.
  const reducerFunction = (data, element) => {
    // Add the current field to the object.
    data[element.name] = element.value;

    // For the demo only: show each step in the reducer’s progress.
    console.log(JSON.stringify(data));

    return data;
  };

  // This is used as the initial value of `data` in `reducerFunction()`.
  const reducerInitialValue = {};

  // To help visualize what happens, log the inital value.
  console.log('Initial `data` value:', JSON.stringify(reducerInitialValue));

  // Now we reduce by `call`-ing `Array.prototype.reduce()` on `elements`.
  const formData = [].reduce.call(
    elements,
    reducerFunction,
    reducerInitialValue,
  );

  // The result is then returned for use elsewhere.
  return formData;
};

#javascript

Markdown Cheat Sheet – How to Write Articles in Markdown Language

console.log('example log')

#javascript

Duplicate Spreadsheet

function cloneGoogleSheet() {
  var destFolder = DriveApp.getFolderById("your_drive_folder_id"); 
  DriveApp.getFileById("your_drive_source_file_id").makeCopy("particular_file_name", destFolder); 
}

#css #javascript

Transition height with Javascript

//HTML
<section>
  <div>
  	<p>
  		Some Text
    </p>
  </div>
</section>

<button id="toggle-button">Click Me</button>

//CSS
div {
    overflow:hidden;
    transition:height 0.3s ease-out;
    height:auto;
  }

//JS
function collapseSection(element) {
  // get the height of the element's inner content, regardless of its actual size
  var sectionHeight = element.scrollHeight;
  
  // temporarily disable all css transitions
  var elementTransition = element.style.transition;
  element.style.transition = '';
  
  // on the next frame (as soon as the previous style change has taken effect),
  // explicitly set the element's height to its current pixel height, so we 
  // aren't transitioning out of 'auto'
  requestAnimationFrame(function() {
    element.style.height = sectionHeight + 'px';
    element.style.transition = elementTransition;
    
    // on the next frame (as soon as the previous style change has taken effect),
    // have the element transition to height: 0
    requestAnimationFrame(function() {
      element.style.height = 0 + 'px';
    });
  });
  
  // mark the section as "currently collapsed"
  element.setAttribute('data-collapsed', 'true');
}

function expandSection(element) {
  // get the height of the element's inner content, regardless of its actual size
  var sectionHeight = element.scrollHeight;
  
  // have the element transition to the height of its inner content
  element.style.height = sectionHeight + 'px';

  // when the next css transition finishes (which should be the one we just triggered)
  element.addEventListener('transitionend', function(e) {
    // remove this event listener so it only gets triggered once
    element.removeEventListener('transitionend', arguments.callee);
    
    // remove "height" from the element's inline styles, so it can return to its initial value
    element.style.height = null;
  });
  
  // mark the section as "currently not collapsed"
  element.setAttribute('data-collapsed', 'false');
}


document.querySelector('#toggle-button').addEventListener('click', function(e) {
  var section = document.querySelector('div');
  var isCollapsed = section.getAttribute('data-collapsed') === 'true';
    
  if(isCollapsed) {
    expandSection(section)
    section.setAttribute('data-collapsed', 'false')
  } else {
    collapseSection(section)
  }
});

#javascript #matches #classes #find

loop and find class

<ul id="birds">
  <li>Orange-winged parrot</li>
  <li class="endangered">Philippine eagle</li>
  <li>Great white pelican</li>
</ul>



<script>
    
const birds = document.querySelectorAll('li');

for (const bird of birds) {
  if (bird.matches('.endangered')) {
    console.log(`The ${bird.textContent} is endangered!`);
  }
}

    </script>

#javascript #array #duplicate

delete duplicates from an array

const numbers = [1, 2, 3, 4, 5, 7, 3, 2, 2, 5];
const updated = [...new Set(numbers)]; // result [1, 2, 3, 4, 5, 7]

#switch #react #ifs #javascript

If statement with switch

    let selectColor = '';
    let selectCategory = '';

    const getColor = (metadata) => {
        if (metadata !== undefined) {
            if (metadata.length > 1) {
                selectColor = 'orange';
            } else {
                switch (metadata[0]) {
                    case 'stageEarlyChildhood':
                        selectColor = 'pink';
                        break;
                    case 'stagePrimarySchool':
                        selectColor = 'green';
                        break;
                    case 'stageSecondarySchool':
                        selectColor = 'red';
                        break;
                    case 'stageLearnerNoviceDriver':
                        selectColor = 'blue';
                        break;
                    default:
                        selectColor = 'orange';
                        break;
                }
            }
        }
    };
getColor(object.somevalue.that.has.an.array);

#javascript

Refresh the Page in JavaScript – JS Reload Window Tutorial

window.location.reload();

#javascript

generate debug apk

// ./
npx react-native bundle --platform android --dev false --entry-file index.js --verbose --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

// ./android/
./gradlew assembleDebug

#javascript

Basic JavaScript: Use Recursion to Create a Range of Numbers | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers

#javascript

Basic JavaScript: Use Recursion to Create a Countdown | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown

#javascript

Basic JavaScript: Use Multiple Conditional (Ternary) Operators | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators

#javascript

Basic JavaScript: Use the Conditional (Ternary) Operator | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/use-the-conditional-ternary-operator

#javascript

Basic JavaScript: Use the parseInt Function with a Radix | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function-with-a-radix

#javascript

Basic JavaScript: Generate Random Whole Numbers with JavaScript | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript

#javascript

Basic JavaScript: Generate Random Fractions with JavaScript | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/generate-random-fractions-with-javascript

#javascript

Invert values

/*Given a set of numbers, return the additive inverse of each. Each positive becomes negatives, and the negatives become positives.*/

function invert(array) {
   return array.map(each=>{
     return each * -1;
   })
}

#javascript

Array plus array

/*I'm new to coding and now I want to get the sum of two arrays... Actually the sum of all their elements. I'll appreciate for your help.

P.S. Each array includes only integer numbers. Output is a number too.
*/
function arrayPlusArray(arr1, arr2) {
  return [...arr1, ...arr2].reduce((sum, element)=>{
    return sum+= element;
  }, 0)
}

#javascript

Fix string case

/*if the string contains equal number of uppercase and lowercase letters, convert the string to lowercase.*/

function solve(s){
    //..
  let upperCount = 0;
  for(let i = 0; i < s.length; ++i){
    if(s[i] != s[i].toLowerCase()){
      upperCount++;
      if(upperCount > s.length / 2){
        return s.toUpperCase();
      }
    }
  }
  return s.toLowerCase();
}

#javascript

Return Negative

/*In this simple assignment you are given a number and have to make it negative. But maybe the number is already negative?*/

int makeNegative(int num)
{
  return (num>0)? num*-1:num;
}

#javascript

Testing 1-2-3

/*Your team is writing a fancy new text editor and you've been tasked with implementing the line numbering.

Write a function which takes a list of strings and returns each line prepended by the correct number.

The numbering starts at 1. The format is n: string. Notice the colon and space in between.*/

var number=function(array){
  return array.map((element, index)=>{
    return index + 1 + ": " + element;
  })
}

#javascript

Difference between biggest 2 numbers

/*You have an array of non-negative integers. You need to calculate the difference between the 1st biggest number and the 2nd biggest number of the array.*/

function diffBig2(arr) {
  let maxNum = Math.max(arr[0], arr[1]);
    let secondMax = Math.min(arr[0], arr[1]);
    for (let j = 1,i = 2; i < arr.length; ++i, ++j){
        if (arr[i] > maxNum) {
            secondMax = maxNum;
            maxNum = arr[i];
        } else if (arr[i] > secondMax) {
            secondMax = arr[i];
        }
    }
    return maxNum - secondMax;
}

#javascript

JavaScript Array Filter

/*JavaScript Arrays support a filter function (starting in JavaScript 1.6). Use the filter functionality to complete the function given. */

function getEvenNumbers(numbersArray){
  return numbersArray.filter(element=>{
    return element%2 === 0
  })
}

#javascript

Shortest Word

/*Description:

Simple, given a string of words, return the length of the shortest word(s).

String will never be empty and you do not need to account for different data types.
*/

function findShort(s){
  let strArr = s.split(" ");
  let minLength = strArr[0].length;
  for(let i = 1; i < strArr.length; ++i){
    minLength = Math.min(minLength, strArr[i].length);
  }
  return minLength;
}

#javascript

Highest and Lowest

/*
In this little assignment you are given a string of space separated numbers, and have to return the highest and lowest number.
*/
function highAndLow(numbers){
  // 2147483648
  // ...
  let lo = 2147483648;
  let hi = -2147483648;
  numbers.split(" ").forEach(each=>{
    let num = Number(each);
    lo = Math.min(lo, num);
    hi = Math.max(hi, num);
  })
  return hi.toString() + " " + lo.toString();
}

#javascript

Filter the number

/*Description:
Filter the number

Oh, no! The number has been mixed up with the text. Your goal is to retrieve the number from the text, can you return the number back to its original state?
Task

Your task is to return a number from a string.
Details

You will be given a string of numbers and letters mixed up, you have to return all the numbers in that string in the order they occur.
*/

var FilterString = function (value) {
  let numberStr = "";
    for (let i = 0; i < value.length; ++i) {
    if (!isNaN(Number(value[i]))) {
        numberStr+= value[i];
    }
  }
  return Number(numberStr);
};

#javascript

Returning Strings

/*Make a function that will return a greeting statement that uses an input; your program should return, "Hello, <name> how are you doing today?".

[Make sure you type the exact thing I wrote or the program may not execute properly]
*/

function greet(name){
  return `Hello, ${name} how are you doing today?`
}

#javascript

Fundamentals: Return

/*
Make multiple functions that will return the sum, difference, modulus, product, quotient, and the exponent respectively.

Please use the following function names:

addition = add

multiply = multiply

division = divide (both integer and float divisions are accepted)

modulus = mod

exponential = exponent

subtraction = subt

Note: All math operations will be: a (operation) b

*/
function add(a,b){
    return a + b;
}

function divide(a,b){
    return a / b;
}

function multiply(a,b){
    return a * b;
}

function mod(a,b){
    return a % b;
}
   
function exponent(a,b){
    return a ** b;
}
    
function subt(a,b){
    return a - b;
}

#javascript

Ensure question

/*Given a string, write a function that returns the string with a question mark ("?") appends to the end, unless the original string ends with a question mark, in which case, returns the original string.*/

function ensureQuestion(s) {
  return s[s.length-1] === '?'? s : s + '?';
}

#javascript

Double Char

/*Given a string, you have to return a string in which each character (case-sensitive) is repeated once.*/

function doubleChar(str) {
  let newStr = "";
  for(let i = 0; i < str.length; ++i){
    newStr+= str[i] + str[i];
  }
  return newStr;
}

#javascript

Is it a palindrome? (CodeWar)

// Q. Write a function that checks if a given string (case insensitive) is a palindrome.

function isPalindrome(x) {
  x = x.toLowerCase();
  for(let i = 0, j = x.length - 1; i < x.length; ++i, --j){
    if(x[i] != x[j]){
      return false
    }
  }
  return true;
}

#javascript

Destructuring assignment

let user = {
  name: "John",
  age: 30
};

// loop over keys-and-values
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, then age:30
}

#javascript

Basic JavaScript: Profile Lookup | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/profile-lookup

#javascript

Basic JavaScript: Replace Loops using Recursion | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion

#javascript

Basic JavaScript: Iterate Through an Array with a For Loop | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop

#javascript

Basic JavaScript: Count Backwards With a For Loop | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop

#javascript

chrome.webRequest - Chrome Developers

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: details.url.indexOf("://www.evil.com/") != -1};
  },
  {urls: ["<all_urls>"]},
  ["blocking"]
);

#javascript

HighOrder Problem

// write your own find and findIndex function

const arrNums = [20, 10, 2, 30, 60, 100, 1, 4, 5];

// find method
const temp = 100;
const findNum = (num) => {
  return num === temp;
};

// find method return the number if availabe else return undefine
if (arrNums.find(findNum)) {
  console.log("found");
} else {
  console.log("Not Found");
}

// findIndexOf method
// find index method return the index of this no if present else return -1
arrNums.findIndex(findNum);

// (Hint: using for loop and if else)

// ======================================================== //

const practiceData = [
  [14, 21, 23, 64],
  [33, 46, 51, 65],
];
const newArr = practiceData.map((each) => {
  return each.map((each) => {
    return each + 1;
  });
});
console.log(newArr);
/**
 * requirement one
 * increment each number by one and output the resultant array using a higher order method and for loop
 * HINT: use nesting
 * solution =  [[15,22,24,65], [34,47,52,66]]
 *
 *
 * requirement two
 * from the above array, create an array of array of even numbers using a higher order method and for loop
 * solution = [[14,64], [46]]
 */

const evenArray = practiceData.map((each) => {
  return each.filter((each) => {
    return each % 2 === 0;
  });
});

console.log(evenArray);

// ======================================================== //

const array = [23, 45, 467, 789, 34, 989, 56];

// problem => return an array such that numbers at odd idex are multiplied by 2
// and numbers at even index are multiplied by 10
const oddEven = array.map((each, index) => {
  return index % 2 ? each * 2 : each * 10;
});

console.log(oddEven);
// ======================================================== //

const carBrands = ["honda", "toyota", "maruti", "tata"];
const carModel = ["city", "innova", "alto", "nano"];

const carObject = {};
for (let i = 0; i < carBrands.length; ++i) {
  carObject[carBrands[i]] = carModel[i];
}
console.log(carObject);
//  using a higher order method, create a carObject variable such that
/**
 *
 * {
 * honda:city,
 * toyota:innova,
 * maruti:alto,
 * tata:nano
 * }
 */

// ======================================================== //

/**
  *  Flattening
 Use the reduce method 
 to “flatten” an array of arrays into a single array that has all the elements of the original arrays.
 
 // result =  [1, 2, 3, 4, 5, 6]
 * 
 * 
 */

const arrays = [[1, 2, 3], [4, 5], [6]];
const newSingleArray = arrays.reduce((old, newA) => {
  return old.concat(newA);
});
console.log(newSingleArray);
// ======================================================== //

/**
 * const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland']
 * return an array with all words converted into uppercase using higher order function
 * const countries = ['FINLAND', 'DENMARK', 'SWEDEN', 'NORWAY', 'ICELAND']
 *
 *
 *
 */
const countries = ["Finland", "Denmark", "Sweden", "Norway", "Iceland"];

const countriesCapt = countries.map((country) => {
  return country.toUpperCase();
});
console.log(countriesCapt);
// ======================================================== //

#javascript

Basic JavaScript: Iterate Odd Numbers With a For Loop | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/iterate-odd-numbers-with-a-for-loop

#javascript

CardProblem-4

const cardData = [
  {
    suit: "heart",
    value: 7,
  },
  {
    suit: "club",
    value: 8,
  },
  {
    suit: "club",
    value: 2,
  },
  {
    suit: "diamond",
    value: 2,
  },
  {
    suit: "diamond",
    value: 5,
  },
  {
    suit: "club",
    value: 10,
  },
];

// ================================================= 4 ============================================== //
const Obj2 = {};
function getSuitValues(cardData) {
  for (const card of cardData) {
    Obj2[card.suit] = Obj2[card.suit]
      ? [...Obj2[card.suit], card.value]
      : [card.value];
  }
  return Obj2;
}

getSuitValues(cardData);
/**
 *  4. write a function which returns an object with the suits as its key and its available values as value
 *  ans => { heart:[7], club:[8,2,10], diamond:[2,5]}
 *
 */

#javascript

CardProblem-3

const cardData = [
  {
    suit: "heart",
    value: 7,
  },
  {
    suit: "club",
    value: 8,
  },
  {
    suit: "club",
    value: 2,
  },
  {
    suit: "diamond",
    value: 2,
  },
  {
    suit: "diamond",
    value: 5,
  },
  {
    suit: "club",
    value: 10,
  },
];

// ================================================ 3 =============================================== //

const Obj = {};
function getSuitCount(cardData) {
  for (const card of cardData) {
    Obj[card.suit] = Obj[card.suit] ? Obj[card.suit] + 1 : 1;
  }
  return Obj;
  // write your code here
}
getSuitCount(cardData);
/**
 * 3. write a function which returns an object with the suits as its key and its total count as its value
 * ans => {  heart:1,  club:3, diamond:2,}
 */

#javascript

CardProblem-2

const cardData = [
  {
    suit: "heart",
    value: 7,
  },
  {
    suit: "club",
    value: 8,
  },
  {
    suit: "club",
    value: 2,
  },
  {
    suit: "diamond",
    value: 2,
  },
  {
    suit: "diamond",
    value: 5,
  },
  {
    suit: "club",
    value: 10,
  },
];

// =============================================== 2 ================================================ //

let uniqSuit = new Set();
function getSuits(cardData) {
  cardData.forEach((element) => {
    uniqSuit.add(element.suit);
  });
  return Array.from(uniqSuit);
  // write your code here
}

console.log(getSuits(cardData));
/**
    2. write a function which returns the list of available suits in the above data
 * ans => ["heart", "club", "diamond"]
*/

#javascript

CardProblem 1

const cardData = [
  {
    suit: "heart",
    value: 7,
  },
  {
    suit: "club",
    value: 8,
  },
  {
    suit: "club",
    value: 2,
  },
  {
    suit: "diamond",
    value: 2,
  },
  {
    suit: "diamond",
    value: 5,
  },
  {
    suit: "club",
    value: 10,
  },
];

// =========================================== 1 ==================================================== //

function findCard(value, suit) {
  for (let i = 0; i < cardData.length; ++i) {
    if (cardData[i].suit === suit && cardData[i].value === value) {
      return true;
    }
  }
  return false;
}
findCard(5, "heart");
findCard(10, "club");
/** * 1. complete the above function,
 * it should return true /false if card is present/absent
 * example
 * findCard(5, 'heart') should return false
 * findCard(10, 'club') should return true
 */

#javascript

FB problem

const facebookProfiles = [
  {
    firstName: "Akash",
    lastName: "Agarwal",
    number: "111111111",
    likes: ["music", "movies"],
    hasDrivingLicense: false,
    address: {
      location: "rampur",
      state: "up",
    },
    emails: ["abc@outlook.com", "efg@gamil.com", "ghj@gmail.com"],
  },
  {
    firstName: "Pritesh",
    lastName: "Kumar",
    number: "222222222",
    likes: ["code", "driving"],
    hasDrivingLicense: false,
    address: {
      location: "gurgaon",
      state: "haryana",
    },
    emails: ["fgdfg@gmail.com"],
  },
  {
    firstName: "Sabiha",
    lastName: "Khan",
    number: "333333333",
    hasDrivingLicense: false,
    address: {
      location: "lucknow",
      state: "up",
    },
  },
  {
    firstName: "Suyash",
    lastName: "Kashyap",
    number: "444444444",
    likes: ["travel", "driving"],
    hasDrivingLicense: true,
    address: {
      location: "alwar",
      state: "rajasthan",
    },
    emails: ["abc@yahoo.com"],
  },
  {
    firstName: "Jay",
    likes: ["food", "mobile"],
    hasDrivingLicense: true,
    address: {
      location: "gurgaon",
      state: "haryana",
    },
    emails: ["abc@gmail.com", "efg@yahoo.com", "ghj@outlook.com"],
  },
];

// IMPORTANT: SOLVE the following questions using two methods
// 1. use for loop
// 2. USE HIGHER ORDER FUNCTIONS TO SOLVE THE ABOVE QUESTIONS(map, filter, find, forEach etc. )

// ==================================== 0 ==================================== //

function profileLookup(name, property) {
  //write your code here
  for (const profile of facebookProfiles) {
    if (profile.firstName === name) {
      return profile[property] ? profile[property] : "no such property";
    }
  }
  return "person does not exist";
}
console.log(profileLookup("Pritesh", "likes"));
// complete the above function such that when it is called with name and property, then it should return its value
// ex
// profileLookup("Pritesh", "number"), then it should return his number

// handle edge cases like:
//      if name is not in the list, return "person does not exist"
//      if property is not present then return "no such property"
//
// Hint: dynamically access properties using square bracket

// ================================== 1 ====================================== //

function getNamesFromGurgaon(facebookProfiles) {
  const newArray = [];
  facebookProfiles.forEach((profile) => {
    // return profile.address.location === "gurgaon" ?? profile.firstName;
    if (profile.address.location === "gurgaon") {
      newArray.push(
        `${profile.firstName}${profile.lastName ? ` ${profile.lastName}` : ``}`
      );
    }
  });
  return newArray;
}
//complete the above functin such that it returns the list of full names of all people of gurgaon.
// ex = ['Jay ', 'Pritesh Kumar']
console.log(getNamesFromGurgaon(facebookProfiles));
// ==================================2 ====================================== //

function findFullName(stateName) {
  //write your code here
  for (let i = 0; i < facebookProfiles.length; ++i) {
    if (facebookProfiles[i].address.state === stateName) {
      return `${facebookProfiles[i].firstName}${
        facebookProfiles[i].lastName ? ` ${facebookProfiles[i].lastName}` : ``
      }`;
    }
  }
}
console.log(findFullName("up"));
// 2. complete this function, which takes state name as argument and return the name
// of one of its residents

// ================================== 3 ====================================== //

function getDLStatus(facebookProfiles) {
  //write your code here
  const dlStatus = [];
  for (let i = 0; i < facebookProfiles.length; ++i) {
    if (facebookProfiles[i].address.location === "gurgaon") {
      if (facebookProfiles[i].hasDrivingLicense) {
        dlStatus.push(`${facebookProfiles[i].firstName} - D/L`);
      } else {
        dlStatus.push(`${facebookProfiles[i].firstName} - N D/L`);
      }
    }
  }
  return dlStatus;
}
getDLStatus(facebookProfiles);
//3. write a function which returns full names of all people of gurgaon with their driving license status, in an array.
// like shown in the example below
// ex = ['Jay - D/L', 'Pritesh Kumar - N D/L']

// =================================== 4 ===================================== //

function getFullName(facebookProfiles) {
  return facebookProfiles.map((profile) => {
    return `${profile.firstName}${
      profile.lastName ? " " + profile.lastName : ``
    }`;
  });
}

getFullName(facebookProfiles);
// 4. write a function which returns full names in an array
//ans = ['Akash Agarwal', 'Pritesh Kumar', 'Sabiha Khan', 'Suyash Kashyap', 'Jay' ]

// ===================================== 5 =================================== //

function getLikes(facebookProfiles) {
  //write your code here
  let likes = [];
  facebookProfiles.forEach((profile) => {
    if (profile.likes) {
      likes = [...likes, ...profile.likes];
    }
  });
  return likes;
}
getLikes(facebookProfiles);
// 5. write a function which returns all likes of all the people in an array
//hint: use spread syntax
//ans = ['music', 'movies', 'code', 'podcasts', 'travel', 'driving', 'food', 'mobile']

// ====================================== 6 ================================== //

function getNameFromDelhiWithDL(facebookProfiles) {
  //write your code here
  for (let i = 0; i < facebookProfiles.length; ++i) {
    if (
      facebookProfiles[i].address.location === "delhi" &&
      facebookProfiles[i].hasDrivingLicense
    ) {
      return facebookProfiles[i].firstName;
    }
  }
  return "no such person";
}
getNameFromDelhiWithDL(facebookProfiles);
//6. write a function which return  the name of the any one person who live in delhi and has driving license
//ans => "no such person"

// ======================================= 7 ================================= //

function getNameOfDriverWithoutDL(facebookProfiles) {
  // write your code here
  for (let i = 0; i < facebookProfiles.length; ++i) {
    if (!facebookProfiles[i].hasDrivingLicense) {
      if (facebookProfiles[i].likes.indexOf("driving") > 0) {
        return facebookProfiles[i].firstName;
      }
    }
  }
}

getNameOfDriverWithoutDL(facebookProfiles);
//7. write a function which return the name of the any one person who like driving but doesnt have driving license
//asn => pritesh

#javascript

Send an email using email addresses from a column in Google sheets all email address at once custom messagein row - Stack Overflow

function SendEmail(){
  var emailRange = SpreadsheetApp.getActiveSpreadsheet()
    .getSheetByName("HLP REQUESTS").getRange("K:K");

  var emailAddress = emailRange.getValues()
    .flat()           // convert a 2d array into a flat array
    .filter(String)   // remove empty elements from the array
    .pop();           // get the last element from the array

  var message = 'A request has been submitted for professional learning related to an HLP you champion.  Please check the Design Team Notes document in case follow-up is required.';
  var subject = 'HLP Request for Professional Learning';

  MailApp.sendEmail(emailAddress, subject, message);
}

#javascript

javascript - воспроизведение нескольких аудио на странице с остановкой уже запущенных - Stack Overflow на русском

function onplayssoun(snd) {

  $('audio').stop(); //Останавливаем все аудио
  var audio = new Audio(); // Создаём новый элемент Audio
  audio.src = snd; // Указываем путь к звуку "клика"
  audio.autoplay = true; // Автоматически запускаем
  var audio = $('audio')[0];
  $(document).click(function() {
    audio.play();
  });

}

#javascript

Basic JavaScript: Iterate with JavaScript For Loops | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops

#javascript

Basic JavaScript: Iterate with JavaScript While Loops | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-while-loops

#javascript

Basic JavaScript: Record Collection | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/record-collection

#javascript

Basic JavaScript: Accessing Nested Arrays | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays

#javascript

Importing Javascript file into another Javascript file

// main.js
 import { convertCurrency } from './obeserver.js';
//form the export default
 import someName from './obeserver.js';


//observer.js
const url = 'https://test.com';

export const convertCurrency = (EUR) => {
   return EUR * 0.9;
 };

export default url;

#javascript

Includes Polyfills for Arraty and String

function myIncludes(element) {
    const isThisArray = Array.isArray(this)
    if (isThisArray) {
        for (let i = 0; i < this.length; i++){
            if (this[i] === element) {
                return true;
            }
        }
    } else {
        for (let i = 0; i < this.length; i++){
            if (this[i] === element[0]) {
                for (let j = 1; j < element.length; j++){
                    if (this[i + j] !== element[j]) {
                        return false
                    }
                }
                return true;
            }
        }
    }
    return false; 
}

#javascript

Slider

//HTML
<div class="slider">
        <div class="slide"><img src="img/img-1.jpg" alt="Photo 1" /></div>
        <div class="slide"><img src="img/img-2.jpg" alt="Photo 2" /></div>
        <div class="slide"><img src="img/img-3.jpg" alt="Photo 3" /></div>
        <div class="slide"><img src="img/img-4.jpg" alt="Photo 4" /></div> 
</div>


//CSS
/* SLIDER */
.slider {
  max-width: 100rem;
  height: 50rem;
  margin: 0 auto;
  position: relative;

  /* To hide unwanted .slide */
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50rem;

  display: flex;
  align-items: center;
  justify-content: center;

  /* THIS creates the animation! */
  transition: transform 1s;
}


//JS
//Slider
const slides = document.querySelectorAll('.slide');
const btnLeft = document.querySelector('.slider__btn--left');
const btnRight = document.querySelector('.slider__btn--right');

// Set a current slide to begin with
let currentSlide = 0;
//Set a maximum number of slides else number will be infite
const maxSlide = slides.length;

const goToSlide = slide => {
  //Change position for each slide
  slides.forEach((s, i) => {
    //e. currentSlide 1: 100 * (0 - 1) = -100% each item slides left
    s.style.transform = `translateX(${100 * (i - slide)}%)`;
  });
};

//Show slide on position 0
goToSlide(0);

//Next slide
const nextSlide = () => {
  //Reset the value once we reach max
  currentSlide === maxSlide - 1
    ? (currentSlide = 0)
    : //Increase by one everytime we click 'next'
      currentSlide++;

  goToSlide(currentSlide);
};

const prevSlide = () => {
  //If it is in position 0 then by pressing prev go to the last slide
  currentSlide === 0 ? (currentSlide = maxSlide - 1) : currentSlide--;
  goToSlide(currentSlide);
};

btnRight.addEventListener('click', nextSlide);
btnLeft.addEventListener('click', prevSlide);

//Handle keyboar event left-right
document.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowRight') nextSlide();
  //Also with short-circuting
  e.key === 'ArrowLeft' && nextSlide();
});

#javascript

Lazy loading Images

//HTML
<img 
src="img/digital-lazy.jpg"
data-src="img/digital.jpg"
alt="Computer"
class="features__img lazy-img" 
/>

//CSS
.lazy-img {
  filter: blur(20px);
}

//Lazy loading Images
const imgTargets = document.querySelectorAll('img[data-src]');

const loadImage = (entries, observer) => {
  const [entry] = entries;

  if (!entry.isIntersecting) return;

  //Replace src with data-src
  entry.target.src = entry.target.dataset.src;
  //Remove lazy-img class after img has been loaded
  entry.target.addEventListener('load', function () {
    entry.target.classList.remove('lazy-img');
  });

  observer.unobserve(entry.target);
};

const imgObserver = new IntersectionObserver(loadImage, {
  root: null,
  threshold: 0,
  rootMargin: '200px',
});

imgTargets.forEach(img => imgObserver.observe(img));

#javascript

Pass argument to an eventListener

//Menu Fade Animation
const handleHover = function (e) {
  if (e.target.classList.contains('nav__link')) {
    const link = e.target;
    const siblings = link.closest('.nav').querySelectorAll('.nav__link');
    const logo = link.closest('.nav').querySelector('img');

    siblings.forEach(el => {
      if (el !== link) el.style.opacity = this;
    });
    logo.style.opacity = this;
  }
};

//Passing "argument" into handler
nav.addEventListener('mouseover', handleHover.bind(0.5));
nav.addEventListener('mouseout', handleHover.bind(1));

#javascript

caver-js getPastEvents

const contract = caver.contract.create(
  erc721Abi,
  '0xae7572e91540e025cdd88bf0b996b67e2d353c7c'
);
const eventList = await contract
.getPastEvents('Transfer', {
  fromBlock: '102232648',
  toBlock: 'latest',
})
.then((events) => {
  console.log(events);
}

#javascript

JavaScript: Parameterize a string - w3resource

string_parameterize = function (str1) {
    return str1.trim().toLowerCase().replace(/[^a-zA-Z0-9 -]/, "").replace(/\s/g, "-");
};
console.log(string_parameterize("Robin Singh from USA."));

#javascript

JavaScript: Hide email addresses to protect from unauthorized user - w3resource

protect_email = function (user_email) {
    var avg, splitted, part1, part2;
    splitted = user_email.split("@");
    part1 = splitted[0];
    avg = part1.length / 2;
    part1 = part1.substring(0, (part1.length - avg));
    part2 = splitted[1];
    return part1 + "...@" + part2;
};

console.log(protect_email("robin_singh@example.com"));

#javascript

JavaScript: Convert a string in abbreviated form - w3resource

abbrev_name = function (str1) {
    var split_names = str1.trim().split(" ");
    if (split_names.length > 1) {
        return (split_names[0] + " " + split_names[1].charAt(0) + ".");
    }
    return split_names[0];
};
console.log(abbrev_name("Robin Singh"));

#javascript

Basic JavaScript: Accessing Nested Objects | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects

#javascript

Basic JavaScript: Manipulating Complex Objects | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects

#javascript

node.js - puppeteer not working on vps but running locally - Stack Overflow

sudo apt-get install -y gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget libgbm-dev

#javascript

Basic JavaScript: Testing Objects for Properties | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties

#javascript

Desert Island Playlist ArrayList project(switch array item order)

import java.util.ArrayList;

class Playlist {
  
  public static void main(String[] args) {
    ArrayList<String> desertIslandPlaylist = new ArrayList <String>();

    desertIslandPlaylist.add("Moon");
    desertIslandPlaylist.add("Let it All Workout");
    desertIslandPlaylist.add("Can't Get Close");
    desertIslandPlaylist.add("Lord I Need You");
    desertIslandPlaylist.add("Feel");
    desertIslandPlaylist.add("24 hours");
    desertIslandPlaylist.add("Bad News");
    desertIslandPlaylist.add("Pure Souls");
    desertIslandPlaylist.add("Come To Life");

     //System.out.println(desertIslandPlaylist);
    // System.out.println(desertIslandPlaylist.size());
     desertIslandPlaylist.remove("Bad News");
     desertIslandPlaylist.remove("Pure Souls");
     desertIslandPlaylist.remove("Feel");
     desertIslandPlaylist.remove("Lord I Need You");
     //System.out.println(desertIslandPlaylist.size());
//Get the indices of the songs you want to swap.
    int indexA = desertIslandPlaylist.indexOf("Let it All Workout");
    int indexB = desertIslandPlaylist.indexOf("Moon");
    //Create a temporary variable to store the value of song a. (We’ll call the songs a and b here.)
    String tempA = "Let it All Workout";
    //Rewrite the value at the index of a to the value of b.

    desertIslandPlaylist.set(indexA, "Moon");
    desertIslandPlaylist.set(indexB, "Let it All Workout");

    System.out.println(desertIslandPlaylist.size());
    System.out.println(desertIslandPlaylist);
  }
  
}

#javascript

Basic JavaScript: Using Objects for Lookups | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups

#javascript #html

Componente para subir imagen

// componente html
<!-- Imagen -->
  <el-form-item 
    label="Imagen" 
    prop="imagen"
  >
  <el-upload 
    class="avatar-uploader" 
    action="" 
    drag 
    :auto-upload="false" 
    :show-file-list="false"
    :multiple="false" 
    :on-change="onUploadChange" 
    accept=".jpeg, .png, .jpg, .gif, .svg"
   >
     <img 
        v-if="imageUrl" 
        :src="imageUrl" 
        class="avatar" 
    />
    <div 
    	v-else 
   	 	class="el-upload__text"
    >
      Suelta tus archivos aquí o
        <em>haz clic para cargar</em>
    	<p>Sólo archivos .jpeg, .png, .jpg, .gif, .svg</p>
    	</div>
    	<!-- <el-icon v-else class="avatar-uploader-icon"></el-icon> -->
   </el-upload>
</el-form-item>

// codigo js
onUploadChange(file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.imagenNueva = file.raw;
    },

data(){
      imageUrl: null,
}

#javascript

Cambiar formato de moneda (pesos argentinos)

moneda(x){
    return x.toLocaleString('es-AR');
},

#javascript

Basic JavaScript: Delete Properties from a JavaScript Object | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/delete-properties-from-a-javascript-object

#javascript #mysql #sequelize #sessions

Create an Express Session with Sequelize

const session = require('express-session');

const SequelizeStore = require('connect-session-sequelize')(session.Store);

const sess = {
  secret: 'Super secret secret',
  cookie: {},
  resave: false,
  saveUninitialized: true,
  store: new SequelizeStore({
    db: sequelize
  })
};

app.use(session(sess));

#javascript

JS

<script type="text/javascript">
        $(function() {
            $("#techSkill").change(function() {
                if ($(this).val() == "X") {
                    $("#techBox1").show();
                } else {
                    $("#techBox1").hide();
                }
            });
        });
        
        $(function() {
            $("#techSkill").change(function() {
                if ($(this).val() == "Y") {
                    $("#techBox2").show();
                } else {
                    $("#techBox2").hide();
                }
            });
        });
        

        $(function() {
            $("#techSkill").change(function() {
                if ($(this).val() == "Z") {
                    $("#techBox3").show();
                } else {
                    $("#techBox3").hide();
                }
            });
        });
        
        
        // validation

        function validateForm() {
            var natsid = document.forms["student_registration"]["natsid"];
            var techBox1 = document.forms["student_registration"]["techBox1"];
            var techBox2 = document.forms["student_registration"]["techBox2"];
            var techBox3 = document.forms["student_registration"]["techBox3"];
            var comSk = document.forms["student_registration"]["comSk"];
            var leadSk = document.forms["student_registration"]["leadSk"];
            var mulSk = document.forms["student_registration"]["mulSk"];
            var timeSk = document.forms["student_registration"]["timeSk"];
            var analSk = document.forms["student_registration"]["analSk"];
            var posiSk = document.forms["student_registration"]["posiSk"];
            var att = document.forms["student_registration"]["att"];
            var batch = document.forms["student_registration"]["batch"];

            var avg = (parseInt(comSk.value) + parseInt(leadSk.value) + parseInt(mulSk.value) + parseInt(timeSk.value) + parseInt(analSk.value) + parseInt(posiSk.value)) / 9;
            console.log(avg)
            if (natsid.value == "") 
            {
                document.getElementById("natsid_error").innerText = "Please enter your Registered NATS ID";
                return;
            }
            if (natsid.value.length != 16) {
                document.getElementById("natsid_error").innerText = "Please enter your Registered Sixteen Digit NATS ID";
                return;
            }
            document.getElementById("natsid_error").innerText = "";

            if (techBox1.value < 8) {
                document.getElementById("tech_error").innerText = "You are not Eligible";
                document.forms["student_registration"]["Submit"].disabled = true
                return;
            }
            if (techBox2.value < 8) {
                document.getElementById("tech_error").innerText = "You are not Eligible";
                document.forms["student_registration"]["Submit"].disabled = true
                return;
            }
            if (techBox3.value < 8) {
                document.getElementById("tech_error").innerText = "You are not Eligible";
                document.forms["student_registration"]["Submit"].disabled = true
                return;
            }
            



            if (avg > 8) {
                document.getElementById("form_error").innerText = ""
                document.forms["student_registration"]["Submit"].disabled = false
            } else {
                document.forms["student_registration"]["Submit"].disabled = true
                document.getElementById("form_error").innerText = "You are not Eligible"
                return;
            }
            if (parseInt(att.value) < 80) {
                document.getElementById("form_error").innerText = "You are not Eligible";
                document.forms["student_registration"]["Submit"].disabled = true
                return;
            } else {
                document.getElementById("form_error").innerText = ""
                document.forms["student_registration"]["Submit"].disabled = false
            }
        }
    </script>

#javascript

Basic JavaScript: Add New Properties to a JavaScript Object | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/add-new-properties-to-a-javascript-object

#javascript #jquery

Masonary with responsive

// CSS
.blog-home-section{padding:0 0 70px;}
.blog-home-section .blog-clm{width: 100%;}
.blog-home-section .card-blog{float: left;margin:75px 10px 12px;width:calc(33.33% - 20px)!important;border:0;border-radius:6px;color:rgba(0,0,0,0.87);background:#fff;box-shadow:0 2px 2px 0 rgb(0 0 0 / 14%),0 3px 1px -2px rgb(0 0 0 / 20%),0 1px 5px 0 rgb(0 0 0 / 12%);}

//JS
$('#load-data').isotope({
  itemSelector: '.card-blog',
  masonry: {
    // use outer width of grid-sizer for columnWidth
    columnWidth: '.card-blog'
  }
});
                              
// Script
                              
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

#javascript

Basic JavaScript: Updating Object Properties | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties

#javascript

Basic JavaScript: Accessing Object Properties with Variables | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables

#javascript #jquery

change img to svg path using jquery

jQuery('img').each(function($){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image's ID to the new SVG
                if(typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG
                $img.replaceWith($svg);

            }, 'xml');

        });

#javascript

Date Countdown

//Select html elements
const labelDays = document.querySelector('.days');
const labelHours = document.querySelector('.hours');
const labelMinutes = document.querySelector('.minutes');
const labelSeconds = document.querySelector('.seconds');

//Calc how many milliseconds left
const calcTimeLeft = () => {
  const futureDate = new Date('January 1, 2023 00:00:00').getTime();
  const today = new Date().getTime();

  //Milliseconds Left
  const millisecondsLeft = futureDate - today;

  //How time works
  const second = 1000;
  const minute = second * 60;
  const hour = minute * 60;
  const day = hour * 24; //milliseconds

  //Calculate time left
  const calcDays = Math.floor(millisecondsLeft / day);
  const calcHours = Math.floor((millisecondsLeft % day) / hour);
  const calcMinutes = Math.floor((millisecondsLeft % hour) / minute);
  const calcSeconds = Math.floor((millisecondsLeft % minute) / second);

  //Update UI
  labelDays.textContent = calcDays;
  labelHours.textContent = calcHours.toString().padStart(2, '0');
  labelMinutes.textContent = calcMinutes.toString().padStart(2, '0');
  labelSeconds.textContent = calcSeconds.toString().padStart(2, '0');
};

setInterval(calcTimeLeft, 1000);

#javascript

Basic JavaScript: Accessing Object Properties with Bracket Notation | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation

#javascript

Basic JavaScript: Accessing Object Properties with Dot Notation | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation

#javascript

Basic JavaScript: Build JavaScript Objects | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects

#javascript #jquery

paralax scroll effect

function scrollBanner() {
      jQuery(document).on('scroll', function(){
      var scrollPos = jQuery(this).scrollTop();
        jQuery('.home_banner').css({
          'top' : (scrollPos/4)+'px',
        });
      });    
      }
scrollBanner(); 


// With out function


jQuery(document).ready(function(){
	
	jQuery(window).on('scroll', function(){
		var scrollTop = jQuery(window).scrollTop();
		jQuery('.home_banner').css({'top': (scrollTop/4) +'px'});
		
	});
});

#javascript

Basic JavaScript: Counting Cards | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/counting-cards

#undefined #todoo #javascript

Todooo list sample

#javascript

calculate the days between two dates

const calcDaysPassed = (date1, date2) =>
  Math.round(Math.abs((date2 - date1) / (1000 * 60 * 60 * 24)));

const day1 = calcDaysPassed(new Date(2037, 3, 14), new Date(2037, 3, 24));

//(1000 * 60 * 60 * 24) 1000milliseconds/sec 60sec/min 60min/hour 24hours/day
//Math.abs we use so that it doesn't matter which date is used first (remove -)
//Math.floor to remove decimals that occur if hours and minutes are included

#javascript

Getting an Item's Index

import java.util.ArrayList;

class ToDos {
    
  public static void main(String[] args) {
    
    // Sherlock
    ArrayList<String> sherlocksToDos = new ArrayList<String>();
    
    sherlocksToDos.add("visit the crime scene");
    sherlocksToDos.add("play violin");
    sherlocksToDos.add("interview suspects");
    sherlocksToDos.add("listen to Dr. Watson for amusement");
    sherlocksToDos.add("solve the case");
    sherlocksToDos.add("apprehend the criminal");
    
    sherlocksToDos.remove("visit the crime scene");
    
    // Calculate to-dos until case is solved:
    System.out.println(sherlocksToDos.indexOf("solve the case"));
      
    // Change the value printed:
    System.out.println("PRINT THE ANSWER HERE");

  }
  
}

#javascript

Removing an Item ArrayList

import java.util.ArrayList;

class ToDos {
    
  public static void main(String[] args) {
    
    // Sherlock
    ArrayList<String> sherlocksToDos = new ArrayList<String>();
    
    sherlocksToDos.add("visit the crime scene");
    sherlocksToDos.add("play violin");
    sherlocksToDos.add("interview suspects");
    sherlocksToDos.add("solve the case");
    sherlocksToDos.add("apprehend the criminal");
    
    // Poirot
    ArrayList<String> poirotsToDos = new ArrayList<String>();
    
    poirotsToDos.add("visit the crime scene");
    poirotsToDos.add("interview suspects");
    poirotsToDos.add("let the little grey cells do their work");
    poirotsToDos.add("trim mustache");
    poirotsToDos.add("call all suspects together");
    poirotsToDos.add("reveal the truth of the crime");
    
    // Remove each to-do below:
    sherlocksToDos.remove("visit the crime scene");
    poirotsToDos.remove("visit the crime scene");
     sherlocksToDos.remove("play violin"); 
    System.out.println(sherlocksToDos.toString() + "\n");
    System.out.println(poirotsToDos.toString());
  }
  
}

#javascript

Changing a Value arraylist

import java.util.ArrayList;

class ToDos {
    
  public static void main(String[] args) {
    
    // Sherlock
    ArrayList<String> sherlocksToDos = new ArrayList<String>();
    
    sherlocksToDos.add("visit the crime scene");
    sherlocksToDos.add("play violin");
    sherlocksToDos.add("interview suspects");
    sherlocksToDos.add("solve the case");
    sherlocksToDos.add("apprehend the criminal");
    
    // Poirot
    ArrayList<String> poirotsToDos = new ArrayList<String>();
    
    poirotsToDos.add("visit the crime scene");
    poirotsToDos.add("interview suspects");
    poirotsToDos.add("let the little grey cells do their work");
    poirotsToDos.add("trim mustache");
    poirotsToDos.add("call all suspects together");
    poirotsToDos.add("reveal the truth of the crime");
    
    // Set each to-do below:
    sherlocksToDos.set(1, "listen to Dr. Watson for amusement");
    poirotsToDos.set(3, "listen to Captain Hastings for amusement");
    
    System.out.println("Sherlock's to-do list:");
    System.out.println(sherlocksToDos.toString() + "\n");
    System.out.println("Poirot's to-do list:");
    System.out.println(poirotsToDos.toString());
  }
  
}import java.util.ArrayList;

class ToDos {
    
  public static void main(String[] args) {
    
    // Sherlock
    ArrayList<String> sherlocksToDos = new ArrayList<String>();
    
    sherlocksToDos.add("visit the crime scene");
    sherlocksToDos.add("play violin");
    sherlocksToDos.add("interview suspects");
    sherlocksToDos.add("solve the case");
    sherlocksToDos.add("apprehend the criminal");
    
    // Poirot
    ArrayList<String> poirotsToDos = new ArrayList<String>();
    
    poirotsToDos.add("visit the crime scene");
    poirotsToDos.add("interview suspects");
    poirotsToDos.add("let the little grey cells do their work");
    poirotsToDos.add("trim mustache");
    poirotsToDos.add("call all suspects together");
    poirotsToDos.add("reveal the truth of the crime");
    
    // Set each to-do below:
    sherlocksToDos.set(1, "listen to Dr. Watson for amusement");
    poirotsToDos.set(3, "listen to Captain Hastings for amusement");
    
    System.out.println("Sherlock's to-do list:");
    System.out.println(sherlocksToDos.toString() + "\n");
    System.out.println("Poirot's to-do list:");
    System.out.println(poirotsToDos.toString());
  }
  
}

#javascript

ArrayList Accessing an Index get

import java.util.ArrayList;

class ToDos {
    
  public static void main(String[] args) {
    
    // Sherlock
    ArrayList<String> sherlocksToDos = new ArrayList<String>();
    
    sherlocksToDos.add("visit the crime scene");
    sherlocksToDos.add("play violin");
    sherlocksToDos.add("interview suspects");
    sherlocksToDos.add("solve the case");
    sherlocksToDos.add("apprehend the criminal");
    
    // Poirot
    ArrayList<String> poirotsToDos = new ArrayList<String>();
    
    poirotsToDos.add("visit the crime scene");
    poirotsToDos.add("interview suspects");
    poirotsToDos.add("let the little grey cells do their work");
    poirotsToDos.add("trim mustache");
    poirotsToDos.add("call all suspects together");
    poirotsToDos.add("reveal the truth of the crime");
    
    System.out.println("Sherlock's third to-do:");
    // Print Sherlock's third to-do:
    System.out.println(sherlocksToDos.get(2));
    
    System.out.println("\nPoirot's second to-do:");
    // Print Poirot's second to-do:
    
    System.out.println(poirotsToDos.get(1));
  }
  
}

#javascript

ArrayList Size

import java.util.ArrayList;

class ToDos {
    
  public static void main(String[] args) {
    
    // Sherlock
    ArrayList<String> sherlocksToDos = new ArrayList<String>();
    
    sherlocksToDos.add("visit the crime scene");
    sherlocksToDos.add("play violin");
    sherlocksToDos.add("interview suspects");
    sherlocksToDos.add("solve the case");
    sherlocksToDos.add("apprehend the criminal");
    
    // Poirot
    ArrayList<String> poirotsToDos = new ArrayList<String>();
    
    poirotsToDos.add("visit the crime scene");
    poirotsToDos.add("interview suspects");
    poirotsToDos.add("let the little grey cells do their work");
    poirotsToDos.add("trim mustache");
    poirotsToDos.add("call all suspects together");
    poirotsToDos.add("reveal the truth of the crime");
    
    // Print the size of each ArrayList below:
    System.out.println(sherlocksToDos.size());
     System.out.println(poirotsToDos.size()); 
    // Print the name of the detective with the larger to-do list:
    System.out.println("Poirot");
  }
  
}

#javascript

Adding an Item ArrayList

import java.util.ArrayList;

class ToDos {
    
  public static void main(String[] args) {
    
    ArrayList<String> toDoList = new ArrayList<String>();
    String toDo1 = "Water plants";

    // Add more to-dos here:
    String toDo2 = "Mow Lawn";
    String toDo3 = "Make bed";   
    
    // Add to-dos to toDoList
    toDoList.add(toDo1);
    toDoList.add(toDo2);
    toDoList.add(toDo3);
    System.out.println(toDoList);
      
    
  }
  
}

#javascript

Creating ArrayLists

// import the ArrayList package here:
import java.util.ArrayList;

class ToDos {
  
  public static void main(String[] args) {
    
    // Create toDoList below:
    ArrayList<String> toDoList = new ArrayList<String>();
    
  }
  
}

#javascript

Arrays review

import java.util.Arrays;

public class Classroom {
  
  public static void main(String[] args){
    String[] students = {"Sade", "Alexus", "Sam", "Koma"};
     double[] mathScores = new double[4];
     mathScores[0] = 94.5;
     mathScores[2] = 76.8;
     System.out.println("The number of students in the class is "+ students.length+".");
  }
}

#javascript

String[] args

import java.util.Arrays;

public class Newsfeed {
  
  String[] topics;
  
  public Newsfeed(String[] initialTopics) {
		topics = initialTopics;
  }
  
  public static void main(String[] args) {
		Newsfeed feed;
    if (args[0].equals("Human")) {
      
      //topics for a Human feed:
      String[] humanTopics = {"Politics", "Science", "Sports", "Love"};
			feed = new Newsfeed(humanTopics);
      
    } else if(args[0].equals("Robot")) {
      
      //topics for a Robot feed:
      String[] robotTopics = {"Oil", "Parts", "Algorithms", "Love"};
      feed = new Newsfeed(robotTopics);
      
    } else {
      String[] genericTopics = {"Opinion", "Tech", "Science", "Health"};
      feed = new Newsfeed(genericTopics);
    }
        
    System.out.println("The topics in this feed are:");
    System.out.println(Arrays.toString(feed.topics));
  }
}

#javascript

Length

import java.util.Arrays;

public class Newsfeed {
  
  String[] topics = {"Opinion", "Tech", "Science", "Health"};
  int[] views = {0, 0, 0, 0};
  
  public Newsfeed(){

  }
    
  public String[] getTopics(){
    return topics;
  }
  
  public int getNumTopics(){
    return topics.length;
  }
  
  public static void main(String[] args){
    Newsfeed sampleFeed = new Newsfeed();
    
    System.out.println("The number of topics is "+ sampleFeed.getNumTopics());
   
  }
}

#javascript

Creating an Empty Array

import java.util.Arrays;

public class Newsfeed {
  
  String[] topics = {"Opinion", "Tech", "Science", "Health"};
  int[] views = {0, 0, 0, 0};
  String[] favoriteArticles;
  
  public Newsfeed(){
    // Initialize favoriteArticles here:
    favoriteArticles = new String[10];
  }
  
  public void setFavoriteArticle(int favoriteIndex, String newArticle){
    // Add newArticle to favoriteArticles:
    
    favoriteArticles[favoriteIndex] = newArticle;
  }
    
  public static void main(String[] args){
    Newsfeed sampleFeed = new Newsfeed();
    
    sampleFeed.setFavoriteArticle(2, "Humans: Exterminate Or Not?");
    sampleFeed.setFavoriteArticle(3, "Organic Eye Implants");
    sampleFeed.setFavoriteArticle(0, "Oil News");
    
    System.out.println(Arrays.toString(sampleFeed.favoriteArticles));
  }
}

#javascript

Get Element By Index

import java.util.Arrays;

public class Newsfeed {
  
  String[] topics = {"Opinion", "Tech", "Science", "Health"};
  int[] views = {0, 0, 0, 0};
  
  public Newsfeed(){

  }
    
  public String[] getTopics(){
    return topics;
  }
  
  public String getTopTopic(){
    
    return topics[0];
  }
  
  public void viewTopic(int topicIndex){
    views[topicIndex] = views[topicIndex] + 1;
  }

  public static void main(String[] args){
    Newsfeed sampleFeed = new Newsfeed();
    
    System.out.println("The top topic is "+ sampleFeed.getTopTopic());
    
    sampleFeed.viewTopic(1);
    sampleFeed.viewTopic(1);
    sampleFeed.viewTopic(3);
    sampleFeed.viewTopic(2);
    sampleFeed.viewTopic(2);
    sampleFeed.viewTopic(1);
    
    System.out.println("The " + sampleFeed.topics[1] + " topic has been viewed " + sampleFeed.views[1] + " times!"); 
  }
}

#javascript

Importing Arrays

// import the Arrays package here:
import java.util.Arrays;
public class Newsfeed {
  
  
  public Newsfeed(){
    
  }
    
  public String[] getTopics(){
    String[] topics = {"Opinion", "Tech", "Science", "Health"};
    return topics;
  }
  

  public static void main(String[] args){
    Newsfeed sampleFeed = new Newsfeed();
    String[] topics = sampleFeed.getTopics();
    System.out.println(Arrays.toString(topics));
  }
}

#javascript

Creating an Array Explicitly

public class Newsfeed {
  
  
  public Newsfeed(){
    
  }
  
  // Create getTopics() below:
  public String[] getTopics(){
    String[] topics = {"Opinion", "Tech", "Science", "Health"};
    return topics;
  }

  public static void main(String[] args){
    Newsfeed sampleFeed = new Newsfeed();
    
    String[] topics = sampleFeed.getTopics();
    System.out.println(topics);
    
  }
}

#javascript

Continents and Cities

public class Continents {
	public static void main(String[] args) {
    int continent = 1;

    switch(continent){

      case 1:
      System.out.println("North America: Mexico City, Mexico");
      break;
        case 2:
      System.out.println("South America: Sao Paulo, Brazil");
      break;
        case 3:
      System.out.println("Europe: Moscow, Russia");
      break;
        case 4:
      System.out.println("Africa: Lagos, Nigeria");
      break;
        case 5:
      System.out.println("Asia: Shanghai, China");
      break;
        case 6:
      System.out.println("Australia: Sydney, Australia");
      break;
        case 7:
      System.out.println("Antarctica: McMurdo Station, US");
      break;
      default:
      System.out.println("Undefined continent!");


    }

		

	}
}

#javascript

A Simple Car Loan Payment Calculator

public class CarLoan {
  
	public static void main(String[] args) {
   int carLoan = 10000;
  int loanLength = 3;
  int interestRate =5;
  int downPayment = 2000;

	 if (loanLength <= 0 || interestRate <= 0){
    System.out.println("Error! You must take out a valid car loan.");
  }else if ( downPayment>= carLoan){
     System.out.println("The car can be paid in full.");
  }else{
    int remainingBalance = carLoan - downPayment;
    int months = loanLength *12;
    int monthlyBalance = remainingBalance / months;
    int interest = (monthlyBalance * interestRate)/100;
    int monthlyPayment = monthlyBalance + interest;
    System.out.println(monthlyPayment);
  }

	}
}

#javascript

Logical NOT: !

public class Reservation {
  int guestCount;
  int restaurantCapacity;
  boolean isRestaurantOpen;
  boolean isConfirmed;
  
  public Reservation(int count, int capacity, boolean open) {
    if (count < 1 || count > 8) {
      System.out.println("Invalid reservation!");
    }
    guestCount = count;
		restaurantCapacity = capacity;
		isRestaurantOpen = open;
  }  
  
  public void confirmReservation() {
    if (restaurantCapacity >= guestCount && isRestaurantOpen) {
      System.out.println("Reservation confirmed");
      isConfirmed = true;
    } else {
      System.out.println("Reservation denied");
			isConfirmed = false;
    }
  }
  
  public void informUser() {
    // Write conditional here
  if (!isConfirmed){
    System.out.println("Unable to confirm reservation, please contact restaurant.");
  }else{
    System.out.println("Please enjoy your meal!");
  }
  }
  
  public static void main(String[] args) {
    Reservation partyOfThree = new Reservation(3, 12, true);
    Reservation partyOfFour = new Reservation(4, 3, true);
    partyOfThree.confirmReservation();
    partyOfThree.informUser();
    partyOfFour.confirmReservation();
    partyOfFour.informUser();
  }
}

#javascript

Conditional-Or: ||

public class Reservation {
  int guestCount;
  int restaurantCapacity;
  boolean isRestaurantOpen;
  boolean isConfirmed;
  
  public Reservation(int count, int capacity, boolean open) {
    // Write conditional statement below
     if (count<1 || count>8) {
  System.out.println("Invalid reservation!");
}
    
    guestCount = count;
		restaurantCapacity = capacity;
		isRestaurantOpen = open;
  }  
  
  public void confirmReservation() {
    if (restaurantCapacity >= guestCount && isRestaurantOpen) {
      System.out.println("Reservation confirmed");
      isConfirmed = true;
    } else {
      System.out.println("Reservation denied");
			isConfirmed = false;
    }
  }
  
  public void informUser() {
    System.out.println("Please enjoy your meal!");
  }
  
  public static void main(String[] args) {
    Reservation partyOfThree = new Reservation(3, 12, true);
    Reservation partyOfFour = new Reservation(4, 3, true);
    partyOfThree.confirmReservation();
    partyOfThree.informUser();
    partyOfFour.confirmReservation();
    partyOfFour.informUser();
  }
}

#javascript

Conditional-And: &&

public class Reservation {
  int guestCount;
  int restaurantCapacity;
  boolean isRestaurantOpen;
  boolean isConfirmed;
  
  public Reservation(int count, int capacity, boolean open) {
    guestCount = count;
		restaurantCapacity = capacity;
		isRestaurantOpen = open;
  }  
  
  public void confirmReservation() {
    /* 
       Write conditional
       ~~~~~~~~~~~~~~~~~
       if restaurantCapacity is greater
       or equal to guestCount
       AND
       the restaurant is open:
         print "Reservation confirmed"
         set isConfirmed to true
       else:
         print "Reservation denied"
         set isConfirmed to false
    */
   if (restaurantCapacity>= guestCount && isRestaurantOpen) {
  System.out.println("Reservation confirmed");
  isConfirmed = true;
}else{
  System.out.println("Reservation denied");
  isConfirmed = false;
}

  }
  
  public void informUser() {
    System.out.println("Please enjoy your meal!");
  }
  
  public static void main(String[] args) {
    Reservation partyOfThree = new Reservation(3, 12, true);
    Reservation partyOfFour = new Reservation(4, 3, true);
    partyOfThree.confirmReservation();
    partyOfThree.informUser();
    partyOfFour.confirmReservation();
    partyOfFour.informUser();
  }
}

#javascript

Basic JavaScript: Multiple Identical Options in Switch Statements

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements

#javascript

Adding a Default Option in Switch Statements

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements

#javascript

Format Dates

/**
 *
 * @param {Date} dateObject
 */

//Formatting Dates
function formateDate(dateObject) {
  const parts = {
    date: dateObject.getDate(),
    month: dateObject.getMonth() + 1,
    year: dateObject.getFullYear(),
    hour: dateObject.getHours() % 12 || 12,
    minute: dateObject.getMinutes().toString().padStart(2, '0'),
    amOrPm: dateObject.getHours() < 12 ? 'AM' : 'PM',
  };

  return `${parts.date}/${parts.month}/${parts.year} ${parts.hour}:${parts.minute} ${parts.amOrPm}`;
}

const myDate = new Date();
const myDateFormatted = formateDate(myDate);

console.log(myDateFormatted);

//INTERNATINALIZING DATES new Intl.DateTimeFormat().format(date)

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat

const currentDate = new Date();
labelDate.textContent = new Intl.DateTimeFormat('de-DE').format(currentDate);

//Using options
let options = { weekday: 'long' //'short' 'narrow', 
               year: 'numeric',
               month: 'long' //'2-digit',
               day: 'numeric',
               hour: 'numeric',
               minute: 'numeric',
               second: 'numeric',
               hour12: false, 
              };

//Instead of manually setting the language 'de-DE' you can also detect the user's browser preferred language
const localLanguage = navigator.language;

console.log(new Intl.DateTimeFormat(localLanguage, options).format(currentDate));
// → "Donnerstag, 20. Dezember 2012 - 17:29:01"

#javascript #handlebars #jest

Jest Test

// __tests__/helpers.test.js

const { format_date, format_plural } = require('../utils/helpers');


test('format_date() returns a date string', () => {
  const date = new Date('2020-03-20 16:12:03');

  expect(format_date(date)).toBe('3/20/2020');
});

========================

// /utils/helpers.js

module.exports = {
  format_date: (date) => {
    return `${new Date(date).getMonth() + 1}/${new Date(date).getDate()}/${new Date(date).getFullYear()}`;
  },
};

#javascript

Switch Statement

public class Order {
  boolean isFilled;
  double billAmount;
  String shipping;
  
  public Order(boolean filled, double cost, String shippingMethod) {
		if (cost > 24.00) {
      System.out.println("High value item!");
    }
    isFilled = filled;
    billAmount = cost;
    shipping = shippingMethod;
  }
  
  public void ship() {
    if (isFilled) {
      System.out.println("Shipping");
      System.out.println("Shipping cost: " + calculateShipping());
    } else {
      System.out.println("Order not ready");
    }
  }
  
  public double calculateShipping() {
    double shippingCost;
	 	// declare switch statement here
    switch (shipping) {

      case "Regular":
        shippingCost = 0;
        break;
      case "Express":    
        shippingCost = 1.75;
        break;
      default:
        shippingCost = .50; 
    }
    
    return shippingCost;
 	}
  
  public static void main(String[] args) {
    // do not alter the main method!
    Order book = new Order(true, 9.99, "Express");
    Order chemistrySet = new Order(false, 72.50, "Regular");
    
    book.ship();
    chemistrySet.ship();
  }
}

#javascript

Nested Conditional Statements

public class Order {
  boolean isFilled;
  double billAmount;
  String shipping;
  String couponCode;
  
  public Order(boolean filled, double cost, String shippingMethod, String coupon) {
		if (cost > 24.00) {
      System.out.println("High value item!");
    }
    isFilled = filled;
    billAmount = cost;
    shipping = shippingMethod;
    couponCode = coupon;
  }
  
  public void ship() {
    if (isFilled) {
      System.out.println("Shipping");
      System.out.println("Shipping cost: " + calculateShipping());
    } else {
      System.out.println("Order not ready");
    }
  }
  
  public double calculateShipping() {
    if (shipping.equals("Regular")) {
      return 0;
    } else if (shipping.equals("Express")) {
      // Add your code here
      if (couponCode.equals("ship50")) {
        return 0.85;
      } else {
        return 1.75;
      }
    } else {
      return .50;
    }
 	}
  
  public static void main(String[] args) {
    // do not alter the main method!
    Order book = new Order(true, 9.99, "Express", "ship50");
    Order chemistrySet = new Order(false, 72.50, "Regular", "freeShipping");
    
    book.ship();
    chemistrySet.ship();
  }
}

#javascript

If-Then-Else-If

public class Order {
  boolean isFilled;
  double billAmount;
  String shipping;
  
  public Order(boolean filled, double cost, String shippingMethod) {
		if (cost > 24.00) {
      System.out.println("High value item!");
    }
    isFilled = filled;
    billAmount = cost;
    shipping = shippingMethod;
  }
  
  public void ship() {
    if (isFilled) {
      System.out.println("Shipping");
      System.out.println("Shipping cost: " + calculateShipping());
    } else {
      System.out.println("Order not ready");
    }
  }
  
  public double calculateShipping() {
	 	// declare conditional statement here
    if (shipping.equals("Regular")) {
      return 0;
    } else if (shipping.equals("Express")) {
      return 1.75;
    } else {
      return .50;
    }
 	}
  
  public static void main(String[] args) {
    // do not alter the main method!
    Order book = new Order(true, 9.99, "Express");
    Order chemistrySet = new Order(false, 72.50, "Regular");
    
    book.ship();
    chemistrySet.ship();
  }
}

#javascript #nodejs #typescript

useWeb3

import { useEffect, useMemo, useRef, useState } from 'react'
import { useWeb3React } from '@web3-react/core'
import Web3 from 'web3'

import { defaultEVMNetworkId } from '@contracts/networks'

import { web3NoAccountInstances } from '@utils/web3'

export const useWeb3 = () => {
  const { library, chainId } = useWeb3React()
  const web3NoAccount = useMemo(
    () =>
      web3NoAccountInstances[
        chainId ? chainId.toString() : defaultEVMNetworkId
      ],
    [chainId]
  )
  const refChainId = useRef(chainId)
  const refWeb3 = useRef(library)
  const [web3, setweb3] = useState(library ? new Web3(library) : web3NoAccount)

  useEffect(() => {
    if (library !== refWeb3.current || chainId !== refChainId.current) {
      setweb3(library ? new Web3(library) : web3NoAccount)
      refWeb3.current = library
      refChainId.current = chainId
    }
  }, [chainId, library, web3NoAccount])

  return web3
}

#javascript #nodejs #typescript

useWalletConnect

import { isMobile } from 'react-device-detect'
import { useWeb3 } from '@firestarter-private/firestarter-library'
import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'

import { injected, walletconnect } from '@/connectors'

export const useWalletConnect = (): { onClickWallet: () => void } => {
  const web3 = useWeb3()
  const { activate } = useWeb3React()

  const onClickWallet = () => {
    if (isMobile) {
      // if the connector is walletconnect and the user has already tried to connect, manually reset the connector
      if (
        // @ts-ignore
        walletconnect.walletConnectProvider?.wc?.uri
      ) {
        walletconnect.walletConnectProvider = undefined
      }
      activate(walletconnect, undefined, true).catch((error) => {
        if (error instanceof UnsupportedChainIdError) {
          activate(walletconnect) // a little janky...can't use setError because the connector isn't set
        }
      })
      // @ts-ignore
      web3.setProvider(window.ethereum)
    } else {
      activate(injected)
    }
  }

  return { onClickWallet }
}

#javascript

typescript - How can I define an interface for an array of objects? - Stack Overflow

export interface MyInterface extends Array<MyType> { }

#javascript

Resposive mediaQuery

let mediaQuery = window.matchMedia("(min-width: 768px)");
if (mediaQuery.matches) {
                // destop
            } else {
                // mobile
            }

#javascript #handlebars

Partials in Handlebars

// Homepage.Handlebars
<ol class="post-list">
  {{#each posts as |post|}}
  <li>
    {{> post-info post}}
  </li>
  {{/each}}
</ol>
---
//Post-info.Handlebars (partial)
<article class='post'>
  <div class='title'>
    <a href='{{post_url}}' target='_blank'>{{title}}</a>
    <span>({{post_url}})</span>
  </div>
  <div class='meta'>
    {{vote_count}}
    point(s) by
    {{user.username}}
    on
    {{created_at}}
    |
    <a href='/post/{{id}}'>{{comments.length}} comment(s)</a>
  </div>
</article>

#javascript #handlebars

Conditional Rendering in handlebars

{{#if value}}
<div>
	This content will only display if "value" is truthy
</div>
{{/if}}

---

{{#if loggedIn}}
        <button id="logout" class="btn-no-style">logout</button>
{{else}}
        <a href="/login">login</a>
{{/if}}

#javascript #handlebars #html

Logging In and out in handlebars

// Javascript
async function signupFormHandler(event) {
  event.preventDefault();
  const username = document.querySelector('#username-signup').value.trim();
  const email = document.querySelector('#email-signup').value.trim();
  const password = document.querySelector('#password-signup').value.trim();
  if (username && email && password) {
    const response = await fetch('/api/users', {
      method: 'post',
      body: JSON.stringify({
        username,
        email,
        password,
      }),
      headers: { 'Content-Type': 'application/json' },
    });
    if (response.ok) {
      console.log(response);
    } else {
      alert(response.statusText);
    }
  }
}
async function loginFormHandler(event) {
  event.preventDefault();
  const email = document.querySelector('#email-signup').value.trim();
  const password = document.querySelector('#password-signup').value.trim();
  if (email && password) {
    const response = await fetch('/api/users/login', {
      method: 'post',
      body: JSON.stringify({
        email,
        password,
      }),
      headers: { 'Content-Type': 'application/json' },
    });
    if (response.ok) {
      document.location.replace('/')
    } else {
      alert(response.statusText);
    }
  }
}
document.querySelector('.signup-form').addEventListener('submit', signupFormHandler);
document.querySelector('.login-form').addEventListener('submit', loginFormHandler);


<!-- HTML -->

<form class='login-form'>
  <div>
    <label for='email-login'>email:</label>
    <input type='text' id='email-login' />
  </div>
  <div>
    <label for='password-login'>password:</label>
    <input type='text' id='password-login' />
  </div>
  <div>
    <button type='submit'>login</button>
  </div>
</form>
<form class='signup-form'>
  <div>
    <label for='username-signup'>username:</label>
    <input type='text' id='username-signup' />
  </div>
  <div>
    <label for='email-signup'>email:</label>
    <input type='text' id='email-signup' />
  </div>
  <div>
    <label for='password-signup'>password:</label>
    <input type='text' id='password-signup' />
  </div>
  <div>
    <button type='submit'>login</button>
  </div>
</form>
<script src="/javascript/login.js"></script>

#javascript #handlebars

Loop and showing data in handlebars

<ol class="post-list">
  {{#each posts as |post|}}
  <li>
    <article class="post">
      <div class="title">
        <a href="{{post.post_url}}" target="_blank">{{post.title}}</a>
        <span>({{post.post_url}})</span>
      </div>
      <div class="meta">
        {{post.vote_count}} point(s) by {{post.user.username}} on
        {{post.created_at}}
        |
        <a href="/post/{{post.id}}">{{post.comments.length}} comment(s)</a>
      </div>
    </article>
  </li>
  {{/each}}
</ol>

#javascript

If-Then Statement and if else

public class Order {
  
  public static void main(String[] args) {
    
    double itemCost = 30.99;
    
    // Write an if-then statement:
   if (itemCost > 24.00) {
 
  System.out.println("High value item!");
 
} 
    
  }
  
}

/// if else example

public class Order {
  
  public static void main(String[] args) {
    
    boolean isFilled = false;
    
    // Write an if-then-else statement:
       if (isFilled) {
 
  System.out.println("Shipping");
 
} else{
  System.out.println("Order not ready");
}
    
  }
  
}

#javascript

Manipulate the URL string

// breaks url string into array
    const id = window.location.toString().split('/') [
        // grab last item in array 
        window.location.toString().split('/').length - 1 
    ];

#javascript

Build A Droid

public class Droid{
//instance fields
int batteryLevel;
String name;

//constructor method
public Droid(String droidName){
  name = droidName;
  batteryLevel = 100;
}

//tostring method
public String toString(){
  return "hello, I'm the droid: " + name;
}

//peform task method 
public void performTask(String task){
System.out.println(name+" is performing task: "+ task);
 batteryLevel = batteryLevel - 10;
}

// method to print energy levels

public void energyReport(){
  System.out.println(batteryLevel);
}

//public main method
public static void main(String[] args){
 
Droid Codey = new Droid("Codey");
System.out.println(Codey);
Codey.performTask("Dancing");
Codey.energyReport();
}





}

#javascript

A Basic Calculator

///a calculator class the performs simple math.
public class Calculator{

public Calculator(){

}

public int add(int a,int b){
return a +b;
}

public int subtract(int a,int b){
return a - b;
}

public int multiply(int a,int b){
return a * b;
}

public int divide(int a,int b){
return a / b;
}

public int modulo(int a,int b){
return a % b;
}

public static void main(String[] args){

Calculator myCaculator = new Calculator();
System.out.println(myCaculator.add(5,7));
System.out.println(myCaculator.subtract(45,11));
}
}

#javascript

methods review

public class SavingsAccount {
  
  int balance;
  
  public SavingsAccount(int initialBalance){
    balance = initialBalance;
  }
  
  public void checkBalance(){
    System.out.println("Hello!");
    System.out.println("Your balance is "+balance);
  }
  
  public void deposit(int amountToDeposit){
    balance = amountToDeposit + balance;
    System.out.println("You just deposited " + amountToDeposit);
  }
  
  public int withdraw(int amountToWithdraw){
    balance = balance - amountToWithdraw;
    System.out.println("You just withdrew " + amountToWithdraw);
    return amountToWithdraw;
  }
  
  public String toString(){
    return "This is a savings account with " + balance + " saved.";
  }
  
  public static void main(String[] args){
    SavingsAccount savings = new SavingsAccount(2000);
    
    //Check balance:
    savings.checkBalance();
    
    //Withdrawing:
    savings.withdraw(300);
    
    //Check balance:
    savings.checkBalance();
    
    //Deposit:
    savings.deposit(600);
    
    //Check balance:
    savings.checkBalance();
    
    //Deposit:
    savings.deposit(600);
    
    //Check balance:
    savings.checkBalance();
    
    System.out.println(savings);
  }       
}

#javascript

The toString() Method

public class Store {
  // instance fields
  String productType;
  double price;
  
  // constructor method
  public Store(String product, double initialPrice) {
    productType = product;
    price = initialPrice;
  }
  
  // increase price method
  public void increasePrice(double priceToAdd){
    double newPrice = price + priceToAdd;
    price = newPrice;
  }
  
  // get price with tax method
  public double getPriceWithTax(){
    double tax = 0.08;
    double totalPrice = price + price*tax;
    return totalPrice;
  }

  // main method
  public static void main(String[] args) {
    Store lemonadeStand = new Store("Lemonade", 3.75);
    Store cookieShop = new Store("Cookies", 5);
    System.out.println(lemonadeStand);
    System.out.println(cookieShop);
  }
  //toString() method
  public String toString(){
       return "This store sells "+ productType +" at a price of "+price+".";
   }
}

#javascript

Returns

public class Store {
  // instance fields
  String productType;
  double price;
  
  // constructor method
  public Store(String product, double initialPrice) {
    productType = product;
    price = initialPrice;
  }
  
  // increase price method
  public void increasePrice(double priceToAdd){
    double newPrice = price + priceToAdd;
    price = newPrice;
  }
  
  // get price with tax method
  public double getPriceWithTax(){
    double totalPrice = price+price *0.08;
    return totalPrice;
  }
  // main method
  public static void main(String[] args) {
    Store lemonadeStand = new Store("Lemonade", 3.75);
  double lemonadePrice = lemonadeStand.getPriceWithTax();
  System.out.println(lemonadePrice);
  }
}

#javascript

Golf Code

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/golf-code

#javascript

Reassigning Instance Fields

public class Store {
  // instance fields
  String productType;
  double price;
  
  // constructor method
  public Store(String product, double initialPrice) {
    productType = product;
    price = initialPrice;
  }
  
  // increase price method
  public void increasePrice(double priceToAdd){
    double newPrice = price + priceToAdd;
    price = newPrice;
  }
  
  // main method
  public static void main(String[] args) {
    Store lemonadeStand = new Store("Lemonade", 3.75);
    lemonadeStand.increasePrice(1.5);
    System.out.println(lemonadeStand.price);
  }
}

#javascript

Adding Parameters

public class Store {
  // instance fields
  String productType;
  
  // constructor method
  public Store(String product) {
    productType = product;
  }
  
  // advertise method
  public void advertise() {
    String message = "Selling " + productType + "!";
		System.out.println(message);
  }
  //greet customer method
  public void greetCustomer(String customer){
    System.out.println("Welcome to the store, " + customer + "!");
  }
  
  // main method
  public static void main(String[] args) {
    Store lemonadeStand = new Store("Lemonade");
    lemonadeStand.greetCustomer("Mike");
  }
}

#javascript

Calling Methods

public class Store {
  // instance fields
  String productType;
  
  // constructor method
  public Store(String product) {
    productType = product;
  }
  
  // advertise method
  public void advertise() {
		System.out.println("Selling " + productType + "!");
    System.out.println("Come spend some money!");
  }
  
  // main method
  public static void main(String[] args) {
    Store lemonadeStand = new Store("Lemonade");
    Store Cookies = new Store("Oreos");

    lemonadeStand.advertise();
    Cookies.advertise();
  }
}

#javascript

Defining Methods

public class Store {
  // instance fields
  String productType;
  
  // constructor method
  public Store(String product) {
    productType = product;
  }
  
  // advertise method
  public void advertise(){
    System.out.println("Come spend some money!");
    System.out.println("Selling " + productType + "!");
  }
  // main method
  public static void main(String[] args) {
    
  }
}

#javascript

OPEN A BROWSER IN A JS FILE

window.open('https://www.codexworld.com', '_blank');

#javascript

Chaining If Else Statements

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements

#javascript

reactjs - Import routes in React with react router - Stack Overflow

import React from 'react';
import {
  BrowserRouter, Routes, Route,
} from 'react-router-dom';
import AdminRoutes from './admin/adminRoutes';

const routes = () => (
  <BrowserRouter>
    <AdminRoutes />
    <Routes>
      <Route path="/home" element="User template" />
      <Route path="/" element="Login Template" />
      <Route path="/register" element="Register Template" />
    </Routes>
  </BrowserRouter>
);

export default routes;

#javascript

[JS] 📚 자바스크립트 이벤트 💯 총 정리

<!DOCTYPE html>
<html>
<body>
  <p>클릭하세요. 클릭한 곳의 좌표가 표시됩니다.</p>
  <em class="message"></em>
  
  <script>
  function showCoords(e) { // e: event object
    const msg = document.querySelector('.message');
    msg.innerHTML =
      'clientX value: ' + e.clientX + '<br>' +
      'clientY value: ' + e.clientY;
  }
  addEventListener('click', showCoords); // 참조하는게 없으면 기본 window 전역 객체
  </script>
</body>
</html>

#javascript

Classes Review

public class Dog {
  String breed;
  boolean hasOwner;
  int age;
  
  public Dog(String dogBreed, boolean dogOwned, int dogYears) {
    System.out.println("Constructor invoked!");
    breed = dogBreed;
    hasOwner = dogOwned;
    age = dogYears;
  }
  
  public static void main(String[] args) {
    System.out.println("Main method started");
    Dog fido = new Dog("poodle", false, 4);
    Dog nunzio = new Dog("shiba inu", true, 12);
    boolean isFidoOlder = fido.age > nunzio.age;
    int totalDogYears = nunzio.age + fido.age;
    System.out.println("Two dogs created: a " + fido.breed + " and a " + nunzio.breed);
    System.out.println("The statement that fido is an older dog is: " + isFidoOlder);
    System.out.println("The total age of the dogs is: " + totalDogYears);
    System.out.println("Main method finished");
  }
}

#javascript

Classes: Multiple Fields

public class Store {
  // instance fields
  String productType;
  int inventoryCount;
  double inventoryPrice;
  
  // constructor method
  public Store(String product,int count,double price) {
    productType = product;
    inventoryCount = count;
    inventoryPrice = price;
  }
  
  // main method
  public static void main(String[] args) {
    Store cookieShop = new Store("cookies",12, 3.75);
   
  }
}

#javascript

Classes: Assigning Values to Instance Fields

public class Store {
  // instance fields
  String productType;
  
  // constructor method
  public Store(String product) {
    productType = product;
  }
  
  // main method
  public static void main(String[] args) {
    Store lemonadeStand = new Store("lemonade");
    System.out.println(lemonadeStand.productType);
    
  }
}

#javascript

Classes: Constructor Parameters

public class Store {
  // instance fields
  String productType;
  
  // constructor method
  public Store(String product) {
    productType = product;
  }
  
  // main method
  public static void main(String[] args) {
    
    
  }
}

#javascript

Classes: Instance Fields

public class Store {
  // declare instance fields here!
    String productType;
  
  // constructor method
  public Store() {
    System.out.println("I am inside the constructor method.");
  }
  
  // main method
  public static void main(String[] args) {
    System.out.println("This code is inside the main method.");
    
    Store lemonadeStand = new Store();
    
    System.out.println(lemonadeStand);
  }
}

#javascript

Classes: Constructors

public class Store {
  
  // new method: constructor!
  public Store() {
    System.out.println("I am inside the constructor method.");
  }
  
  // main method is where we create instances!
  public static void main(String[] args) {
    System.out.println("Start of the main method.");
    
    // create the instance below
    Store lemonadeStand = new Store(); 
    // print the instance below
    System.out.println(lemonadeStand);
  }
}

#javascript

JavaScript 개발자라면 꼭 알아야 할 this - 재그지그의 개발 블로그

// 단순 함수 호출

// 1. 일반 함수 범위에서 호출
function outside() {
    console.log(this); // this는 window

    // 2. 함수 안에 함수가 선언된 내부 함수 호출
    function inside() {
        console.log(this); // this는 window
    }
    inside();
}
outside();

// 객체의 메소드(Method)

// 1. 객체 또는 클래스 안에서 메소드를 실행한다면 this는 Object 자기 자신
var man = {
    name: 'john',
    hello: function() {
        // 2. 객체이므로 this는 man을 가리킴
        console.log('hello ' + this.name);
    }
}
man.hello(); // 3. hello john

// 3. 일반 함수 welcome을 선언
function welcome() {
    // 4. 여기서 this는 전역 객체 Window이므로, 만약 실행시키면 undefined가 뜸
    console.log('welcome ' + this.name);
}

// 5. man 객체의 welcome 속성에 일반 함수 welcome을 추가
man.welcome = welcome;

// 6. welcome이 man 객체에서 호출되었으므로 welcome john이 출력됨
man.welcome();

// 7. man 객체의 thanks 속성에 함수를 선언
man.thanks = function () {
    // 8. man.thanks()를 호출하면 thanks john이 출력
    console.log('thanks ' + this.name);
}

// 8. 이 함수를 객체 외부에서 참조
var thankYou = man.thanks;

// 9. 객체 외부이므로 this가 Window 객체가 되어서 thanks (undefined)가 출력
thankYou();

// 10. 그럼 또 다른 객체에서 이 함수를 호출하면 어떻게 될까?
women = {
    name: 'barbie',
    thanks: man.thanks // 11. man.thanks 함수를 women.thanks에 참조
}

// 12. this가 포함된 함수가 호출된 객체가 women이므로 thanks barbie가 출력
women.thanks();

// 메소드 내에 함수 선언

var man = {
    name: 'john',
    // 1. 이것은 객체의 메소드
    hello: function() {
        // 2. 객체의 메소드 안에서 함수를 선언하는 것이니까 내부 함수
        function getName() {
            // 3. 여기서 this가 무엇을 가리키고 있을까?
            return this.name;
        }
        console.log('hello ' + getName()); // 4. 내부 함수를 출력시키고
    }
}
man.hello(); // 메소드를 실행시키면 undefined가 뜬다! this는 Window였던 것

// call(), apply(), bind()

// 1. 이것은 객체의 메소드
var man = {
    name: 'john',
    // 2. 객체의 메소드 안에서 함수를 선언하는 것이니까 내부 함수
    hello: function() {
        function getName() {
            // 3. 여기서 this가 무엇을 가리키고 있을까?
            return this.name;
        }
        // 4. 이번에는 call()을 통해 현재 문맥에서의 this(man 객체)를 바인딩해주었다
        console.log('hello ' + getName.call(this));
    }
}

// 이번에는 메소드를 실행시키면 john가 뜬다!
// this가 man 객체로 바인딩 된 것을 확인할 수 있다
man.hello();

// 콜백 함수

// 1. 콜백함수
var object = {
    callback: function() {
        setTimeout(function() {
            console.log(this); // 2. this는 window
        }, 1000);
    }
}

// 생성자

// 1. 클래스 역할을 할 함수 선언
function Man () {
    this.name = 'John';
}

// 2. 생성자로 객체 선언
var john = new Man();

// 3. this가 Man 객체를 가리키고 있어 이름이 정상적으로 출력된다
john.name; // => 'John'

// class 이용

// 1. Class Man 선언
class Man {
    constructor(name) {
        this.name = name;
    }
    hello() {
        console.log('hello ' + this.name)
    }
}

// 2. 생성자 실행
var john = new Man('John');
john.hello(); // 3. hello John 출력

// 화살표 함수(Arrow function)

// 1. 화살표 함수
var obj = {
    a: this, // 2. 일반적인 경우 this는 window,
    b: function() {
      console.log(this) // 3. 메소드의 경우 this는 객체
    },
    c: () => {
        console.log(this)
        // 4. 화살표 함수의 경우 정적 컨텍스트를 가짐, 함수를 호출하는 것과 this는 연관이 없음
        // 5. 따라서 화살표 함수가 정의된 obj 객체의 this를 바인딩하므로 this는 window
    }

}

obj.b() // 6. obj
obj.c() // 7. window

#javascript #react.js

React update arrays in list

const addNewGoalHandler = (newGoal) => {
    // if the update of the states doesnt depend from the previous one
    setTask(task.concat(newGoal));
  	//also works setTodos([...todos, newTodo]);
    // setTask((prevtask) => {
    //   // if your state depends from the previous one
    //   return prevtask.concat(newGoal);
    // });
  };

#javascript

SHEET UPDATE WITH ATT.FILE AND URL ON EDIT TRIGGER IS REQ.

function sendNotification() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getActiveSheet();
  var cell = ss.getActiveCell().getA1Notation();
  var row = sheet.getActiveRange().getRow();
  var cellvalue = ss.getActiveCell().getValue().toString();
  var recipients = "me@gmail.com";
  var message = '';
  if(cell.indexOf('G')!=-1){ 
    message = sheet.getRange('D'+ sheet.getActiveCell().getRowIndex()).getValue()
  }
  var subject = 'Update to '+sheet.getName();
  var body = sheet.getName() + ' has been updated. Visit ' + ss.getUrl() + ' to view the changes on row: «' + row + '». New comment: «' + cellvalue + '». For message: «' + message + '»';
  MailApp.sendEmail(recipients, subject, body);
};

#javascript

send mail when one coloumn is changed works on onedit trigger also modify in if statement

function onEdit(e) {
  var editedSheet = e.source.getActiveSheet();
  var editedCell = e.range;
  var row = editedCell.getRow();
  var col = editedCell.getColumn();
  
  var ySheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("APPROVE PURCHASE");

  //Check if edit is done in Sheet "X_input"
  if(editedSheet.getName()=="APPROVE PURCHASE"){
    //copy modified cell to Y_output sheet
    ySheet.getRange(row,col).setValue(e.value);


    //check if modified cell is within B2:Y61 range and send an email
   if(row>=2 && row<=1000 && col==9 && col==9)
   
   
   {
      //Send email
     var subject = "Sheet: "+editedSheet.getName();
      var message = "Cell "+editedCell.getA1Notation()+" was modified from '"+e.oldvalue+"' to '"+e.value+"'";
      MailApp.sendEmail("ashwani.kumar1@meenakshipolymers.com",subject,message);
    }
  }
 
}

#javascript

Send email notification when cell has been edited on a specific google sheets tab - Stack Overflow

function onEdit(e) {
  var editedSheet = e.source.getActiveSheet();
  var editedCell = e.range;
  var row = editedCell.getRow();
  var col = editedCell.getColumn();
  
  var ySheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Y_output");

  //Check if edit is done in Sheet "X_input"
  if(editedSheet.getName()=="X_input"){
    //copy modified cell to Y_output sheet
    ySheet.getRange(row,col).setValue(e.value);


    //check if modified cell is within B2:Y61 range and send an email
    if(row>=2 && row<=61 && col>=2 && col<=25){
      //Send email
     var subject = "Sheet: "+editedSheet.getName();
      var message = "Cell "+editedCell.getA1Notation()+" was modified from '"+e.oldvalue+"' to '"+e.value+"'";
      MailApp.sendEmail("ronoel@google.com",subject,message);
    }
  }
 
}

#javascript

3.6. HashMap

package org.launchcode.java.demos.collections;

import java.util.HashMap;
import java.util.Map;
import java.util.Scanner;

public class HashMapGradebook {

   public static void main(String[] args) {

      HashMap<String, Double> students = new HashMap<>();
      Scanner input = new Scanner(System.in);
      String newStudent;

      System.out.println("Enter your students (or ENTER to finish):");

      // Get student names and grades
      do {

         System.out.print("Student: ");
         newStudent = input.nextLine();

         if (!newStudent.equals("")) {
            System.out.print("Grade: ");
            Double newGrade = input.nextDouble();
            students.put(newStudent, newGrade);

            // Read in the newline before looping back
            input.nextLine();
         }

      } while(!newStudent.equals(""));

      // Print class roster
      System.out.println("\nClass roster:");
      double sum = 0.0;

      for (Map.Entry<String, Double> student : students.entrySet()) {
         System.out.println(student.getKey() + " (" + student.getValue() + ")");
         sum += student.getValue();
      }

      double avg = sum / students.size();
      System.out.println("Average grade: " + avg);
   }
}
//Notice how a HashMap called students is declared on line 11:
HashMap<String, Double> students = new HashMap<>();
//Here, <String, Double> defines the data types for this map’s <key, value> pairs. Like the ArrayList, when we call the HashMap constructor on the right side of the assignment, we don’t need to specify type.

//We can add a new item with a .put() method, specifying both key and value:
students.put(newStudent, newGrade);

#javascript

Array

package org.launchcode.java.demos.collections;

import java.util.Scanner;

public class ArrayGradebook {

   public static void main(String[] args) {

      // Allow for at most 30 students
      int maxStudents = 30;

      String[] students = new String[maxStudents];
      double[] grades = new double[maxStudents];
      Scanner input = new Scanner(System.in);

      String newStudent;
      int numStudents = 0;

      System.out.println("Enter your students (or ENTER to finish):");

      // Get student names
      do {
         newStudent = input.nextLine();

         if (!newStudent.equals("")) {
            students[numStudents] = newStudent;
            numStudents++;
         }

      } while(!newStudent.equals(""));

      // Get student grades
      for (int i = 0; i < numStudents; i++) {
         System.out.print("Grade for " + students[i] + ": ");
         double grade = input.nextDouble();
         grades[i] = grade;
      }

      // Print class roster
      System.out.println("\nClass roster:");
      double sum = 0.0;

      for (int i = 0; i < numStudents; i++) {
         System.out.println(students[i] + " (" + grades[i] + ")");
         sum += grades[i];
      }

      double avg = sum / numStudents;
      System.out.println("Average grade: " + avg);
   }

}

#javascript

ArrayList Methods

ArrayList<String> planets = new ArrayList<>();

planets.add("Mercury");
planets.add("Venus");
planets.add("Earth");
planets.add("Mars");
planets.add("Jupiter");
planets.add("Saturn");
planets.add("Uranus");
planets.add("Neptune");

#javascript

3.4.1 do-while/for-each/for while array list

// Get student names
do {
   newStudent = input.nextLine();

   if (!newStudent.equals("")) {
      students.add(newStudent);
   }

} while(!newStudent.equals(""));


// for -each Get student grades
for (String student : students) {
   System.out.print("Grade for " + student + ": ");
   Double grade = input.nextDouble();
   grades.add(grade);
}
// Print class roster
System.out.println("\nClass roster:");
double sum = 0.0;

for (int i = 0; i < students.size(); i++) {
   System.out.println(students.get(i) + " (" + grades.get(i) + ")");
   sum += grades.get(i);
}

#javascript

3.4. ArrayList

package org.launchcode.java.demos.collections;

import java.util.ArrayList;
import java.util.Scanner;

public class ArrayListGradebook {

   public static void main(String[] args) {

      ArrayList<String> students = new ArrayList<>();
      ArrayList<Double> grades = new ArrayList<>();
      Scanner input = new Scanner(System.in);
      String newStudent;

      System.out.println("Enter your students (or ENTER to finish):");

      // Get student names
      do {
         newStudent = input.nextLine();

         if (!newStudent.equals("")) {
            students.add(newStudent);
         }

      } while(!newStudent.equals(""));

      // Get student grades
      for (String student : students) {
         System.out.print("Grade for " + student + ": ");
         Double grade = input.nextDouble();
         grades.add(grade);
      }

      // Print class roster
      System.out.println("\nClass roster:");
      double sum = 0.0;

      for (int i = 0; i < students.size(); i++) {
         System.out.println(students.get(i) + " (" + grades.get(i) + ")");
         sum += grades.get(i);
      }

      double avg = sum / students.size();
      System.out.println("Average grade: " + avg);
   }
}

#javascript #copyright

Automatically Update the Copyright Year w/ Date Range

<p> Copyright &copy; 2014-<script>document.write(new Date().getFullYear())</script> Your Name All Rights Reserved</p>

#javascript #copyright

Automatically Update the Copyright Year - Simple

<p>Copyright &copy; <script>document.write(new Date().getFullYear())</script> Your Name All Rights Reserved</p>

#javascript

Javscript async/await

https://www.programiz.com/javascript/async-await

#javascript

Tag - Strukturerte Data - Accommodation - GTM

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Accommodation",
        "name": "{{class - name}}",
        "description": {{id - description}},
        "occupancy": {
            "@type": "QuantitativeValue",
            "minValue": 1,
            "maxValue": "{{id - maximumAttendeeCapacity}}"
        },
        "numberOfBedrooms": "{{id - numberOfBedroom}}",
        "petsAllowed": "{{Oppslagstabell - petsAllowed}}",
        "telephone": "{{class - telephone}}",
        "address": {
            "@type": "Place",
            "containedInPlace": "{{id - containedInPlace}}",
            "geo": "{{id - geo}}",
//          "hasMap": " variabel for hasMap",
            "logo": "https://www.norgesbooking.no/ImageGen.ashx?image=/media/3567/logo3.png",
            "smokingAllowed": "false"
        }
    }
</script>

#javascript

Tag - Dynamisk Meta-beskrivelse fra variabel (HTML) - GTM

<script>
  var m = document.createElement('meta'); 
  m.name = 'description'; 
  m.content = '{{Variabel - Tekst fra nettsiden}}'; 
  document.head.appendChild(m);
  console.log("Har lagt inn dynamisk meta-beskrivelse");
</script>

#javascript

Sett inn HTML kode - (AB Test)

insertAdjacentHTML(position, text)

#javascript

reactjs - Using localstorage in useEffect dependency works, but gives warning - Stack Overflow

import { useEffect, useState } from "react";

function getProfileData() {
  return JSON.parse(localStorage.getItem('profile'));
}

export default function useProfileData() {
  const [profile, setProfile] = useState(getProfileData());

  useEffect(() => {
    function handleChangeStorage() {
      setProfile(getProfileData());
    }

    window.addEventListener('storage', handleChangeStorage);
    return () => window.removeEventListener('storage', handleChangeStorage);
  }, []);

  return profile;
}

#javascript

Listen localStorage changes

window.addEventListener('storage', () => setValue(localStorage.getItem(key)));

#javascript #nodejs

create dummy data base tabels

DROP DATABASE IF EXISTS `sql_invoicing`;
CREATE DATABASE `sql_invoicing`; 
USE `sql_invoicing`;

SET NAMES utf8 ;
SET character_set_client = utf8mb4 ;

CREATE TABLE `payment_methods` (
  `payment_method_id` tinyint(4) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  PRIMARY KEY (`payment_method_id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
INSERT INTO `payment_methods` VALUES (1,'Credit Card');
INSERT INTO `payment_methods` VALUES (2,'Cash');
INSERT INTO `payment_methods` VALUES (3,'PayPal');
INSERT INTO `payment_methods` VALUES (4,'Wire Transfer');

CREATE TABLE `clients` (
  `client_id` int(11) NOT NULL,
  `name` varchar(50) NOT NULL,
  `address` varchar(50) NOT NULL,
  `city` varchar(50) NOT NULL,
  `state` char(2) NOT NULL,
  `phone` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`client_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
INSERT INTO `clients` VALUES (1,'Vinte','3 Nevada Parkway','Syracuse','NY','315-252-7305');
INSERT INTO `clients` VALUES (2,'Myworks','34267 Glendale Parkway','Huntington','WV','304-659-1170');
INSERT INTO `clients` VALUES (3,'Yadel','096 Pawling Parkway','San Francisco','CA','415-144-6037');
INSERT INTO `clients` VALUES (4,'Kwideo','81674 Westerfield Circle','Waco','TX','254-750-0784');
INSERT INTO `clients` VALUES (5,'Topiclounge','0863 Farmco Road','Portland','OR','971-888-9129');

CREATE TABLE `invoices` (
  `invoice_id` int(11) NOT NULL,
  `number` varchar(50) NOT NULL,
  `client_id` int(11) NOT NULL,
  `invoice_total` decimal(9,2) NOT NULL,
  `payment_total` decimal(9,2) NOT NULL DEFAULT '0.00',
  `invoice_date` date NOT NULL,
  `due_date` date NOT NULL,
  `payment_date` date DEFAULT NULL,
  PRIMARY KEY (`invoice_id`),
  KEY `FK_client_id` (`client_id`),
  CONSTRAINT `FK_client_id` FOREIGN KEY (`client_id`) REFERENCES `clients` (`client_id`) ON DELETE RESTRICT ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
INSERT INTO `invoices` VALUES (1,'91-953-3396',2,101.79,0.00,'2019-03-09','2019-03-29',NULL);
INSERT INTO `invoices` VALUES (2,'03-898-6735',5,175.32,8.18,'2019-06-11','2019-07-01','2019-02-12');
INSERT INTO `invoices` VALUES (3,'20-228-0335',5,147.99,0.00,'2019-07-31','2019-08-20',NULL);
INSERT INTO `invoices` VALUES (4,'56-934-0748',3,152.21,0.00,'2019-03-08','2019-03-28',NULL);
INSERT INTO `invoices` VALUES (5,'87-052-3121',5,169.36,0.00,'2019-07-18','2019-08-07',NULL);
INSERT INTO `invoices` VALUES (6,'75-587-6626',1,157.78,74.55,'2019-01-29','2019-02-18','2019-01-03');
INSERT INTO `invoices` VALUES (7,'68-093-9863',3,133.87,0.00,'2019-09-04','2019-09-24',NULL);
INSERT INTO `invoices` VALUES (8,'78-145-1093',1,189.12,0.00,'2019-05-20','2019-06-09',NULL);
INSERT INTO `invoices` VALUES (9,'77-593-0081',5,172.17,0.00,'2019-07-09','2019-07-29',NULL);
INSERT INTO `invoices` VALUES (10,'48-266-1517',1,159.50,0.00,'2019-06-30','2019-07-20',NULL);
INSERT INTO `invoices` VALUES (11,'20-848-0181',3,126.15,0.03,'2019-01-07','2019-01-27','2019-01-11');
INSERT INTO `invoices` VALUES (13,'41-666-1035',5,135.01,87.44,'2019-06-25','2019-07-15','2019-01-26');
INSERT INTO `invoices` VALUES (15,'55-105-9605',3,167.29,80.31,'2019-11-25','2019-12-15','2019-01-15');
INSERT INTO `invoices` VALUES (16,'10-451-8824',1,162.02,0.00,'2019-03-30','2019-04-19',NULL);
INSERT INTO `invoices` VALUES (17,'33-615-4694',3,126.38,68.10,'2019-07-30','2019-08-19','2019-01-15');
INSERT INTO `invoices` VALUES (18,'52-269-9803',5,180.17,42.77,'2019-05-23','2019-06-12','2019-01-08');
INSERT INTO `invoices` VALUES (19,'83-559-4105',1,134.47,0.00,'2019-11-23','2019-12-13',NULL);

CREATE TABLE `payments` (
  `payment_id` int(11) NOT NULL AUTO_INCREMENT,
  `client_id` int(11) NOT NULL,
  `invoice_id` int(11) NOT NULL,
  `date` date NOT NULL,
  `amount` decimal(9,2) NOT NULL,
  `payment_method` tinyint(4) NOT NULL,
  PRIMARY KEY (`payment_id`),
  KEY `fk_client_id_idx` (`client_id`),
  KEY `fk_invoice_id_idx` (`invoice_id`),
  KEY `fk_payment_payment_method_idx` (`payment_method`),
  CONSTRAINT `fk_payment_client` FOREIGN KEY (`client_id`) REFERENCES `clients` (`client_id`) ON UPDATE CASCADE,
  CONSTRAINT `fk_payment_invoice` FOREIGN KEY (`invoice_id`) REFERENCES `invoices` (`invoice_id`) ON UPDATE CASCADE,
  CONSTRAINT `fk_payment_payment_method` FOREIGN KEY (`payment_method`) REFERENCES `payment_methods` (`payment_method_id`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
INSERT INTO `payments` VALUES (1,5,2,'2019-02-12',8.18,1);
INSERT INTO `payments` VALUES (2,1,6,'2019-01-03',74.55,1);
INSERT INTO `payments` VALUES (3,3,11,'2019-01-11',0.03,1);
INSERT INTO `payments` VALUES (4,5,13,'2019-01-26',87.44,1);
INSERT INTO `payments` VALUES (5,3,15,'2019-01-15',80.31,1);
INSERT INTO `payments` VALUES (6,3,17,'2019-01-15',68.10,1);
INSERT INTO `payments` VALUES (7,5,18,'2019-01-08',32.77,1);
INSERT INTO `payments` VALUES (8,5,18,'2019-01-08',10.00,2);


DROP DATABASE IF EXISTS `sql_store`;
CREATE DATABASE `sql_store`;
USE `sql_store`;

CREATE TABLE `products` (
  `product_id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `quantity_in_stock` int(11) NOT NULL,
  `unit_price` decimal(4,2) NOT NULL,
  PRIMARY KEY (`product_id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
INSERT INTO `products` VALUES (1,'Foam Dinner Plate',70,1.21);
INSERT INTO `products` VALUES (2,'Pork - Bacon,back Peameal',49,4.65);
INSERT INTO `products` VALUES (3,'Lettuce - Romaine, Heart',38,3.35);
INSERT INTO `products` VALUES (4,'Brocolinni - Gaylan, Chinese',90,4.53);
INSERT INTO `products` VALUES (5,'Sauce - Ranch Dressing',94,1.63);
INSERT INTO `products` VALUES (6,'Petit Baguette',14,2.39);
INSERT INTO `products` VALUES (7,'Sweet Pea Sprouts',98,3.29);
INSERT INTO `products` VALUES (8,'Island Oasis - Raspberry',26,0.74);
INSERT INTO `products` VALUES (9,'Longan',67,2.26);
INSERT INTO `products` VALUES (10,'Broom - Push',6,1.09);


CREATE TABLE `shippers` (
  `shipper_id` smallint(6) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  PRIMARY KEY (`shipper_id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
INSERT INTO `shippers` VALUES (1,'Hettinger LLC');
INSERT INTO `shippers` VALUES (2,'Schinner-Predovic');
INSERT INTO `shippers` VALUES (3,'Satterfield LLC');
INSERT INTO `shippers` VALUES (4,'Mraz, Renner and Nolan');
INSERT INTO `shippers` VALUES (5,'Waters, Mayert and Prohaska');


CREATE TABLE `customers` (
  `customer_id` int(11) NOT NULL AUTO_INCREMENT,
  `first_name` varchar(50) NOT NULL,
  `last_name` varchar(50) NOT NULL,
  `birth_date` date DEFAULT NULL,
  `phone` varchar(50) DEFAULT NULL,
  `address` varchar(50) NOT NULL,
  `city` varchar(50) NOT NULL,
  `state` char(2) NOT NULL,
  `points` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`customer_id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
INSERT INTO `customers` VALUES (1,'Babara','MacCaffrey','1986-03-28','781-932-9754','0 Sage Terrace','Waltham','MA',2273);
INSERT INTO `customers` VALUES (2,'Ines','Brushfield','1986-04-13','804-427-9456','14187 Commercial Trail','Hampton','VA',947);
INSERT INTO `customers` VALUES (3,'Freddi','Boagey','1985-02-07','719-724-7869','251 Springs Junction','Colorado Springs','CO',2967);
INSERT INTO `customers` VALUES (4,'Ambur','Roseburgh','1974-04-14','407-231-8017','30 Arapahoe Terrace','Orlando','FL',457);
INSERT INTO `customers` VALUES (5,'Clemmie','Betchley','1973-11-07',NULL,'5 Spohn Circle','Arlington','TX',3675);
INSERT INTO `customers` VALUES (6,'Elka','Twiddell','1991-09-04','312-480-8498','7 Manley Drive','Chicago','IL',3073);
INSERT INTO `customers` VALUES (7,'Ilene','Dowson','1964-08-30','615-641-4759','50 Lillian Crossing','Nashville','TN',1672);
INSERT INTO `customers` VALUES (8,'Thacher','Naseby','1993-07-17','941-527-3977','538 Mosinee Center','Sarasota','FL',205);
INSERT INTO `customers` VALUES (9,'Romola','Rumgay','1992-05-23','559-181-3744','3520 Ohio Trail','Visalia','CA',1486);
INSERT INTO `customers` VALUES (10,'Levy','Mynett','1969-10-13','404-246-3370','68 Lawn Avenue','Atlanta','GA',796);


CREATE TABLE `order_statuses` (
  `order_status_id` tinyint(4) NOT NULL,
  `name` varchar(50) NOT NULL,
  PRIMARY KEY (`order_status_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
INSERT INTO `order_statuses` VALUES (1,'Processed');
INSERT INTO `order_statuses` VALUES (2,'Shipped');
INSERT INTO `order_statuses` VALUES (3,'Delivered');


CREATE TABLE `orders` (
  `order_id` int(11) NOT NULL AUTO_INCREMENT,
  `customer_id` int(11) NOT NULL,
  `order_date` date NOT NULL,
  `status` tinyint(4) NOT NULL DEFAULT '1',
  `comments` varchar(2000) DEFAULT NULL,
  `shipped_date` date DEFAULT NULL,
  `shipper_id` smallint(6) DEFAULT NULL,
  PRIMARY KEY (`order_id`),
  KEY `fk_orders_customers_idx` (`customer_id`),
  KEY `fk_orders_shippers_idx` (`shipper_id`),
  KEY `fk_orders_order_statuses_idx` (`status`),
  CONSTRAINT `fk_orders_customers` FOREIGN KEY (`customer_id`) REFERENCES `customers` (`customer_id`) ON UPDATE CASCADE,
  CONSTRAINT `fk_orders_order_statuses` FOREIGN KEY (`status`) REFERENCES `order_statuses` (`order_status_id`) ON UPDATE CASCADE,
  CONSTRAINT `fk_orders_shippers` FOREIGN KEY (`shipper_id`) REFERENCES `shippers` (`shipper_id`) ON UPDATE CASCADE
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
INSERT INTO `orders` VALUES (1,6,'2019-01-30',1,NULL,NULL,NULL);
INSERT INTO `orders` VALUES (2,7,'2018-08-02',2,NULL,'2018-08-03',4);
INSERT INTO `orders` VALUES (3,8,'2017-12-01',1,NULL,NULL,NULL);
INSERT INTO `orders` VALUES (4,2,'2017-01-22',1,NULL,NULL,NULL);
INSERT INTO `orders` VALUES (5,5,'2017-08-25',2,'','2017-08-26',3);
INSERT INTO `orders` VALUES (6,10,'2018-11-18',1,'Aliquam erat volutpat. In congue.',NULL,NULL);
INSERT INTO `orders` VALUES (7,2,'2018-09-22',2,NULL,'2018-09-23',4);
INSERT INTO `orders` VALUES (8,5,'2018-06-08',1,'Mauris enim leo, rhoncus sed, vestibulum sit amet, cursus id, turpis.',NULL,NULL);
INSERT INTO `orders` VALUES (9,10,'2017-07-05',2,'Nulla mollis molestie lorem. Quisque ut erat.','2017-07-06',1);
INSERT INTO `orders` VALUES (10,6,'2018-04-22',2,NULL,'2018-04-23',2);


CREATE TABLE `order_items` (
  `order_id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) NOT NULL,
  `quantity` int(11) NOT NULL,
  `unit_price` decimal(4,2) NOT NULL,
  PRIMARY KEY (`order_id`,`product_id`),
  KEY `fk_order_items_products_idx` (`product_id`),
  CONSTRAINT `fk_order_items_orders` FOREIGN KEY (`order_id`) REFERENCES `orders` (`order_id`) ON UPDATE CASCADE,
  CONSTRAINT `fk_order_items_products` FOREIGN KEY (`product_id`) REFERENCES `products` (`product_id`) ON UPDATE CASCADE
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
INSERT INTO `order_items` VALUES (1,4,4,3.74);
INSERT INTO `order_items` VALUES (2,1,2,9.10);
INSERT INTO `order_items` VALUES (2,4,4,1.66);
INSERT INTO `order_items` VALUES (2,6,2,2.94);
INSERT INTO `order_items` VALUES (3,3,10,9.12);
INSERT INTO `order_items` VALUES (4,3,7,6.99);
INSERT INTO `order_items` VALUES (4,10,7,6.40);
INSERT INTO `order_items` VALUES (5,2,3,9.89);
INSERT INTO `order_items` VALUES (6,1,4,8.65);
INSERT INTO `order_items` VALUES (6,2,4,3.28);
INSERT INTO `order_items` VALUES (6,3,4,7.46);
INSERT INTO `order_items` VALUES (6,5,1,3.45);
INSERT INTO `order_items` VALUES (7,3,7,9.17);
INSERT INTO `order_items` VALUES (8,5,2,6.94);
INSERT INTO `order_items` VALUES (8,8,2,8.59);
INSERT INTO `order_items` VALUES (9,6,5,7.28);
INSERT INTO `order_items` VALUES (10,1,10,6.01);
INSERT INTO `order_items` VALUES (10,9,9,4.28);

CREATE TABLE `sql_store`.`order_item_notes` (
  `note_id` INT NOT NULL,
  `order_Id` INT NOT NULL,
  `product_id` INT NOT NULL,
  `note` VARCHAR(255) NOT NULL,
  PRIMARY KEY (`note_id`));

INSERT INTO `order_item_notes` (`note_id`, `order_Id`, `product_id`, `note`) VALUES ('1', '1', '2', 'first note');
INSERT INTO `order_item_notes` (`note_id`, `order_Id`, `product_id`, `note`) VALUES ('2', '1', '2', 'second note');


DROP DATABASE IF EXISTS `sql_hr`;
CREATE DATABASE `sql_hr`;
USE `sql_hr`;


CREATE TABLE `offices` (
  `office_id` int(11) NOT NULL,
  `address` varchar(50) NOT NULL,
  `city` varchar(50) NOT NULL,
  `state` varchar(50) NOT NULL,
  PRIMARY KEY (`office_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
INSERT INTO `offices` VALUES (1,'03 Reinke Trail','Cincinnati','OH');
INSERT INTO `offices` VALUES (2,'5507 Becker Terrace','New York City','NY');
INSERT INTO `offices` VALUES (3,'54 Northland Court','Richmond','VA');
INSERT INTO `offices` VALUES (4,'08 South Crossing','Cincinnati','OH');
INSERT INTO `offices` VALUES (5,'553 Maple Drive','Minneapolis','MN');
INSERT INTO `offices` VALUES (6,'23 North Plaza','Aurora','CO');
INSERT INTO `offices` VALUES (7,'9658 Wayridge Court','Boise','ID');
INSERT INTO `offices` VALUES (8,'9 Grayhawk Trail','New York City','NY');
INSERT INTO `offices` VALUES (9,'16862 Westend Hill','Knoxville','TN');
INSERT INTO `offices` VALUES (10,'4 Bluestem Parkway','Savannah','GA');



CREATE TABLE `employees` (
  `employee_id` int(11) NOT NULL,
  `first_name` varchar(50) NOT NULL,
  `last_name` varchar(50) NOT NULL,
  `job_title` varchar(50) NOT NULL,
  `salary` int(11) NOT NULL,
  `reports_to` int(11) DEFAULT NULL,
  `office_id` int(11) NOT NULL,
  PRIMARY KEY (`employee_id`),
  KEY `fk_employees_offices_idx` (`office_id`),
  KEY `fk_employees_employees_idx` (`reports_to`),
  CONSTRAINT `fk_employees_managers` FOREIGN KEY (`reports_to`) REFERENCES `employees` (`employee_id`),
  CONSTRAINT `fk_employees_offices` FOREIGN KEY (`office_id`) REFERENCES `offices` (`office_id`) ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
INSERT INTO `employees` VALUES (37270,'Yovonnda','Magrannell','Executive Secretary',63996,NULL,10);
INSERT INTO `employees` VALUES (33391,'D\'arcy','Nortunen','Account Executive',62871,37270,1);
INSERT INTO `employees` VALUES (37851,'Sayer','Matterson','Statistician III',98926,37270,1);
INSERT INTO `employees` VALUES (40448,'Mindy','Crissil','Staff Scientist',94860,37270,1);
INSERT INTO `employees` VALUES (56274,'Keriann','Alloisi','VP Marketing',110150,37270,1);
INSERT INTO `employees` VALUES (63196,'Alaster','Scutchin','Assistant Professor',32179,37270,2);
INSERT INTO `employees` VALUES (67009,'North','de Clerc','VP Product Management',114257,37270,2);
INSERT INTO `employees` VALUES (67370,'Elladine','Rising','Social Worker',96767,37270,2);
INSERT INTO `employees` VALUES (68249,'Nisse','Voysey','Financial Advisor',52832,37270,2);
INSERT INTO `employees` VALUES (72540,'Guthrey','Iacopetti','Office Assistant I',117690,37270,3);
INSERT INTO `employees` VALUES (72913,'Kass','Hefferan','Computer Systems Analyst IV',96401,37270,3);
INSERT INTO `employees` VALUES (75900,'Virge','Goodrum','Information Systems Manager',54578,37270,3);
INSERT INTO `employees` VALUES (76196,'Mirilla','Janowski','Cost Accountant',119241,37270,3);
INSERT INTO `employees` VALUES (80529,'Lynde','Aronson','Junior Executive',77182,37270,4);
INSERT INTO `employees` VALUES (80679,'Mildrid','Sokale','Geologist II',67987,37270,4);
INSERT INTO `employees` VALUES (84791,'Hazel','Tarbert','General Manager',93760,37270,4);
INSERT INTO `employees` VALUES (95213,'Cole','Kesterton','Pharmacist',86119,37270,4);
INSERT INTO `employees` VALUES (96513,'Theresa','Binney','Food Chemist',47354,37270,5);
INSERT INTO `employees` VALUES (98374,'Estrellita','Daleman','Staff Accountant IV',70187,37270,5);
INSERT INTO `employees` VALUES (115357,'Ivy','Fearey','Structural Engineer',92710,37270,5);


DROP DATABASE IF EXISTS `sql_inventory`;
CREATE DATABASE `sql_inventory`;
USE `sql_inventory`;


CREATE TABLE `products` (
  `product_id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `quantity_in_stock` int(11) NOT NULL,
  `unit_price` decimal(4,2) NOT NULL,
  PRIMARY KEY (`product_id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
INSERT INTO `products` VALUES (1,'Foam Dinner Plate',70,1.21);
INSERT INTO `products` VALUES (2,'Pork - Bacon,back Peameal',49,4.65);
INSERT INTO `products` VALUES (3,'Lettuce - Romaine, Heart',38,3.35);
INSERT INTO `products` VALUES (4,'Brocolinni - Gaylan, Chinese',90,4.53);
INSERT INTO `products` VALUES (5,'Sauce - Ranch Dressing',94,1.63);
INSERT INTO `products` VALUES (6,'Petit Baguette',14,2.39);
INSERT INTO `products` VALUES (7,'Sweet Pea Sprouts',98,3.29);
INSERT INTO `products` VALUES (8,'Island Oasis - Raspberry',26,0.74);
INSERT INTO `products` VALUES (9,'Longan',67,2.26);
INSERT INTO `products` VALUES (10,'Broom - Push',6,1.09);

#javascript

Add the contents of an array together

 NEW VARIABLE = ARRAY TO ADD.reduce((accumulator, value) => {
  return accumulator + value;
}, 0);

#javascript

Javascript restrict input once 2 decimal places have been reached - Stack Overflow

var validate = function(e) {
  var t = e.value;
  e.value = (t.indexOf(".") >= 0) ? (t.substr(0, t.indexOf(".")) + t.substr(t.indexOf("."), 3)) : t;
}

#javascript #php #nodejs #laravel

Binance clone script with complete source code

https://www.hivelance.com/binance-clone-script

#javascript

3.2. Loops

public static void main(String [] args) {
   for (int i = 0; i < 10; i++ ) {
      System.out.println(i);
   }
}
//output 0-9
for (start clause; stop clause; step clause) {
   statement1
   statement2
   ...
}
   //If you want to start at 100, stop at 0 and count backward by 5, the loop is written as:
   for (int i = 100; i >= 0; i -= 5) {
   System.out.println(i);
}
///for each-loop----Java also provides a syntax to iterate over any sequence or collection, such as an Array:
  public static void main(String [] args) {
   int nums[] = {1, 1, 2, 3, 5, 8, 13, 21};

   for (int i : nums) {
      System.out.println(i);
   }
}
  //This loop version also works with a String, where we can convert the String to an Array of characters:
  String msg = "Hello World";

for (char c : msg.toCharArray()) {
   System.out.println(c);
}
  //Java also supports the while loop, or indefinite loop. A while loop in Java:
  public static void main(String [] args) {
   int i = 0;
   while (i < 3) {
      i++;
   }
}
  //Java adds an additional, if seldom used, variation of the while loop called the do-while loop. The do-while loop is very similar to while except that the condition is evaluated at the end of the loop rather than the beginning. This ensures that a loop will be executed at least one time. Some programmers prefer this loop in some situations because it avoids an additional assignment prior to the loop.
  public static void main(String [] args) {
   do {
      System.out.println("Hello, World");
   } while (false);
}
  //There are instances where you may want to terminate a loop if a given condition is met. In these instances, the break statement comes in handy. For example, say you want to loop through an Array of integers to search for a given value. Once that number is found, you want to quit the loop. You can do the following:
  public class testBreak {

   public static void main(String [] args) {
      int[] someInts = {1, 10, 2, 3, 5, 8, 10};
      int searchTerm = 10;
      for (int oneInt : someInts) {
         if (oneInt == searchTerm) {
            System.out.println("Found it!");
            break;
         }
      }
   }
}
//In the code above, instead of the for loop iterating through all the integers in the array, it will stop after it finds the first matching instance. So once it finds the first 10 in the array, it prints “Found it!” and then terminates the loop. If the break statement weren’t there, the loop would continue and when it found the second 10, it would print “Found it!” a second time.


//The continue statement is similar to, but importantly different from, the break statement. Like break, it interrupts the normal flow of control of the loop. But unlike break, the continue statement only terminates the current iteration of the loop. So the loop will continue to run from the top (as long as the boolean expression that controls the loop is still true) after a continue statement. Here is an example:

public class testContinue {

   public static void main(String [] args) {
      int[] someInts = {1, 10, 2, 3, 5, 8, 10};
      int searchTerm = 10;
      for (int oneInt : someInts) {
         if (oneInt == searchTerm) {
            System.out.println("Found it!");
            continue;
         }
         System.out.println("Not here");
      }
   }
}
/*The above program will print “Not here” on every iteration of the for loop except where the number has been found. So the output looks like this:
Not here
Found it!
Not here
Not here
Not here
Not here
Found it!
Because of the continue statement, the final print statement in the for loop is skipped. If the continue statement weren’t there, the output would look like this instead (notice the extra “Not here” printouts):
Not here
Found it!
Not here
Not here
Not here
Not here
Not here
Found it!
Not here

#javascript

3.1. Conditionals

if (condition) {
   statement1
   statement2
   ...
}
   ///if else
   if (condition) {
   statement1
   statement2
   ...
} else {
   statement1
   statement2
   ...
}
   //else if
    import java.util.Scanner;

 public class ElseIf {
     public static void main(String args[]) {
         Scanner in = new Scanner(System.in);
         System.out.println("Enter a grade: ");
         int grade = in.nextInt();
         if (grade < 60) {
             System.out.println('F');
         } else if (grade < 70) {
             System.out.println('D');
         } else if (grade < 80) {
             System.out.println('C');
         } else if (grade < 90) {
             System.out.println('B');
         } else {
             System.out.println('A');
         }
     }
 }
     public class DayPrinter {
   public static void main(String[] args) {
      Scanner in = new Scanner(System.in);
      System.out.println("Enter an integer: ");
      int dayNum = in.nextInt();

      String day;
      if (dayNum == 0) {
        day = "Sunday";
      } else if (dayNum == 1){
        day = "Monday";
      } else if (dayNum == 2){
        day = "Tuesday";
      } else if (dayNum == 3){
        day = "Wednesday";
      } else if (dayNum == 4){
        day = "Thursday";
      } else if (dayNum == 5){
        day = "Friday";
      } else if (dayNum == 6){
       day = "Saturday";
      } else {
       day = "Int does not correspond to a day of the week";
      }
      System.out.println(day);
   }
}

#javascript

Area of a circle studio

package org.launchcode.java.studios.areaofacircle;

import java.util.Scanner;

public class Area {
    public static void main(String[] args)
    {
        Scanner input = new Scanner(System.in);
        System.out.println("Enter a radius");
        double radius = input.nextDouble();
        double area = 3.14 * radius * radius;

        System.out.println("Area of circle is :" + area);
    }
}


////Here it is with an if/else statement for negative numbers
package org.launchcode.java.studios.areaofacircle;

import java.util.Scanner;

public class Area {
    public static void main(String[] args)
    {
        Scanner input = new Scanner(System.in);
        System.out.println("Enter a radius");
        double radius = input.nextDouble();
        double area = 3.14 * radius * radius;
        if (radius < 0){
            System.err.println("Radius must be a positive int.");
            //System.exit(status:1);
        }else {
            System.out.println("Area of circle is :" + area);
        }


    }
}

#javascript

Add Element and Class

const newSpan = document.createElement('span');
const price = document.createTextNode('but');

newSpan.appendChild(price);

const addedSpan = document.querySelector(".price_varies");
addedSpan.appendChild(newSpan);

newSpan.classList.add(0, 'money');

#javascript

Load a tiff file using JQuery and Javascript? - Stack Overflow

$(document).ready(function() {
  var fileTypes = ['jpg', 'jpeg', 'png', 'tiff', 'tif', 'pdf']; //acceptable file types
  $("input:file").change(function(evt) {
    var parentEl = $(this).parent();
    $(this).parent().find("img.preview").remove();
    $(this).parent().find("canvas.preview").remove();
    var tgt = evt.target || window.event.srcElement,
      files = tgt.files;
    // FileReader support
    if (FileReader && files && files.length) {
      var fr = new FileReader();
      var extension = files[0].name.split('.').pop().toLowerCase();
      var tif = false;
      var pdf = false;
      if (extension == "tiff" || extension == "tif")
        tif = true;
      fr.onload = function(e) {
        success = fileTypes.indexOf(extension) > -1;
        if (success) {
          if (tif) {
            //Using tiff.min.js library - https://github.com/seikichi/tiff.js/tree/master
            console.debug("Parsing TIFF image...");
            //initialize with 100MB for large files
            Tiff.initialize({
              TOTAL_MEMORY: 100000000
            });
            var tiff = new Tiff({
              buffer: e.target.result
            });
            var tiffCanvas = tiff.toCanvas();
            $(tiffCanvas).css({
              "max-width": "100px",
              "width": "100%",
              "height": "auto",
              "display": "block",
              "padding-top": "10px"
            }).addClass("preview");
            $(parentEl).append(tiffCanvas);
          }  else {
            console.debug("render immmm");
            $(parentEl).append('<img src="' + fr.result + '" class="preview"/>');
          }
        }

      }

      fr.onloadend = function(e) {
        console.debug("Load End");
      }
      if (tif)
        fr.readAsArrayBuffer(files[0]);
      else
        fr.readAsDataURL(files[0]);
    }
    // Not supported
    else {
      // fallback -- perhaps submit the input to an iframe and temporarily store
      // them on the server until the user's session ends.
    }
  });
});

#javascript

MANIPULATING VARIABLES review

public class BankAccount {
  	public static void main(String[] args){
      double balance = 1000.75;
      double amountToWithdraw = 250;
      
      double updatedBalance = balance - amountToWithdraw;
      double amountForEachFriend = updatedBalance/3;
      boolean canPurchaseTicket = amountForEachFriend >= 250;
      System.out.println(canPurchaseTicket);
      
      System.out.println("I gave each friend "+amountForEachFriend+"...");
    }       
}

#javascript

String Concatenation

String username = "PrinceNelson";
System.out.println("Your username is: " + username);

int balance = 10000;
String message = "Your balance is: " + balance;
System.out.println(message);

public class Zoo {
  	public static void main(String[] args){
      int animals = 12;
      String species = "zebra";
      System.out.println("Our zoo has " + animals+" "+ species+"s!");
    }       
}

#javascript

.equals()

String person1 = "Paul";
String person2 = "John";
String person3 = "Paul";
 
System.out.println(person1.equals(person2));
// Prints false, since "Paul" is not "John"
 
System.out.println(person1.equals(person3));
// Prints true, since "Paul" is "Paul"

#javascript

Addition and Subtraction

public class PlusAndMinus {
	public static void main(String[] args) {   
		int zebrasInZoo = 8;
    int giraffesInZoo = 4;
    int animalsInZoo = zebrasInZoo + giraffesInZoo;
    System.out.println(animalsInZoo);
    int numZebrasAfterTrade = zebrasInZoo - 2;
    System.out.println(numZebrasAfterTrade);
	}
}

#javascript

type examples

public class Mess {
	public static void main(String[] args) {   
		int year = 2001;
    String title = "Shrek";
    char genre = 'C';
    double runtime = 1.58;
    boolean isPG = true;
	}
}

#javascript #react.js

Faith of Jesus ** Main Layout

<div className="mx-auto container flex items-center" id="nav">
                <div className="w-full pt-2 p-4">
                    <div className="mx-auto md:p-6 md:w-1/2">
                        <div className="flex flex-wrap justify-between">
                            <h1 className="text-2xl text-orange-500 hover:text-orange-500 transition duration-500 p-4">
                                <i className="fas fa-sign-in-alt fa-fw fa-lg"></i>
                                Sign-in
                            </h1>
                            <a
                                href="#home"
                                className="mt-8 text-orange-400 hover:text-orange-600 transition duration-500"
                            >
                                <svg
                                    className=" w-6 h-6 inline-block align-bottom"
                                    fill="none"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                                </svg>
                                Back to Home
                                <i className="fas fa-chevron-circle-left fa-fw"></i>
                            </a>
                        </div>

                        <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                            <form method="POST" action="#login">
                                <div className="mb-8">
                                    <label
                                        for="username"
                                        className="block text-gray-700 text-sm font-bold mb-2"
                                    >
                                        <span className="text-red-500">
                                            &nbsp;*
                                        </span>
                                        username
                                    </label>
                                    <div className="mt-1 relative rounded-md shadow-sm">
                                        <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                            <svg
                                                className="h-5 w-5 text-gray-400"
                                                fill="none"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                                stroke="currentColor"
                                                viewBox="0 0 24 24"
                                            >
                                                <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                            </svg>
                                        </div>
                                        <input
                                            id="username"
                                            className="block pr-10 shadow appearance-none border-2 border-orange-100 rounded w-full py-2 px-4 text-gray-700 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-orange-500 transition duration-500 ease-in-out"
                                            placeholder="you@example.com"
                                        />
                                    </div>
                                    <strong className="text-red-500 text-xs italic">
                                        username is require
                                    </strong>
                                </div>

                                <div className="mb-8">
                                    <label
                                        for="password"
                                        className="block text-gray-700 text-sm font-bold mb-2"
                                    >
                                        <span className="text-red-500">
                                            &nbsp;*
                                        </span>
                                        Password
                                    </label>
                                    <div className="mt-1 relative rounded-md shadow-sm">
                                        <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                            <svg
                                                className="h-5 w-5 text-gray-400"
                                                fill="none"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                                stroke="currentColor"
                                                viewBox="0 0 24 24"
                                            >
                                                <path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                            </svg>
                                        </div>
                                        <input
                                            name="password"
                                            id="password"
                                            type="text"
                                            className="block pr-10 shadow appearance-none border-2 border-orange-100 rounded w-full py-2 px-4 text-gray-700 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-orange-500 transition duration-500 ease-in-out"
                                        />
                                    </div>
                                </div>

                                <div className="mb-6">
                                    <div className="flex items-center justify-between">
                                        <div>
                                            <label
                                                className="block text-gray-500 font-bold"
                                                for="remember"
                                            >
                                                <input
                                                    className="ml-2 leading-tight"
                                                    type="checkbox"
                                                    id="remember"
                                                    name="remember"
                                                />
                                                <span className="text-sm">
                                                    remember me
                                                </span>
                                            </label>
                                        </div>
                                        <div>
                                            <a
                                                className="font-bold text-sm text-orange-500 hover:text-orange-800"
                                                href="#password-request"
                                            >
                                                forgot password
                                            </a>
                                        </div>
                                    </div>
                                </div>

                                <div className="mb-4 text-center">
                                    <button
                                        className="transition duration-500 bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                                        type="submit"
                                    >
                                        Login
                                    </button>
                                </div>
                                <hr />
                                <div className="mt-8">
                                    <p className="text-sm">
                                        no account
                                        <a
                                            className="font-bold text-sm text-orange-500 hover:text-orange-800"
                                            href="#register"
                                        >
                                            sign up
                                        </a>
                                    </p>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

#javascript

Add space after every 4th element

const input = document.querySelector('input')
//Add space e.g 1234 5678 9012
input.innerHTML = input.value.replace(/\d{4}(?=.)/g, '$& ');

#javascript #html

Only allows letters to be typed on input

<input onkeydown="return /[a-z]/i.test(event.key)" >
  
//allow WHITE space as well
<input onkeydown="return /[a-z\s]/i.test(event.key)" >

#javascript

java ex chapter 2

public class HelloYou {
  public static void main(String[] args) {
    System.out.println("Hello Maria!");
    
  }
}
//.print keeps it on the same line 
public class HideAndSeek {
  public static void main(String[] args) {
    System.out.println("Let's play hide and seek.");
System.out.print("Three...");
System.out.print("Two...");
System.out.println("One...");
System.out.println("Ready or not, here I come!");

  }
}

#javascript

Remove Previously Commited file From GitHub History

git filter-branch --force --index-filter 'git rm --cached --ignore-unmatch <FILE_NAME>' --prune-empty --tag-name-filter cat -- --all

#javascript

2.1. Data Types

String staticVariable = "dog";
char charVariable = 'd';

#javascript ##gas

compare two spreadsheet and output the difference using google app scripts - Stack Overflow

function getNewData() {
  //deleting triggers
  var triggers = ScriptApp.getProjectTriggers();    
  for (var i = 0; i < triggers.length; i++) {
    if (triggers[i].getHandlerFunction()=='getNewData'){
      ScriptApp.deleteTrigger(triggers[i]);
    }
  }  
  //max running time = 5.5 min
  var MAX_RUNNING_TIME = 330000;
  var startTime= (new Date()).getTime();
  //get cache
  var cache = CacheService.getUserCache();
  var downloaded =JSON.parse(cache.get('downloaded'));  
  var compared =JSON.parse(cache.get('compared'));
  //start
  if (downloaded==1 && compared!=1){
    //folder
    var Folder = DriveApp.getFoldersByName('theFolder').next();
    var FolderId = licitacionesFolder.getId();
    //call old_spreadsheet
    var searchFor ="fullText contains 'sheet_old' and '" + FolderId + "' in parents";  
    var files = DriveApp.searchFiles(searchFor); 
    var old_file = files.next();  
    var old_spreadsheet = SpreadsheetApp.openById(old_file.getId());
    var old_sheet = old_spreadsheet.getSheets()[0];
    var old_array = old_sheet.getDataRange().getValues();
    //call spreadsheet
    var searchFor ="fullText contains 'sheet' and '" + FolderId + "' in parents";  
    var files = DriveApp.searchFiles(searchFor); 
    var file = files.next();  
    var spreadsheet = SpreadsheetApp.openById(old_file.getId());
    var sheet = spreadsheet.getSheets()[0];
    var array = sheet.getDataRange().getValues();
    Logger.log(array.length+'::'+old_array.length); 
    // Column
    var searchString = 'NAME';
    var RC = getColumn(array,searchString);    
    var Row = RC.Row;
    var Column = RC.Column;
    var RC = getColumn(old_array,searchString);    
    var Row_old = RC.Row;
    var Column_old = RC.Column;    
    Logger.log(Row_old+':::'+Column_old+'\n'+Row+':::'+Column);      
    //compare 
    var diff_index =JSON.parse(cache.get('diff_index'));
    var row_ind =JSON.parse(cache.get('row_ind'));  
    var Roww =JSON.parse(cache.get('Row'));  
    if (diff_index==null){var diff_index = [];}
    if (row_ind==null){var row_ind = 0;}
    if (Roww==null){var Roww = Row;}    
    Logger.log(row_ind+'\n'+Roww);    
    for (var i=Roww;i<array.length;i++){  
      var currTime = (new Date()).getTime();
      if(currTime - startTime >= MAX_RUNNING_TIME){
        Logger.log((currTime - startTime)/(1000*60));
        Logger.log(i+'::'+row_ind);
        cache.putAll({'diff_index': JSON.stringify(diff_index),'row_ind': JSON.stringify(row_ind),'Row': JSON.stringify(i-1)},21600);   
        ScriptApp.newTrigger('getNewData').timeBased().after(2 * 60 * 1000).create();
        return;
      } else {
        Logger.log(i);
        var existe = ArrayLib.indexOf(old_array, Column_old, array[i][Column]);
        if (existe==-1){      
          Logger.log(row_ind+'!!!');
          diff_index[row_ind]=i;
          row_ind++;          
        }
      }
    }    
    cache.putAll({'diff_index': JSON.stringify(diff_index),'Row': JSON.stringify(Row),'compared': JSON.stringify(1)},21600);
  } else {
    Logger.log('file not downloaded yet or already compared');
  }
}

function getColumn(array,searchString){
  for (var i = 0; i < array.length; i++) {    
    for (var j = 0; j < array[i].length; j++) {    
      if (array[i][j] == searchString) {
        var Row = i+1;
        var Column = j;
        break;
      }      
    }
    if (Row != undefined){
      break;
    }
  }
  return {Row: Row, Column: Column};
}

#javascript

Get siblings nodes

var siblings = n => [...n.parentElement.children].filter(c=>c!=n)

#javascript

javascript - React / JSX Dynamic Component Name - Stack Overflow

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
    photo: PhotoStory,
    video: VideoStory
};

function Story(props) {
    // Correct! JSX type can be a capitalized variable.
    const SpecificStory = components[props.storyType];
    return <SpecificStory story={props.story} />;
}

#javascript

Use Conditional Logic with If Statements

if (wasThatTrue) {
    return "Yes, that was true";
  }
  return "No, that was false";

#javascript

stand in line

function nextInLine(arr, item) {
  // Only change code below this line
  arr.push(item);
  const removed = arr.shift();
  return removed;
  return item;
  // Only change code above this line
}

// Setup
const testArr = [1, 2, 3, 4, 5];

// Display code
console.log("Before: " + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6));
console.log("After: " + JSON.stringify(testArr));

#javascript

Guide to Web Authentication

const credential = await navigator.credentials.get({
    publicKey: publicKeyCredentialRequestOptions
});

#javascript

Place objects along a path in After Effects

pos = linear(index,1,10,0,1);
thisComp.layer("Solid with Mask").mask("Mask 1").maskPath.pointOnPath(pos, t = time);

// ALTERNATIVA ANIMADA
thisComp.layer("Solid with Mask").mask("Mask 1").maskPath.pointOnPath(time/10);

#javascript

filtering duplicated items from array

// all items 
var arr = [
  {id: 'a1', value: 1}, 
  {id: 'a2', value: 2}, 
  {id: 'a3', value: 2}, 
  {id: 'b1', value: 1}, 
  {id: 'a1', value: 2},  
  {id: 'a2', value: 3}
]

var filtered = []

// We want mantain the duplicated item with highest value
arr.forEach( item => {
  const some = arr.find(x => {if (x.id === item.id && x.value > item.value && !duplicated.includes(x)) {return x}})
	 
	if (some) {
		duplicated.push(some)
	} else if (!duplicated.includes(item)) {
    duplicated.push(item)
  }
})

console.log(filtered)
// [
//   {id: 'a1', value: 2}, 
//   {id: 'a2', value: 3}, 
//   {id: 'a3', value: 2}, 
//   {id: 'b1', value: 1}
// ]

#javascript

Set the Values of Input type Date and Time using JavaScript | bobbyhadz

const [date, time] = formatDate(new Date()).split(' ');
console.log(date); // 👉️ 2021-12-31
console.log(time); // 👉️ 09:43

// ✅ Set Date input Value
const dateInput = document.getElementById('date');
dateInput.value = date;

// 👇️️ "2021-12-31"
console.log('dateInput value: ', dateInput.value);

// ✅ Set time input value
const timeInput = document.getElementById('time');
timeInput.value = time;

// 👇️ "09:43"
console.log('timeInput value: ', timeInput.value);

// ✅ Set datetime-local input value
const datetimeLocalInput = document.getElementById('datetime-local');
datetimeLocalInput.value = date + 'T' + time;

// 👇️ "2021-12-31T10:09"
console.log('dateTimeLocalInput value: ', datetimeLocalInput.value);

// 👇️👇️👇️ Format Date as yyyy-mm-dd hh:mm:ss
// 👇️ (Helper functions)
function padTo2Digits(num) {
  return num.toString().padStart(2, '0');
}

function formatDate(date) {
  return (
    [
      date.getFullYear(),
      padTo2Digits(date.getMonth() + 1),
      padTo2Digits(date.getDate()),
    ].join('-') +
    ' ' +
    [
      padTo2Digits(date.getHours()),
      padTo2Digits(date.getMinutes()),
      // padTo2Digits(date.getSeconds()),  // 👈️ can also add seconds
    ].join(':')
  );
}

// 👇️ 2022-07-22 08:50:39
console.log(formatDate(new Date()))

// 👇️ 2025-05-04 05:24
console.log(formatDate(new Date('May 04, 2025 05:24:07')))

#javascript

javascript - lodash check object properties has values - Stack Overflow

const profile = {
  name: 'John',
  age: ''
};

const emptyProfile = _.values(profile).every(_.isEmpty);

console.log(emptyProfile); // returns false

#javascript #jquery #html #css

Animation on scroll

/ CSS /
.reveal{position:relative;transform:translateX(200px);opacity:0;transition:1s all ease;}
.reveal.active{transform:translateX(0);opacity:1;}

/ JavaScript /

function reveal() {
  var reveals = document.querySelectorAll(".reveal");

  for (var i = 0; i < reveals.length; i++) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 150;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}

window.addEventListener("scroll", reveal);

#javascript #jquery #html #css

Magic Header

<div id="slide-out-widget-area" class="slide-out-from-right" style="padding-top: 71.4px; padding-bottom: 71.4px;">
            <div class="inner-wrap">
                <div class="inner">

                    <div class="off-canvas-menu">
                        <?php
                        wp_nav_menu( array (
                            'theme_location' => 'header',
                            'container'      => '',
                            'menu_class'     => 'menu',
                        ) );
                        ?>
                    </div>
                </div>
            </div>
            <div id="slide-out-widget-area-bg" class="slide-out-from-right solid material-open"></div>
            <!-- <div class="close-btn">
                <span class="close-wrap">
                    <span class="close-line close-line1"></span>
                    <span class="close-line close-line2"></span> 
                </span>
            </div> -->
        </div>
        <div class="occu-health-wrapper">
            <div id="top"><a class="menulinks"><i></i></a></div>
		</div>
                                    
       <style>
		@media (max-width:767px){
    header#header {padding: 20px 0 0;background: transparent;}
    .header-top {border-bottom: none;}
    .head-wrapper {height: 98px;}
    .head-wrapper.fixed-header a.menulinks {top: 30px;right: 20px;}
    .head-wrapper.fixed-header ul.mainmenu {top: 98px;left: 0;width: 100%;}
    .logo-col {flex: 0 0 110px;}
    .head-btn-col {flex: 0 0 calc(100% - 150px);justify-content: flex-end;padding-right: 0px;padding-left: 0;}
    .mobile-open div#slide-out-widget-area {min-width: 78vw;width: 78vw;margin: 0 0 0 auto;padding-left: 50px;padding-right: 50px;display: block;}
    .mobile-open .inner-wrap{position:absolute;top:50%;transform:translate(-50%,-50%);left: 70%;display:flex;align-items:center;justify-content:center;}
    .off-canvas-menu .menu{display:flex;flex-direction:column;justify-content:center;align-items:center;width:200px;margin-bottom:10px;}
    .inner-wrap .off-canvas-menu .nav-btns{display:flex;flex-direction:column;align-items:center;justify-content:center;}
    .mobile-open div#slide-out-widget-area-bg{background:var(--primary-color);opacity:1;height:100vh;width:100vw;z-index:-1;position:absolute;top:0;left:0;}
    .mobile-open .occu-health-wrapper{transform:scale(0.84) translateX(-93vw) translateZ(0)!important;position:absolute;top:0;left:40%;height:100vh;overflow:hidden;transition:transform 0.5s;width:100%;}
    div#top .menulinks{display:none;justify-content:end;height:50px;z-index:99;width:100%;}
    .mobile-open div#top .menulinks {display: flex;}
    div#slide-out-widget-area {display: none;}
    .occu-health-wrapper{transition:transform 0.5s;top:auto;height:100vh;}
    .mobile-open .occu-health-wrapper{transform:scale(0.84) translateX(-93vw) translateZ(0)!important;position:absolute;top:0;left:40%;height:100vh;overflow:hidden;transition:transform 0.5s;width:100%;}
    .mobile-open .occu-health-wrapper {left: 25%;}
    .mobile-open div#top{padding:10px 0;background:white;display:flex;justify-content:end;height:inherit;}
    ul#menu-header-menu li > a{color:var(--white);}
    ul#menu-header-menu {list-style: none;padding: 0;}
    .off-canvas-menu{width:200px;}
    .off-canvas-menu .btn-wrapper{display:flex;align-items:center;justify-content:flex-start;margin-top:10px;}
    .off-canvas-menu a.btn{display:inline-flex;padding:10px;width:50px;height:50px;background:var(--white);margin-right:10px;}
    .off-canvas-menu a.btn svg{color:var(--primary-color);width:30px;height:30px;}
    .off-canvas-menu a.btn:last-child{margin:0;}
    .off-canvas-menu ul#menu-header-menu li{margin-bottom:10px;width: 100%;}

/*Nav*/
    .menulinks{display:block;top:30px;right:20px;z-index:999999;}
    .mobile-open a.menulinks {display: none;}
    ul.mainmenu{text-align:left;position:absolute;top:98px;padding:0;right:0;width:100%;background:#000;display:none !important;z-index:9999999;}
    ul.mainmenu>li>a:after{content:none;}
    ul.mainmenu>li>a:hover:after{content:none;}
    ul.mainmenu>li{float:left;width:100%;padding:0px;margin:0;border-top:1px solid rgba(255,255,255,0.2);position:relative;}
    ul.mainmenu>li:first-child{border:none;}
    ul.mainmenu>li>a:link,ul.mainmenu>li>a:visited{padding:10px 15px;font-size:16px;float:left;width:100%;border:none;text-align:left;color:#fff;}
    ul.mainmenu>li>a:hover{background:rgba(255,255,255,0.2);}
    a.menulinks i{display:inline;position:relative;top: 0;right: 0;margin-left:0;-webkit-transition-duration:0s;-webkit-transition-delay:.2s;-moz-transition-duration:0s;-moz-transition-delay:.2s;transition-duration:0s;transition-delay:.2s;}
    a.menulinks i:before,a.menulinks i:after{position:absolute;content:'';left:0;}
    a.menulinks i,a.menulinks i:before,a.menulinks i:after{width:35px;height:4px;background-color:#000;display:inline-block;}
    a.menulinks i:before{transform: translateY(-10px);-webkit-transition-property:margin,-webkit-transform;-webkit-transition-duration:.2s;-webkit-transition-delay:.2s,0;}
    a.menulinks i:after{transform: translateY(10px);-webkit-transition-property:margin,-webkit-transform;-webkit-transition-duration:.2s;-webkit-transition-delay:.2s,0;}
    .mobile-open a.menulinks i{background-color:rgba(0,0,0,0.0);-webkit-transition-delay:.2s;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0);box-shadow:0px 1px 1px rgba(0,0,0,0);}
    .mobile-open a.menulinks i:before{margin-top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition-delay:0,.2s;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0);box-shadow:0px 1px 1px rgba(0,0,0,0);}
    .mobile-open a.menulinks i:after{margin-top:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition-delay:0,.2s;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0);box-shadow:0px 1px 1px rgba(0,0,0,0);}
    ul.mainmenu>li>a.current:after{display:none;}
    ul.mainmenu ul{position:relative;top:auto;left:auto;float:left;width:100%;}
    ul.mainmenu ul li{position:relative;}
    ul.mainmenu ul li a{padding:8px 15px 8px 25px;color:#fff;}
    a.child-triggerm{display:block!important;cursor:pointer;position:absolute!important;top:0px;right:0px;width:50px!important;min-width:50px!important;height:38px!important;padding:0!important;border-left:1px dotted rgba(255,255,255,.20);}
    a.child-triggerm:hover{text-decoration:none;color:#f00;}
    a.child-triggerm span{position:relative;top:50%;margin:0 auto!important;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;}
    a.child-triggerm span:after{position:absolute;content:'';}
    a.child-triggerm span,a.child-triggerm span:after{width:10px;height:1px;background-color:#fff;display:block;}
    a.child-triggerm span:after{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;}
    a.child-triggerm.child-open span:after{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;}
    a.child-triggerm.child-open span{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;}
    a.child-triggerm:hover span,a.child-triggerm:hover span:after{background-color:#f00;}
    .logo-col a > img {max-width: 110px;height: 70px;object-fit: contain;}
    .head-btn-col a.btn:last-of-type {margin-right: 0;display: none;}
    .contact-col ul, .keep-col ul {margin: 0 0 0 15px;}
    .footer-logo-col {width: 100%;}
}

@media (max-width: 567px) {
    .head-btn-col {flex: 0 0 calc(100% - 110px);justify-content: end;padding-right: 38px;padding-left: 5px;}
    .head-btn-col .btn {width: 40px;height: 40px;margin-right: 5px;}
    ul.mainmenu {top: 143px;display: none !important;}
    .head-wrapper.fixed-header ul.mainmenu {top: 144px;}
    .services-col {margin-bottom: 15px;margin-top: 15px;}
    .contact-col {margin-bottom: 15px;display: flex;flex-direction: column;align-items: center;width: 100%;}
    .footer .services-col .footer-links ul {text-align: center;margin: 0;}
    .contact-col ul, .keep-col ul {margin: 0 0 0px 0;text-align: center;}
    .keep-col {width: 100%;}
    .footer .services-col span, .footer .contact-col span, .footer .keep-col span {padding-left: 0;padding-bottom: 15px;font-size: 22px;justify-content: center;}
    .footer .row {justify-content: center;}
    .footer-logo-col {width: 100%;text-align: center;}
    .contact-col ul, .keep-col ul {margin: 0 0 0 0;}
    .logo-col a > img {max-width: 90px;}
    .mobile-open .inner-wrap {left: 75%;}
    .head-wrapper.fixed-header a.menulinks{top:30px;right:10px;}
}

@media (max-width: 350px) {
    .logo-col{flex:0 0 90px;}
    .head-btn-col {flex: 0 0 calc(100% - 90px);padding-right: 28px;}
    .menulinks{top:30px;right:20px;}
    .head-wrapper.fixed-header a.menulinks{top:30px;right:5px;}
}
	</style>
                                                      
<script>
      jQuery(document).ready(function (jQuery) {
    jQuery('.mainmenu li:has(ul)').addClass('parent');
    jQuery('.mainmenu').before('<a class="menulinks"><i></i></a>');
    jQuery('a.menulinks').click(function () {
        jQuery(this).next('ul').slideToggle(250);
        jQuery('body').toggleClass('mobile-open');
        jQuery('.mainmenu li.parent ul').slideUp(250);
        jQuery('a.child-triggerm').removeClass('child-open');
        return false;
    });
    jQuery('.mainmenu li.parent > ul').before('<a class="child-triggerm"><span></span></a>');
    jQuery('.mainmenu a.child-triggerm').click(function () {
        jQuery(this).parent().siblings('li').find('a.child-triggerm').removeClass('child-open');
        jQuery(this).parent().siblings('li').find('ul').slideUp(250);
        jQuery(this).next('ul').slideToggle(250);
        jQuery(this).toggleClass('child-open');
        return false;
    });</script>

#javascript

File upload using the Fetch API

const form = document.getElementById('form');
 
form.addEventListener('submit', function(event) {

  event.preventDefault();
 
  const uploadElement = document.getElementById('file'); // Select file input element
  const file = uploadElement.files[0]; // Selects file at position 0 (for single file)
 
  const payload = new FormData(); // Sending in FormData object will set headers
  payload.append('CV', file, 'CV.pdf'); // Appends file to FormData object
 
  fetch('https://httpbin.org/post', { // Endpoint is a test API
    method: "POST", // or "PUT"
    body: payload,
  })
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.log(err))
});

#javascript

Makes a POST or PUT request using the Fetch API

fetch('https://reqres.in/api/users', { // Endpoint is a test API
    method: "POST", // or "PUT"
    headers: {
        'Content-type': 'application/json'
    },
    body: JSON.stringify(
        { name: "Captain Anonymous"}
    )
});

#javascript

Creates a typewriter text effect

const txt = `Watch me as I get typed out before your very eyes using JavaScript's setInterval() function.`;
const outputEl = document.getElementById('target-element');
const speed = 50;

// Keeps track of character being typed:
let i = 0;

// Types a new character every 50 milliseconds to outputEl
const timerId = setInterval(() => {
    outputEl.innerHTML += txt.charAt(i);
    i++;
    if (i === txt.length) {
      clearInterval(timerId);
    }
  },speed);

#javascript #nodejs

OkKU_FIXED DESK

select 
	wr.start_datetime,
	wr.end_datetime,
	wr.object_id,
	wr.reserved_by_user,
	wr.reserved_for_user,
	wr.reservation_hash,
	wo.object_name as objectName,
	wo.object_type as objectType
from wmt_reservations wr

left join wmt_objects wo 
	on wr.object_id = wo.object_id and wr.org = wo.org and wr.org_path = wo.org_path

left join wmt_reservation_guests wrg 
	on wrg.reservation_id = wr.id

where wr.org = 'okku' and wr.org_path = '/demo' and wr.cancelled_at is null and wr.visible_to_others is true
UNION all
select DISTINCT on
	(wo2.regular_user)
	wr2.start_datetime,
	wr2.end_datetime,
	wr2.object_id,
	wr2.reserved_by_user,
	wr2.reserved_for_user,
	wr2.reservation_hash,
	wo2.object_name as objectName,
	wo2.object_type as objectType
from wmt_objects wo2

left join wmt_reservations wr2
	on wr2.org = wo2.org and wr2.org_path = wo2.org_path 
where wo2.regular_user is not null

#javascript

javascript - JS Proxy & destructuring assignment - Stack Overflow

const
    myProxy = new Proxy({}, {
        get: function(obj, prop) {
            return 42;
        }
    }),
    { value } = myProxy;

console.log(myProxy.value);
console.log(value);

#javascript

Determining if all attributes on a javascript object are null or an empty string - Stack Overflow

Object.values(object).every(value => !!value);

#javascript #nodejs

Redis Configuration

const redisClient = require('redis')
const logger = require('../services/Logger')

const ENV = process.env.ENV ? process.env.ENV : 'DEV'

class Redis {
    constructor() {
        this.client = redisClient.createClient({
            url: process.env.REDIS_URL
        })

        // create connection
        this.client.connect()
        logger.info(`Redis connection opened`)
        // get some connection diagnostics
        this.client
            .sendCommand(['CLIENT', 'LIST'])
            .then(list => {
                const clients = list.split('\n')
                logger.info(
                    `Redis client count: ${
                        clients.filter(x => x?.length > 0).length
                    }`
                )
            })
            .catch(err => logger.error(err))
    }

    /**
     * Stores key value pair in redis
     * @param {String} key
     * @param {String} value JSON stringified value
     */
    async put(key, value, ttl) {
        const options = {}
        if (ttl) {
            options.EX = ttl
        }
        await this.client.set(
            `${ENV}:${key}`,
            JSON.stringify(value),
            options
        )
    }

    /**
     * Get redis data by key
     * @param {String} key
     * @returns
     */
    async get(key) {
        // logger.info(`getting redis key: ${ENV}:${key}`)
        let data = await this.client.get(`${ENV}:${key}`)

        data = data ? JSON.parse(data) : undefined
        if (data && Object.keys(data).length === 0) data = undefined

        if (!data) {
            logger.info(`Redis cache miss on key ${ENV}:${key}`)
        }
        return data
    }

    /**
     * Remove cache entry
     * @param {String} key
     */
    async clear(key) {
        await this.client.del(`${ENV}:${key}`)
        logger.info(`Redis key: ${key} deleted`)
    }

    /**
     * Delete keys in wild card fashion
     * @param {String} pattern Example: h?llo, h*llo
     */
    async deleteKeysViaWildCardPattern(pattern) {
        logger.info(`Deleting redis keys for pattern: ${pattern}`)
        let cursorIndex = '0'
        let running = true
        do {
            const { cursor, keys } = await this.client.scan(
                cursorIndex,
                {
                    MATCH: `${ENV}:${pattern}`
                }
            )
            logger.info(`Deleting redis keys: ${keys}`)
            // Delete redis key
            keys.forEach(async key => {
                await this.client.del(`${key}`)
                logger.info(`Redis key: ${key} deleted`)
            })

            // update cursor
            cursorIndex = cursor

            // loop control variable
            if (!cursor) running = false
        } while (running)
    }

    /**
     * Set expiry time of the key in milliseconds
     * @param {*} key
     * @param {*} expiryTime
     */
    async setKeyExpireTime(key, expiryTime) {
        await this.client.expire(`${ENV}:${key}`, expiryTime)
    }

    async quit() {
        await this.client?.quit()
    }
}

module.exports = new Redis()

#javascript

COINSS: React Custom Hooks로 Scroll Event 구현하기

import { useState, useEffect } from "react";

export function useScroll() {
  const [lastScrollTop, setLastScrollTop] = useState(0);
  const [bodyOffset, setBodyOffset] = useState(
    document.body.getBoundingClientRect()
  );
  const [scrollY, setScrollY] = useState(bodyOffset.top);
  const [scrollX, setScrollX] = useState(bodyOffset.left);
  const [scrollDirection, setScrollDirection] = useState();

  const listener = e => {
    setBodyOffset(document.body.getBoundingClientRect());
    setScrollY(-bodyOffset.top);
    setScrollX(bodyOffset.left);
    setScrollDirection(lastScrollTop > -bodyOffset.top ? "down" : "up");
    setLastScrollTop(-bodyOffset.top);
  };

  useEffect(() => {
    window.addEventListener("scroll", listener);
    return () => {
      window.removeEventListener("scroll", listener);
    };
  });

  return {
    scrollY,
    scrollX,
    scrollDirection
  };
}

#javascript

React Custom Hooks로 scroll animation 만들기 FadeIn편 | 수줍은 동그래 블로그

const useScrollFadeIn = () => {
  const dom = useRef();
  
  const handleScroll = useCallback(([entry]) => {
      const { current } = dom;
    	
    	if(entry.isIntersecting) {
        // 원하는 이벤트를 추가 할 것
      }
    }, []);
  
  useEffect(() => {
    let observer;
    const { current } = dom;
    
    if (current) {
      observer = new IntersectionObserver(handleScroll, { threshold: 0.7 });
      observer.observe(current);
      
      return () => observer && observer.disconnect();
    };
  }, [handleScroll]);
  
    return {
    ref: dom,
  };
}

#javascript

Header를 스크롤에 따라 반응시키기

// 스크롤이 내려가고 올라오는지 확인해주는 핸들러
  const handleScroll = useCallback(
    (e) => {
      // 현재위치와 이전 위치의 차를 계산한다.
      const diff = e.target.scrollTop - prevY
      if (diff > 0) {
        console.log('내려가는중')
        // 헤더를 보여줄지 말지 set
        setIsHeaderShow(false)
      } else if (diff < 0) {
        console.log('올라가는중')
        setIsHeaderShow(true)
      }
      setPrevY(e.target.scrollTop)
    },
    [prevY]
  )
// 스크롤이 멈췄는지 확인해주는 핸들러
  const stopScroll = useCallback((e) => {
    console.log('🥎🥎🥎멈춤', e.target.scrollTop)
    // 스크롤이 가장 끝까지 올라가면 헤더보임.
    // 스크롤이 멈추면 헤더안보임
    if (e.target.scrollTop === 0) {
      setIsHeaderShow(true)
    } else {
      setIsHeaderShow(false)
    }
  }, [])
  // 스크롤의 위 아래 이동감지는 쓰로틀이 이용
  const throttleScroll = useThrottle(handleScroll, 300)
  // 스크롤의 멈춤은 디바운스를 이용한다.(디바운스가 마지막 그룹의 이벤트를 노티해준다는 특성이용)
  const debounceScroll = useDebounce(stopScroll, 1500)
  const scrollDetectHandler = useCallback(
    (...e) => {
      throttleScroll(...e)
      debounceScroll(...e)
    },
    [prevY]
  )
  // DOM 제어시 useLayoutEffect를 사용하는게 성능상 좋음.
  useLayoutEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.addEventListener('scroll', scrollDetectHandler)
    }
    return () => {
      if (!scrollRef.current) return
      scrollRef.current.removeEventListener('scroll', scrollDetectHandler)
    }
  }, [prevY])

#javascript

Elegant way to find contiguous subarray within an array in JavaScript? - Stack Overflow

function find_csa(arr, subarr, from_index) {
    var i = from_index >>> 0,
        sl = subarr.length,
        l = arr.length + 1 - sl;

    loop: for (; i<l; i++) {
        for (var j=0; j<sl; j++)
            if (arr[i+j] !== subarr[j])
                continue loop;
        return i;
    }
    return -1;
}

#javascript

Introduction to events - Learn web development | MDN

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

#javascript

Explain the useState() Hook The useState Hook is a store that enables the use of state variables in functional components. You can pass the initial state to this function, and it will return a variable containing the current state value (not necessarily the initial state) and another function to update this value.

import React, { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      // ...
    </div>
  );
}

#javascript

Explain the useEffect() Hook The useEffect Hook allows you to perform side effects in your components like data fetching, direct DOM updates, timers like setTimeout(), and much more. This hook accepts two arguments: the callback and the dependencies, which allow you to control when the side effect is executed. Note: The second argument is optional

import React, {useState, useEffect} from 'react';

const App = () => {
  const [loading, setLoading] = useState(false);
  
  useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);
  
  return(
    <div>
      // ...
    </div>
  )
}

export default App;

#javascript

What Is the useRefs Hook?

import React, {useEffect, useRef} from 'react';

const App = () => {
  const inputRef = useRef(null)
  
  useEffect(()=>{
    inputElRef.current.focus()
  }, [])
  
  return(
    <div>
      <input type="text" ref={inputRef} />
    </div>
  )
}

export default App;

#javascript

What's the Use of the useMemo() Hook

const result = useMemo(() => expensivesunction(input), [input]);

#javascript

[Solved]-How do I retrieve select option data-attribute value in ReactJS?-Reactjs

event.target[event.target.selectedIndex].getAttribute('data-order')

#javascript

Get object key by value

function getObjectKeyByValue ( obj value ){
	return Object.keys(obj).find(key => obj[key] === value)
}

const myObject = {
  "key1" : "value 1",
  "key2" : "value 2"
}

const myKey = getObjectKeyByValue ( myObject , "value 2")

console.log ( myKey )
//print key2

#javascript

28.6. Compiling TypeScript

#javascript

28.5.1. Classes

class Astronaut {
   name: string;
   constructor(firstName: string, lastName: string) {
      this.name = firstName + " " + lastName;
   }
   greet() {
      return "Hello, " + this.name;
   }
}

let Bob = new Astronaut("Bob","Smith");
//
//You may remember the this and new keywords from working with classes in JavaScript. Earlier in the chapter, we also noted that when declaring variables in TypeScript, we have to specify the type of value. The same applies to function parameters, as you can see in the constructor.

class Panthera {
   roar: string;
   constructor(currentRoar: string) {
      this.roar = currentRoar;
   }
}

class Tiger extends Panthera {
   stripes: boolean = true;

}

let tigger = new Tiger("loud");
console.log(tigger.roar);
console.log(tigger.stripes);

#javascript

28.4. Functions in TypeScript

     function myFunction(a: number, b?:number): number {
             if (typeof b !== 'undefined'){
                     return a+b+5;
                  } else {
                          return a+5;
                  }
          }

console.log(myFunction(1,2));
console.log(myFunction(1));
console.log(myFunction(3,5));
console.log(myFunction(3));
8
6
13
8

#javascript

28.3. Arrays in TypeScript

//Arrays in TypeScript must contain values of the same type. When declaring an array, the type needs to be declared.
let arrayName: number[] = [10,9,8];
//What if the array needs to hold values of different types? Now, we need a tuple. A tuple is a special structure in TypeScript that can hold as many values as needed of different types.

let tupleName: [number, string, number];

tupleName = [10, "9", 8];


// JS=let cargoHold = ['oxygen tanks', 'space suits', 'parrot', 'instruction manual', 'meal packs', 'slinky', 'security blanket'];

let cargoHold: string[] = ['oxygen tanks', 'space suits', 'parrot', 'instruction manual', 'meal packs', 'slinky', 'security blanket'];

//JS=
let element1 = ['hydrogen', 'H', 1.008];
let element2 = ['helium', 'He', 4.003];
let element26 = ['iron', 'Fe', 55.85];

//TS=
let element1: [string, string, number];
element1 = ['hydrogen', 'H', 1.008];

let element2: [string, string, number];
element2 = ['helium', 'He', 4.003];

let element26: [string, string, number];
element26 = ['iron', 'Fe', 55.85];

#javascript

28.2. Declaring and Using Variables

// In JavaScript, we have:

let spaceShuttleName = "Determination";
let shuttleSpeed = 17500;
let distancetoMars = 225000000;
let distancetoMoon = 384400;
let milesperKilometer = 0.621;

// The same declarations in TypeScript would be:

let spaceShuttleName: string = "Determination";
let shuttleSpeed: number = 17500;
let distancetoMars: number = 225000000;
let distancetoMoon: number = 384400;
let milesperKilometer: number = 0.621;

#javascript

convert json to csv

const items = json
const replacer = (key, value) => value === null ? '' : value 
const header = Object.keys(items[0])
const csv = [
  header.join(','), // header row first
  ...items.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','))
].join('\r\n')

console.log(csv)

#javascript

teste get user orders

$.ajax({
  type: "GET",
  url: "/ccstoreui/v1/orders?fields=orderId,",
  dataType: 'json',
  headers: {
    "Authorization": "Bearer " + ccRestClient.tokenSecret
  },
  success: function (){
      console.log('success')
  }
}, function (reponse){
    console.log(response)
});

#js #javascript #htm

Find overflow in a page

(function (d) {
    var w = d.documentElement.offsetWidth,
        t = d.createTreeWalker(d.body, NodeFilter.SHOW_ELEMENT),
        b;
    while (t.nextNode()) {
        b = t.currentNode.getBoundingClientRect();
        if (b.right > w || b.left < 0) {
            t.currentNode.style.setProperty('outline', '1px dotted red', 'important');
            console.log(t.currentNode);
        }
    };
}(document));

#javascript

27.1. Fetching Data

<html>
   <head>
      <title>Launch Status</title>
      <script>
         window.addEventListener("load", function() {
            fetch("https://handlers.education.launchcode.org/static/weather.json").then( function(response) {
               response.json().then( function(json) {
                  const div = document.getElementById("weather-conditions");
                  // Add HTML that includes the JSON data
                  div.innerHTML = `
                     <ul>
                        <li>Temp ${json.temp}</li>
                        <li>Wind Speed ${json.windSpeed}</li>
                        <li>Status ${json.status}</li>
                        <li>Chance of Precip ${json.chanceOfPrecipitation}</li>
                     </ul>
                  `;
               });
            });
         });
      </script>
   </head>
   <body>
      <h1>Launch Status</h1>
      <h3>Weather Conditions</h3>
      <div id="weather-conditions">
         <!-- Weather data is added here dynamically. -->
      </div>
   </body>
</html>

#javascript

index.js

const PORT = 8000
const axios = require('axios')
const cheerio = require('cheerio')
const express = require('express')

const app = express()

const url = 'https://www.theguardian.com/us'

axios(url)
    .then(response => {
       const html = response.data 
       const $ = cheerio.load(html)
       const articles = [

       ]
       $('.fc-item__title', html).each(function() {
        const title = $(this).text()
        const url = $(this).find('a').attr('href')
        articles.push({
           title,
           url 
        }) 

    })
    console.log(articles)
}).catch(err => console.log(err) )

app.listen(PORT, () => console.log('server running on PORT 8000'))

#javascript

package.json

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.27.2",
    "cheerio": "^1.0.0-rc.12",
    "express": "^4.18.1",
    "nodemon": "^2.0.19",
    "npx": "^10.2.2"
  }
}

#javascript #bash

Javascript/NodeJS: Uglify js files

$ uglifyjs file1.js file2.js ... --compress --mangle --output out.min.js

#javascript

Javascript/in Browser: Jump to anchor

function jump(hashString){
    var url = location.href;                //Save the URL without hash part.
    location.href = "#" + hashString;       //Jump to target anchor (by id).
    history.replaceState(null,null,url);    //If you don't like hashes restore url.
}

#javascript

25.9. Validation with JavaScript

<script>
   window.addEventListener("load", function() {
      let form = document.querySelector("form");
      form.addEventListener("submit", function(event) {
         let usernameInput = document.querySelector("input[name=username]");
         let teamName = document.querySelector("input[name=team]");
         if (usernameInput.value === "" || teamName.value === "") {
            alert("All fields are required!");
            // stop the form submission
            event.preventDefault();
         }
      });
   });
</script>

#javascript

25.8. Select Input

<form action="https://handlers.education.launchcode.org/request-parrot" method="post">
   <label>Operation Code:
   <!-- includes empty value "Select One" option -->
   <select name="operation">
      <option value="">* Select One *</option>
      <option value="1">Simulation</option>
      <option value="2">Rocket Test</option>
      <option value="3">Crew Related</option>
   </select>
   </label>

   <label>Facility:
   <select name="facility">
      <option value="johnson">Johnson Space Center, TX</option>
      <option value="kennedy">Kennedy Space Center, FL</option>
      <option value="white-sands">White Sands Test Facility, NM</option>
   </select>
   </label>
   <button>Send Report</button>
</form>

#javascript

25.7. Radio Input

<form action="https://handlers.education.launchcode.org/request-parrot" method="post">
   Flight Rating:
   <label>Rough<input type="radio" name="flightRating" value="rough"/></label>
   <label>Few Bumps<input type="radio" name="flightRating" value="fewBumps"/></label>
   <label>Smooth<input type="radio" name="flightRating" value="smooth"/></label>
   <button>Send Report</button>
</form>

#javascript

Checkbox Input

<div>Activities</div>
<label>cooking<input type="checkbox" name="cooking"/></label>
<label>running<input type="checkbox" name="running"/></label>
<label>movies<input type="checkbox" name="movies"/></label>

//Multiple checkbox inputs with the SAME name attribute.

<div>Ingredients</div>
<label>Onion<input type="checkbox" name="ingredient" value="onion"/></label>
<label>Butter<input type="checkbox" name="ingredient" value="butter"/></label>
<label>Rice<input type="checkbox" name="ingredient" value="rice"/></label>

#javascript

Specialized Text Inputs

<form action="https://handlers.education.launchcode.org/request-parrot" method="post">
  <label>Email<input type="email" name="emailAddress"/></label>
  <label>Report Date<input type="date" name="reportDate"/></label>
  <label>Crew Count<input type="number"
  name="crewCount" min="1" max="10"/></label>
  <button>Send Report</button>
</form>

#javascript

text inputs

<form action="https://handlers.education.launchcode.org/request-parrot" method="post">
   <label>Code Name<input type="text" name="codeName"/></label>
   <label>Code Word<input type="password" name="codeWord"/></label>

   <!-- textarea must have open and closing tags -->
   <label>Mission Description<br/>
      <textarea name="description" rows="5" cols="75"></textarea>
   </label>

   <button>Send Report</button>
</form>

#javascript

25.3. POST Form Submission

<form action="" method="POST">
   <label>Username <input type="text" name="username"></label>
   <label>Team Name <input type="text" name="team"></label>
   <button>Submit</button>
</form>

#javascript

Form Submission 25.2

<form>
   <label>Username <input type="text" name="username"></label>
   <!-- clicking either of these will cause a form submission -->
   <input type="submit"/>
   <button>Submit</button>
</form>

#javascript

Forms 25.1

<html>
   <head>
      <title>Form Example</title>
   </head>
   <body>
      <form>
         <label>Username <input type="text" name="username"/></label>
         <label>Team Name <input type="text" name="team" value="JavaScript"/></label>
      </form>
   </body>
</html>

#javascript

Add Click Interactivity

let element = document.querySelector('button');

function turnButtonRed(){
  element.style.backgroundColor = 'red';
  element.style.color = 'white';
  element.innerHTML = 'Red Button';
}

element.onclick = turnButtonRed;

#javascript

Remove an Element

let elementToRemove = document.getElementById('vespa');
document.getElementById('italy-attractions').removeChild(elementToRemove);

<!DOCTYPE html>
<html>

<head>
  <title>Vacation World</title>
  <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
 <img src="https://content.codecademy.com/courses/freelance-1/unit-2/explorer.jpeg" />
 <h1 class="title cursive capitalize" >Vacationing in Florence, Italy</h1>
 <h5>By: Ezio Auditore</h5>
 <h6 class="publish-time">Published: 2 Days Ago</h6>
 
 <p>Florence is full of fascinating places. Planning the perfect experience 'Di Firenze' involves researching reputable travel blogs, choosing the best season to travel, and being open to all that Florence has to offer.</p>
 <h2 class="destination">Florence's History</h2>
 <div class="description">A city-size shrine to the Renaissance, Florence offers frescoes, sculptures, churches, palaces, and other monuments from the richest cultural flowering the world has known. Names from its dazzling historical pastDante, Michelangelo, Galileo, Machiavelliare some of the most resonant of the medieval age. <a href="http://travel.nationalgeographic.com/travel/city-guides/florence-italy/" target="_blank">Learn More</a>.
   <h5>Top Attractions</h5>
   <ul id="italy-attractions">
     <li>Museums</li>
     <li>Bike Tours</li>
     <li>Historical Monuments</li>
     <li id="vespa">Rent a Vespa</li>
   </ul>
 </div>
</body>
  <script src="./main.js"></script>
</html>

#javascript

Remove an Element

let elementToRemove = document.getElementById('vespa');
document.getElementById('italy-attractions').removeChild(elementToRemove);

#javascript

Add Click Interactivity

let element = document.querySelector('button');

function turnButtonRed(){
  element.style.backgroundColor = 'red';
  element.style.color = 'white';
  element.innerHTML = 'Red Button';
}

element.onclick = turnButtonRed;

#javascript

Remove an Element

let elementToRemove = document.getElementById('vespa');
document.getElementById('italy-attractions').removeChild(elementToRemove);


<!DOCTYPE html>
<html>

<head>
  <title>Vacation World</title>
  <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
 <img src="https://content.codecademy.com/courses/freelance-1/unit-2/explorer.jpeg" />
 <h1 class="title cursive capitalize" >Vacationing in Florence, Italy</h1>
 <h5>By: Ezio Auditore</h5>
 <h6 class="publish-time">Published: 2 Days Ago</h6>
 
 <p>Florence is full of fascinating places. Planning the perfect experience 'Di Firenze' involves researching reputable travel blogs, choosing the best season to travel, and being open to all that Florence has to offer.</p>
 <h2 class="destination">Florence's History</h2>
 <div class="description">A city-size shrine to the Renaissance, Florence offers frescoes, sculptures, churches, palaces, and other monuments from the richest cultural flowering the world has known. Names from its dazzling historical pastDante, Michelangelo, Galileo, Machiavelliare some of the most resonant of the medieval age. <a href="http://travel.nationalgeographic.com/travel/city-guides/florence-italy/" target="_blank">Learn More</a>.
   <h5>Top Attractions</h5>
   <ul id="italy-attractions">
     <li>Museums</li>
     <li>Bike Tours</li>
     <li>Historical Monuments</li>
     <li id="vespa">Rent a Vespa</li>
   </ul>
 </div>
</body>
  <script src="./main.js"></script>
</html>

#javascript

Create and Insert Elements

let newAttraction = document.createElement('li');

newAttraction.id = 'vespa';
newAttraction.innerHTML = 'Rent a Vespa';

document.getElementById('italy-attractions').appendChild(newAttraction);

#javascript

Create and Insert Elements

let newAttraction = document.createElement('li');

newAttraction.id = 'vespa';
newAttraction.innerHTML = 'Rent a Vespa';

document.getElementById('italy-attractions').appendChild(newAttraction);

#javascript

Create and Insert Elements

let newAttraction = document.createElement('li');

newAttraction.id = 'vespa';
newAttraction.innerHTML = 'Rent a Vespa';

document.getElementById('italy-attractions').appendChild(newAttraction);

#javascript

Create and Insert Elements

let newAttraction = document.createElement('li');

newAttraction.id = 'vespa';
newAttraction.innerHTML = 'Rent a Vespa';

document.getElementById('italy-attractions').appendChild(newAttraction);

#javascript

Create and Insert Elements

let newAttraction = document.createElement('li');

newAttraction.id = 'vespa';
newAttraction.innerHTML = 'Rent a Vespa';

document.getElementById('italy-attractions').appendChild(newAttraction);

#javascript

Create and Insert Elements

let newAttraction = document.createElement('li');

newAttraction.id = 'vespa';
newAttraction.innerHTML = 'Rent a Vespa';

document.getElementById('italy-attractions').appendChild(newAttraction);

#javascript

Traversing the DOM

const first = document.body.children[0];
first.innerHTML = 'BROWN BEARS ARE AWESOME!';

first.parentNode.style.backgroundColor = 'beige';

#javascript

Style an Element

document.body.style.backgroundColor = '#201F2E';

document.querySelector('.heading').style.fontFamily = 'Roboto'

#javascript

Select and Modify Elements

document.querySelector('h1').innerHTML = 'Most popular Harry Potter characters';

document.getElementById('fourth').innerHTML = 'Professor Snape';

document.getElementsByClassName('slytherin')[0].innerHTML = 'Salazar Slytherin';

document.getElementsByTagName('li')[0].innerHTML = 'Dobby';

<html> 
 <head>
   <title>Popular Fantasy Searches</title>
 </head>
 
 <body>
   <h1 class="ranking">Top 5 Best Selling Costumes</h1>
   <ol>
     <li id="first">Harry Potter</li>
     <li id="second">Hermione Granger</li>
     <li class="slytherin" id="third">Lord Voldemort</li>
     <li class="slytherin" id="fourth">Draco Malfoy</li>
     <li id="fifth">Hagrid</li>
   </ol>
  
 </body>
 <script src="./main.js"></script>
</html>

#javascript

Tweak an Element

document.body.innerHTML = '<h1>This is now the heading of the body element</h1>'

#javascript

Javascript: Fetch POST JSON

(async () => {
  const rawResponse = await fetch('https://httpbin.org/post', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({a: 1, b: 'Textual content'})
  });
  const content = await rawResponse.json();

  console.log(content);
})();

#javascript

Javascript: Submit JSON object from form values

function getObjectFromForm(formSelector) {
    document.querySelector(formSelector)
    .addEventListener("submit", e => {
        e.preventDefault();
 
        const data = Object.fromEntries(new FormData(e.target));
 
        // then do what you want with data or JSON.stringify(data)
    });
}

#javascript #html

Web Programming: Fastest way for appending DOM elements

var c = document.createDocumentFragment();
for (var i=0; i<10000; i++) {
    var e = document.createElement("div");
    e.className = "test-div";
    c.appendChild(e);
}
document.body.appendChild(c);

#javascript

Javascript: Async/Await

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"

asyncCall();

#javascript

Vanilla Javascript: Upload file

function uploadfile(file, url, success, progress){
	const ajax = new XMLHttpRequest();
	const formData = new FormData();

	if (el instanceof Element) file=file.files[0];

	formData.append('file', file);

	if (typeof progress=='function') {
		ajax.upload.addEventListener(
			'progress',
			function ProgressHandler(event){
				const p = Math.floor((event.loaded / event.total) * 100);
				progress(`${p}%`);
			}
		);
	}
	if (success) ajax.addEventListener('load', success, false);
	ajax.open('POST', url, true);
	ajax.send(formData);
}

#javascript #css

Javascript/CSS: Ripple Effect - Vanilla

/* css: 

.element{
    position: relative; <-- important to place effect span in element to be clicked 
}

.ripple{
    position: absolute;
    background-color:#fff;
    transform: translate(-50%,-50%);
    pointer-events: none;
    border-radius: 50%;
    animation: animate 0.5s linear infinite;   
}

@keyframes animate {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0.5;
    }
    100%{
        width: 800px;
        height: 800px;
        opacity: 0; 
    }
}
*/

element.addEventListener("click", (e)=>{
    var rect = e.target.getBoundingClientRect();
    let x=e.clientX - rect.x;
    let y=e.clientY - rect.y;
    let ripples = document.createElement('span');
    ripples.className="ripple";
    ripples.style.left = x + 'px';
    ripples.style.top = y + 'px';
    e.target.appendChild(ripples);
    setTimeout(()=>{
        ripples.remove();
    }, 500);
})

#javascript

Javascript: Query Params to JSON

var search = 'abc=foo&def=%5Basf%5D&xyz=5';

obj = JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');

#javascript

react native font family - Sök på Google

create folder in your root directory assets/Fonts and add your custom fonts
you want.
create a file in root folder and called react-native.config.js
Add the following code to the file =>

module.exports = {
project: {
    ios: {},
    android: {},
},
assets: ['./assets/Fonts']
};


or 
module.exports = {
    assets: ['./assets/Fonts'],
  };


Then, run the following command in your terminal:
react-native link 

to use it declare this way in your styles:
fontFamily: 'your-font-name without extension'

If your font is Raleway-Bold.ttf then,
  fontFamily: 'Raleway-Bold'

#osm #html #javascript

OSM/OpenLayers: Place marker on coordinates using custom image.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>OpenStreetMap & OpenLayers - Marker Example</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
	<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
  
  <script>
    /* OSM & OL example code provided by https://mediarealm.com.au/ */
    var map;
    var mapLat = -33.829357;
		var mapLng = 150.961761;
    var mapDefaultZoom = 10;
    
    function initialize_map() {
      map = new ol.Map({
        target: "map",
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM({
                      url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
                })
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([mapLng, mapLat]),
            zoom: mapDefaultZoom
        })
      });
    }

    function add_map_point(lat, lng) {
      var vectorLayer = new ol.layer.Vector({
        source:new ol.source.Vector({
          features: [new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
            })]
        }),
        style: new ol.style.Style({
          image: new ol.style.Icon({
            anchor: [0.5, 1],
            src: "http://vps1.dyndns.info:8051/markers/svg/map-marker-blue.svg"
          })
        })
      });

      map.addLayer(vectorLayer); 
    }


  </script>
</head>
<body onload="initialize_map(); add_map_point(-33.8688, 151.2093);">
  <div id="map" style="width: 100vw; height: 100vh;"></div>
</body>
</html>

#javascript

Javascript: Post data to new window.

openWindowWithPost("http://my.url.address/path", {
    param1: "value1",
    param2: "value2",
    //:
});

function openWindowWithPost(url, data) {
    var form = document.createElement("form");
    form.target = "_blank";
    form.method = "POST";
    form.action = url;
    form.style.display = "none";

    for (var key in data) {
        var input = document.createElement("input");
        input.type = "hidden";
        input.name = key;
        input.value = data[key];
        form.appendChild(input);
    }
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

#javascript

Javascript: Vanilla async get

function xhrSuccess () { this.callback.apply(this, this.arguments); }

function xhrError () { console.error(this.statusText); }

function loadFile (sURL, fCallback /*, argumentToPass1, argumentToPass2, etc. */) {
  var oReq = new XMLHttpRequest();
  oReq.callback = fCallback;
  oReq.arguments = Array.prototype.slice.call(arguments, 2);
  oReq.onload = xhrSuccess;
  oReq.onerror = xhrError;
  oReq.open("get", sURL, true);
  oReq.send(null);
}
Usage:

function showMessage (sMsg) {
  alert(sMsg + this.responseText);
}

loadFile("message.txt", showMessage, "New message!\n\n");

#javascript

Javascript: Get host info

var url = new URL("",location);

console.log(url.host); // ip address or hostname:port number
console.log(url.protocol); // protocol
console.log(url.hostname); // ip address or hostname
console.log(url.port); // port number
console.log(url.origin); // protocol://ip address or hostname:port number

console.log(url.pathname); // /current path/

#html #javascript

Telegram: Chat/html (personal)

<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-9a17642b-0849-44c7-af61-94872a45af4b"></div>

#javascript

Javascript: Beep

//<button type="button">Beep!</button>

function beep() {
    var snd = new  Audio("data:audio/wav;base64,//uQRAAAAWMSLwUIYAAsYkXgoQwAEaYLWfkWgAI0wWs/ItAAAGDgYtAgAyN+QWaAAihwMWm4G8QQRDiMcCBcH3Cc+CDv/7xA4Tvh9Rz/y8QADBwMWgQAZG/ILNAARQ4GLTcDeIIIhxGOBAuD7hOfBB3/94gcJ3w+o5/5eIAIAAAVwWgQAVQ2ORaIQwEMAJiDg95G4nQL7mQVWI6GwRcfsZAcsKkJvxgxEjzFUgfHoSQ9Qq7KNwqHwuB13MA4a1q/DmBrHgPcmjiGoh//EwC5nGPEmS4RcfkVKOhJf+WOgoxJclFz3kgn//dBA+ya1GhurNn8zb//9NNutNuhz31f////9vt///z+IdAEAAAK4LQIAKobHItEIYCGAExBwe8jcToF9zIKrEdDYIuP2MgOWFSE34wYiR5iqQPj0JIeoVdlG4VD4XA67mAcNa1fhzA1jwHuTRxDUQ//iYBczjHiTJcIuPyKlHQkv/LHQUYkuSi57yQT//uggfZNajQ3Vmz+Zt//+mm3Wm3Q576v////+32///5/EOgAAADVghQAAAAA//uQZAUAB1WI0PZugAAAAAoQwAAAEk3nRd2qAAAAACiDgAAAAAAABCqEEQRLCgwpBGMlJkIz8jKhGvj4k6jzRnqasNKIeoh5gI7BJaC1A1AoNBjJgbyApVS4IDlZgDU5WUAxEKDNmmALHzZp0Fkz1FMTmGFl1FMEyodIavcCAUHDWrKAIA4aa2oCgILEBupZgHvAhEBcZ6joQBxS76AgccrFlczBvKLC0QI2cBoCFvfTDAo7eoOQInqDPBtvrDEZBNYN5xwNwxQRfw8ZQ5wQVLvO8OYU+mHvFLlDh05Mdg7BT6YrRPpCBznMB2r//xKJjyyOh+cImr2/4doscwD6neZjuZR4AgAABYAAAABy1xcdQtxYBYYZdifkUDgzzXaXn98Z0oi9ILU5mBjFANmRwlVJ3/6jYDAmxaiDG3/6xjQQCCKkRb/6kg/wW+kSJ5//rLobkLSiKmqP/0ikJuDaSaSf/6JiLYLEYnW/+kXg1WRVJL/9EmQ1YZIsv/6Qzwy5qk7/+tEU0nkls3/zIUMPKNX/6yZLf+kFgAfgGyLFAUwY//uQZAUABcd5UiNPVXAAAApAAAAAE0VZQKw9ISAAACgAAAAAVQIygIElVrFkBS+Jhi+EAuu+lKAkYUEIsmEAEoMeDmCETMvfSHTGkF5RWH7kz/ESHWPAq/kcCRhqBtMdokPdM7vil7RG98A2sc7zO6ZvTdM7pmOUAZTnJW+NXxqmd41dqJ6mLTXxrPpnV8avaIf5SvL7pndPvPpndJR9Kuu8fePvuiuhorgWjp7Mf/PRjxcFCPDkW31srioCExivv9lcwKEaHsf/7ow2Fl1T/9RkXgEhYElAoCLFtMArxwivDJJ+bR1HTKJdlEoTELCIqgEwVGSQ+hIm0NbK8WXcTEI0UPoa2NbG4y2K00JEWbZavJXkYaqo9CRHS55FcZTjKEk3NKoCYUnSQ0rWxrZbFKbKIhOKPZe1cJKzZSaQrIyULHDZmV5K4xySsDRKWOruanGtjLJXFEmwaIbDLX0hIPBUQPVFVkQkDoUNfSoDgQGKPekoxeGzA4DUvnn4bxzcZrtJyipKfPNy5w+9lnXwgqsiyHNeSVpemw4bWb9psYeq//uQZBoABQt4yMVxYAIAAAkQoAAAHvYpL5m6AAgAACXDAAAAD59jblTirQe9upFsmZbpMudy7Lz1X1DYsxOOSWpfPqNX2WqktK0DMvuGwlbNj44TleLPQ+Gsfb+GOWOKJoIrWb3cIMeeON6lz2umTqMXV8Mj30yWPpjoSa9ujK8SyeJP5y5mOW1D6hvLepeveEAEDo0mgCRClOEgANv3B9a6fikgUSu/DmAMATrGx7nng5p5iimPNZsfQLYB2sDLIkzRKZOHGAaUyDcpFBSLG9MCQALgAIgQs2YunOszLSAyQYPVC2YdGGeHD2dTdJk1pAHGAWDjnkcLKFymS3RQZTInzySoBwMG0QueC3gMsCEYxUqlrcxK6k1LQQcsmyYeQPdC2YfuGPASCBkcVMQQqpVJshui1tkXQJQV0OXGAZMXSOEEBRirXbVRQW7ugq7IM7rPWSZyDlM3IuNEkxzCOJ0ny2ThNkyRai1b6ev//3dzNGzNb//4uAvHT5sURcZCFcuKLhOFs8mLAAEAt4UWAAIABAAAAAB4qbHo0tIjVkUU//uQZAwABfSFz3ZqQAAAAAngwAAAE1HjMp2qAAAAACZDgAAAD5UkTE1UgZEUExqYynN1qZvqIOREEFmBcJQkwdxiFtw0qEOkGYfRDifBui9MQg4QAHAqWtAWHoCxu1Yf4VfWLPIM2mHDFsbQEVGwyqQoQcwnfHeIkNt9YnkiaS1oizycqJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU=");  
    snd.play();
}


document.getElementsByTagName("button")[0].addEventListener("click",    beep);

#javascript

Cordova: Call function at main App from inappbrowser.

var inAppBrowserRef = cordova.InAppBrowser.open("http://www.mypage.com", "_blank");
inAppBrowserRef.addEventListener("message", function (params){
    if(params.data.action === "myNativeMethod"){
        // Call your native method
        myApp.myNativeMethod();
    }
});


//Then in the webpage being loaded into the InappBrowser you'd send the message:

<button id="myButton">Press me</button>
<script type="text/javascript">
    document.getElementById("myButton").addEventListener("click", function(){
        var message = {action: "myNativeMethod"};
        webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify(message));
    }, false);
</script>

//If you don't have direct control over the page being loaded into the InappBrowser, you could inject the code to send the message:

inAppBrowserRef.executeScript({ 
    code: '\
        document.getElementById("myButton").addEventListener("click", function(){\
            var message = {action: "myNativeMethod"};\
            webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify(message));\
        }, false);\
    '
});

#javascript

Cordova: Fix FCM plugin error

/*
at: plugins/cordova-plugin-fcm/scripts/fcm_config_files_process.js
Now change the file like this:
*/

// change
var strings = fs.readFileSync("platforms/android/res/values/strings.xml").toString();
// to
var strings = fs.readFileSync("platforms/android/app/src/main/res/values/strings.xml").toString();

// AND

//change
fs.writeFileSync("platforms/android/res/values/strings.xml", strings);

//to
fs.writeFileSync("platforms/android/app/src/main/res/values/strings.xml", strings);

/*After that, copy the google-services.json file to the following directories:

platforms/android/google-services.json
platforms/android/app/google-services.json  */

#javascript

Javascript: ProtocolCheck

(function (window) {

    function _registerEvent(target, eventType, cb) {
        if (target.addEventListener) {
            target.addEventListener(eventType, cb);
            return {
                remove: function () {
                    target.removeEventListener(eventType, cb);
                }
            };
        } else {
            target.attachEvent(eventType, cb);
            return {
                remove: function () {
                    target.detachEvent(eventType, cb);
                }
            };
        }
    }

    function _createHiddenIframe(target, uri) {
        var iframe = document.createElement("iframe");
        iframe.src = uri;
        iframe.id = "hiddenIframe";
        iframe.style.display = "none";
        target.appendChild(iframe);
        return iframe;
    }

    function openUriWithHiddenFrame(uri, successCb, failCb) {

        var timeout = setTimeout(function () {
            failCb();
            handler.remove();
        }, 1000);

        var iframe = document.querySelector("#hiddenIframe");
        if (!iframe) {
            iframe = _createHiddenIframe(document.body, "about:blank");
        }

        var handler = _registerEvent(window, "blur", onBlur);

        function onBlur() {
            clearTimeout(timeout);
            handler.remove();
            successCb()
        }

        iframe.contentWindow.location.href = uri;
    }

    function openUriWithTimeoutHack(uri, successCb, failCb) {

        var timeout = setTimeout(function () {
            failCb();
            handler.remove();
        }, 1000);

        var handler = _registerEvent(window, "blur", onBlur);

        function onBlur() {
            clearTimeout(timeout);
            handler.remove();
            successCb()
        }
        window.location = uri;

    }

    function openUriUsingFirefox(uri, successCb, failCb) {
        var iframe = document.querySelector("#hiddenIframe");
        if (!iframe) {
            iframe = _createHiddenIframe(document.body, "about:blank");
        }
        try {
            iframe.contentWindow.location.href = uri;
            successCb();
        } catch (e) {
            if (e.name == "NS_ERROR_UNKNOWN_PROTOCOL") {
                failCb();
            }
            else {
                successCb();
            }
        }
    }

    function openUriUsingIEInOlderWindows(uri, failCb) {
        if (getInternetExplorerVersion() === 10) {
            openUriUsingIE10InWindows7(uri, failCb);
        } else if (getInternetExplorerVersion() === 9 || getInternetExplorerVersion() === 11) {
            openUriWithHiddenFrame(uri, failCb);
        } else {
            openUriInNewWindowHack(uri, failCb);
        }
    }

    function openUriUsingIE10InWindows7(uri, successCb, failCb) {
        var timeout = setTimeout(failCb, 1000);
        window.addEventListener("blur", function () {
            clearTimeout(timeout);
        });

        var iframe = document.querySelector("#hiddenIframe");
        if (!iframe) {
            iframe = _createHiddenIframe(document.body, "about:blank");
        }
        try {
            iframe.contentWindow.location.href = uri;
            successCb()
        } catch (e) {
            failCb();
            clearTimeout(timeout);
        }
    }

    function openUriInNewWindowHack(uri, successCb, failCb) {
        var myWindow = window.open('', '', 'width=0,height=0');

        myWindow.document.write("<iframe src='" + uri + "'></iframe>");
        setTimeout(function () {
            try {
                myWindow.location.href;
                myWindow.setTimeout("window.close()", 1000);
                successCb()
            } catch (e) {
                myWindow.close();
                failCb();
            }
        }, 1000);
    }

    function openUriWithMsLaunchUri(uri, successCb, failCb) {
        navigator.msLaunchUri(uri,
            successCb,
            failCb
        );
    }

    function checkBrowser() {
        var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
        return {
            isOpera: isOpera,
            isFirefox: typeof InstallTrigger !== 'undefined',
            isSafari: Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0,
            isChrome: !!window.chrome && !isOpera,
            isIE: /*@cc_on!@*/false || !!document.documentMode   // At least IE6
        }
    }

    function getInternetExplorerVersion() {
        var rv = -1;
        if (navigator.appName === "Microsoft Internet Explorer") {
            var ua = navigator.userAgent;
            var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
            if (re.exec(ua) != null)
                rv = parseFloat(RegExp.$1);
        }
        else if (navigator.appName === "Netscape") {
            var ua = navigator.userAgent;
            var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
            if (re.exec(ua) != null) {
                rv = parseFloat(RegExp.$1);
            }
        }
        return rv;
    }
    window.openUriWithTimeoutHack = openUriWithTimeoutHack;
    window.protocolCheck = function (uri, successCb, failCb) {
        function successCallBack() {
            successCb && successCb();
        }
        function failCallback() {
            failCb && failCb();
        }

        if (navigator.msLaunchUri) { //for IE and Edge in Win 8 and Win 10
            openUriWithMsLaunchUri(uri, successCb, failCb);
        } else {
            var browser = checkBrowser();

            if (browser.isFirefox) {
                openUriUsingFirefox(uri, successCallBack, failCallback);
            } else if (browser.isChrome) {
                openUriWithTimeoutHack(uri, successCallBack, failCallback);
            } else if (browser.isIE) {
                openUriUsingIEInOlderWindows(uri, successCallBack, failCallback);
            } else {
                //not supported, implement please
            }
        }
    }
}(window));

#html #css #javascript

Javascript/jQuery: Input with fixed prefix.

//<input type="text" value="B01" id="MYINPUT">

$("#MYINPUT").select(function(e){
    var selSt=$(this)[0].selectionStart;
    var selNd=$(this)[0].selectionEnd;
    
    if (selSt<3) {
        $(this)[0].setSelectionRange(3, selNd);
    }
});

#javascript

Javascript: Clone array/object.

function clone(src) {
	if(!src) return null;
	return JSON.parse(JSON.stringify(src));
}

#javascript

Javascript: Get filename and path from full path filename

function getFilename(fullname){
    return fullname.replace(/^.*[\\\/]/, '');
}

function getFilepath(fullname){
    var fn = fullname.split('/');
    fn.pop();
    return fn.join("/");
}

#javascript

Javascript: Get file name from fullpath.

var filename = fullPath.replace(/^.*[\\\/]/, '');

/*

example:

   "/home/user/myfile.js".replace(/^.*[\\\/]/, ''); 
   
   returns:  myfile.js 
   
*/

#javascript

Javascript: Disable Back Button - (untested)

(function (global) { 

    if(typeof (global) === "undefined") {
        throw new Error("window is undefined");
    }

    var _hash = "!";
    var noBackPlease = function () {
        global.location.href += "#";

        // making sure we have the fruit available for juice (^__^)
        global.setTimeout(function () {
            global.location.href += "!";
        }, 50);
    };

    global.onhashchange = function () {
        if (global.location.hash !== _hash) {
            global.location.hash = _hash;
        }
    };

    global.onload = function () {            
        noBackPlease();

        // disables backspace on page except on input fields and textarea..
        document.body.onkeydown = function (e) {
            var elm = e.target.nodeName.toLowerCase();
            if (e.which === 8 && (elm !== 'input' && elm  !== 'textarea')) {
                e.preventDefault();
            }
            // stopping event bubbling up the DOM tree..
            e.stopPropagation();
        };          
    }

})(window);

#javascript

Javascript: Convert proper name to Capital/Title Case

function capitalTitle(s) {
    var preposiciones = [
      'a','al','ante','bajo','cabe','con','contra','de','del','desde','durante',
      'en','entre','hacia','hasta','mediante','para','por','según','sin',
      'so','sobre','tras','versus','via','vs','las','los','y','x','o','ó'
    ];
  
    s=capital(s);
    var r='\\s+('+preposiciones.join("|")+')\\s+';
    var reg=new RegExp(r, "ig");
  
    s = s.replace(reg, function(match) {
        return match.toLowerCase();
    });
  
    s=s.replace(/cxc/gi,'CxC');
    s=s.replace(/cxp/gi,'CxP');
    s=s.replace(/srl/gi,'SRL');
    s=s.replace(/llc/gi,'LLC');
    s=s.replace(/ars/gi,'ARS');
    return s;
}

String.prototype.toTitleCase = function () {
    return this.toLowerCase().replace(/[^\s|\'\-]+/g, function(word) {
        return word.replace(/^./, function(first) {
            return first.toUpperCase();
        });
    });
}

#javascript

Javascript: convert native browser event to jQuery event.

function ourEvent(e) {
    e=jQuery.event.fix(e);

    //  console.log(e.which);
    
    :
    :
}

#javascript

Javascript: vanilla and crossbrowser event handler accepting arguments

function EventHandler(arg1, arg2,...) {
    var evt = window.event || function(cx) {
    if(typeof Event!='undefined' && cx){
    	for(var ii=0; ii<cx.arguments.length; ii++)
    		if(cx.arguments[ii] instanceof Event) return cx.arguments[ii];
    		return arguments.callee(cx.caller);
    	}
    	return null;
    }(arguments.callee.caller);
    
    evt.preventDefault=evt.preventDefault||function(){evt.returnValue = false;};
    evt.stopPropagation=evt.stopPropagation||function(){evt.cancelBubble = false;};
}

#html #javascript #css

Javascript: calculating similarity % between two string

body{
    font-family: verdana;
    color:gray;
    margin: 8px;
}

.str{
    color:#F0F;
}

.perc{
    color:#000;
    background-color:#FF0;
}

.comment{
    color:silver;
}

p{
    color: black;
    font-style:italic;
}

<html>
    <head>
        <title>
            test
        </title>
    </head>
    <body>
This is a way to calculate similarity % between two strings based on <a href="https://en.wikipedia.org/wiki/Levenshtein_distance">Levenshtein distance:</a><p><p><br>
    </body>
</html>

function similarity(s1, s2) {
  var longer = s1;
  var shorter = s2;
  if (s1.length < s2.length) {
    longer = s2;
    shorter = s1;
  }
  var longerLength = longer.length;
  if (longerLength === 0) {
    return 1.0;
  }
  return (longerLength - editDistance(longer, shorter)) / parseFloat(longerLength);
}

function editDistance(s1, s2) {
  s1 = s1.toLowerCase();
  s2 = s2.toLowerCase();

  var costs = new Array();
  for (var i = 0; i <= s1.length; i++) {
    var lastValue = i;
    for (var j = 0; j <= s2.length; j++) {
      if (i == 0)
        costs[j] = j;
      else {
        if (j > 0) {
          var newValue = costs[j - 1];
          if (s1.charAt(i - 1) != s2.charAt(j - 1))
            newValue = Math.min(Math.min(newValue, lastValue),
              costs[j]) + 1;
          costs[j - 1] = lastValue;
          lastValue = newValue;
        }
      }
    }
    if (i > 0)
      costs[s2.length] = lastValue;
  }
  return costs[s2.length];
}

var $str1="Marco Antonio Piñero Lopez";
var $str2="marco antonio Pineda lópez";

var perc=Math.round(similarity($str1,$str2)*10000)/100;

var txt="The strings: <span class=\"str\">'"+$str1+"'</span> and <span class=\"str\">'"+$str2+"'</span>";
  txt+="<br>are similar <span class=\"perc\">"+perc+"%</span>";
document.write(txt);

#javascript

Javascript: Is my browser on line?

if (navigator.onLine){
  alert('You r connected!');
} else {
  alert('No connection :(');
}

#javascript

javascript return new Promise: short syntax

global.res= function (v){
    return new Promise(function(r){r(v);});
}
global.rej= function (v){
    return new Promise(function(r,rr){rr(v);});
}

#lodash #javascript #flatten

Deep flatten Json

const recurse = (rows) => _.map((rows), (row) => row.collapsed ? [row] : [row, recurse(row.children)]);

const flattenTree = tree => _.flattenDeep(recurse(tree));

#javascript

Thay thế Switch-case (Sử dụng Map())

const actions = new Map([
  ['1', ['processing']],
  ['2', ['fail']],
  ['3', ['fail']],
  ['4', ['success']],
  ['5', ['cancel']],
  ['default', ['other']]
])

const clickHandler = (status) => {
  let action = actions.get(status) || actions.get('default')
  sendLog(action[0])
}

#javascript #react.js

set background image in react

{ backgroundImage: `url(${bgImage})`}

#javascript

javascript variable

var myName;
// var keyword create a variable called myName

 //you can store a value in a variable with the assignment operator (=).
var a;
a = 7;
// this code assign the value 7 to variable a.

//you can assign the value of that variable to another variable using the assignment operator.
var myVar;
myVar = 5;
var myNum;
myNum = myVar;
// now the code assign the contents of a to variable b.

#javascript

javascript variable

var myName;
// var keyword create a variable called myName

 //you can store a value in a variable with the assignment operator (=).
var a;
a = 7;
// this code assign the value 7 to variable a.

//you can assign the value of that variable to another variable using the assignment operator.
var myVar;
myVar = 5;
var myNum;
myNum = myVar;
// now the code assign the contents of a to variable b.

//It is common to initialize a variable to an initial value in the same line as it is declared.
var myVar = 0;

//But you can also declare a string variable like this:
var myName = "your name";
//"your name" is called a string literal, another example 
var myFirstName = "alya"
var myLastName = "shofiyah"

#javascript

JavaScript Add Cookie with Expire Date

var now = new Date();
var time = now.getTime();
var expireTime = time + 10000*36000;
now.setTime(expireTime);
document.cookie = 'cookie=ok;expires='+now.toUTCString()+';path=/';

#javascript

JavaScript comment

// This is an in-line comment.
/* This is a
multi-line comment */

#javascript

15. prompts the user to allow or decline their geographical location

let geoloc = document.getElementById("theElementID");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    geoloc.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  geoloc.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}

#javascript #jquery

Equal Height JS

 
Example where to use
equalheight('.service-slider-sec .bottom-content');

equalheight = function (container) {
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
jQuery(container).each(function () {
$el = jQuery(this);
jQuery($el).height('auto')
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}

#javascript

Object assign

//signature
Object.assign(target, ...sources)
var newState = Object.assign({}, state, action.state);

#javascript

Extract a string from and string of characters and change it case and loop through

'use strict';
let myString = 'I am really hungry for some';
console.log(myString);

// To transform myString in UPPERCASE

let myUpperString = myString.toUpperCase();
console.log(myUpperString);

// methods have ();
// To extract the word REALLY from the myString
// first, get the location

let exactLocation = myString.search('really');

console.log(exactLocation);

// To get the word in full

let extractWordInFull = myString.substr(exactLocation, 6);
console.log(extractWordInFull);

// turning the extracted word into uppercase
let turnUpperCase = extractWordInFull.toUpperCase();
console.log(turnUpperCase);

// replacing the word in the string 
let newWord = myString.replace('really', turnUpperCase);
console.log(newWord);


let foods = ['bread', 'yam', 'rice', 'beans'];
let stringLiteral = `${myString} ${foods[0]}`;
console.log(stringLiteral);

// looping through a array together with a string
for(let i = 0; i < foods.length; i++) {
    console.log(`${myString} ${foods[i]}`)
  }

 /*  for(let eachFood of foods) { 
    console.log(`${myString} ${eachFood}`);
  } */

  for(let eachFoods of foods) { 
    console.log(`${myString} ${eachFoods}`);
  }

// to convert to an uppercase if the index of the food is an even number

 for ( let i = 0; i < foods.length; i++) { 
    if ( i % 2 === 0) { 

        let changeToUpperCase = foods[i].toUpperCase();
        console.log(`${myString} ${changeToUpperCase}`);
    }
    else { 
        console.log(`${myString} ${foods[i]}`);
    }
 }


// I CAN ALWAYS REFACTOR MY CODE

#javascript

Diferencia de días entre flechas (JS)

<script type = "text/javascript" >
    // JavaScript program to illustrate 
    // calculation of no. of days between two date 
  
    // To set two dates to two variables
    var date1 = new Date("06/30/2019");
var date2 = new Date("07/30/2019");
  
// To calculate the time difference of two dates
var Difference_In_Time = date2.getTime() - date1.getTime();
  
// To calculate the no. of days between two dates
var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);
  
//To display the final no. of days (result)
document.write("Total number of days between dates  <br>"
               + date1 + "<br> and <br>" 
               + date2 + " is: <br> " 
               + Difference_In_Days);
  
</script>

#javascript

javascript - Create object from array - Stack Overflow

for (const key of yourArray) {
      obj[key] = whatever;
 }

#javascript

JavaScript variable number of arguments to function

function foo(x, ...args) {
  console.log(x, args, ...args, arguments);
}

foo('a', 'b', 'c', z='d')

=>

a
Array(3) [ "b", "c", "d" ]
b c d
Arguments
    0: "a"
    1: "b"
    2: "c"
    3: "d"
    length: 4

#javascript

Limiting Characters per Line

(function() {
    const inputEls = document.querySelectorAll('input[name="product[name]"], textarea[name="product[short_description]"');
    function checkInputCharacters(input, inpuName) {
        const limit = 3; // <---max no. of lines
        const spaces = '40'; // <---max characters of each line
        const inputSpaces = '45'; // <---max characters of input
        const range = inpuName === 'product[short_description]' ? limit : inputSpaces;
        input.addEventListener('keyup', function() {
            const lines = inpuName === 'product[short_description]' ? input.value.split("\n") : input.value;
            for (let i = 0; i < lines.length; i++) {
                    if (lines[i].length <= spaces) continue;
                    let j = 0;
        
                    let space = spaces;
        
                    while (j++ <= spaces) {
                        if (lines[i].charAt(j) === " ") space = j;  
                    }
                lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || "");
                lines[i] = lines[i].substring(0, space);
            }

            handleInputStateColor(input, lines, range);

            if (inpuName === 'product[short_description]') {
                input.value = lines.slice(0, limit).join("\n");
            } else {
                lines.length > inputSpaces && (input.value = lines.slice(0, -(lines.length - inputSpaces)));
            }
        })
    }
    
    function handleInputStateColor(input, inputVal, limit) {
      if (inputVal.length > limit) {
            input.style.color = 'red';
            setTimeout (function(){
                input.style.color = '';
            },500);
        }
    }

    Array.prototype.forEach.call(inputEls, (el) => {
      checkInputCharacters(el, el.name);
    });
})();

#javascript

Drag and drop

const dropArea = document.getElementById('drop-area');

dropArea.addEventListener('dragover', (event) => {
  event.stopPropagation();
  event.preventDefault();
  // Style the drag-and-drop as a "copy file" operation.
  event.dataTransfer.dropEffect = 'copy';
});

dropArea.addEventListener('drop', (event) => {
  event.stopPropagation();
  event.preventDefault();
  const fileList = event.dataTransfer.files;
  console.log(fileList);
});

#javascript

Leia arquivos em JavaScript

function readImage(file) {
  // Check if the file is an image.
  if (file.type && !file.type.startsWith('image/')) {
    console.log('File is not an image.', file.type, file);
    return;
  }

  const reader = new FileReader();
  reader.addEventListener('load', (event) => {
    img.src = event.target.result;
  });
  reader.readAsDataURL(file);
}

#javascript

Replacing JavaScript switch statement with object literals - 30 seconds of code

const switchFn = (lookupObject, defaultCase = '_default') =>
  expression => (lookupObject[expression] || lookupObject[defaultCase])();

const knownFruit = () => console.log('Known fruit');
const unknownFruit = () => console.log('Unknown fruit');

const logFruit = {
  'apples': knownFruit,
  'oranges': knownFruit,
  'default': unknownFruit
};

const fruitSwitch = switchFn(logFruit, 'default');

fruitSwitch('apples'); // Logs: 'Known fruit'
fruitSwitch('pineapples'); // Logs: 'Unknown fruit'

#javascript

VISUAL RULES

body {
  /* Old browsers */
  background: #141E30;
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(-45deg, #35577D, #141E30);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(-45deg, #35577D, #141E30);
  margin: 0;
  padding: 0;
}

h1 {
  color: #FFF !important;
  font-size: 2em;
  padding-top: 100px;
  width: 100%;
  font-family: Georgia;
  text-align: center;
}

h2 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.5);
  font-weight: 100;
  font-size: 22px;
  line-height: 24px;
  padding-bottom: 30px;
  text-align: left;
  width: 70%;
  font-family: Georgia;
}

p {
  color: aliceblue;
  line-height: 1.3em;
  text-align: left;
  width: 100%;
  font-family: Helvetica;
  font-size: 18px;
  font-weight: bold;
}

.byline {
  font-family: Helvetica;
  color: rgba(255, 255, 255, 0.5);
  float: left;
  font-size: 14px;
  padding-left: 10px;
  text-transform: uppercase;
}

.caption {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-style: italic;
  line-height: 14px;
  margin-left: 20px;
  padding: 10px;
  position: relative;
  top: 80%;
  width: 60%;
  background-color: white;
  color: black;
}

.content {
  padding: 40px;
}

.image {
  background-image: url('https://content.codecademy.com/courses/freelance-1/unit-2/soccer.jpeg');
  background-size: cover;
  background-position: center;
  height: 300px;
}

.writer-img {
  -webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  -moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  float: left;
  width: 50px;
}

#javascript

new box model

* {
  box-sizing: border-box;
}
body {
  background-color: #FFF;
  margin: 0px;
  padding: 50px 60px;
}

h1 {
  color: #004E89;
  font-family: 'Yantramanav', sans-serif;
  font-size: 50px;
  font-weight: 400;
  margin: 0;
  text-align: center;
}

h2 {
  color: #AAA;
  font-family: 'Yantramanav', sans-serif;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 2px;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

p {
  color: #333;
  font-family: 'Yantramanav', sans-serif;
  font-size: 16px;
  font-weight: 100;
  margin: 0;
  text-align: center;
}

.actions {
  text-align: center;
  margin-top: 30px;
}

.actions a {
  background-color: #9DD1F1;
  border-radius: 3px;
  color: #004E89;
  font-family: 'Yantramanav', sans-serif;
  font-size: 16px;
  font-weight: 300;
  display: inline-block;
  margin: 10px;
  padding: 12px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

#gameboard {
  position: relative;
  text-align: center;
  top: 30px;
}

.card {
  
  border: 2px solid #9DD1F1;
  display: inline-block;
  height: 200px;
  margin-top: 4px;
  padding: 30px auto;
  text-align: center;
  width: 215px;
}

.card:hover {
  background-color: #004E89;
  border-color: #004E89;
}

.card img {
  padding-top: 40px;
}

#javascript

CSS box

body {
  background-color: white;
  font-family: 'Raleway', sans-serif;
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  font-weight: 100;
  letter-spacing: 2px;
  padding: 20px;
}

.navigation  li.logo {
  color: black;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 4px;
}

#banner {
  background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_tahoe.jpeg");
  background-size: cover;
  background-position: bottom center;
  height: 700px;
  width: 100%;
}

#banner .content h1 {
  border: 3px solid white;
  position: relative;
  top: 50px;
  width: 400px;
  margin: 0 auto;
}

#main {
  margin: 0 auto;
  padding: 40px;
  text-align: center;
  width: 400px;
  height: 1000px;
  overflow: scroll;
}

h1 {
  color: white;
  font-size: 42px;
  font-weight: 600;
  text-align: center;
}

h2 {
  border: 1px dotted red;
  color: red;
  font-size: 14px;
  line-height: 48px;
  padding: 20px 30px;
  margin: 30px 20px;
  text-align: center;
}

h3 {
  color: red;
  font-size: 26px;
  font-weight: 700;
  padding: 20px 10px;
}

p {
  color: grey;
  font-size: 16px;
  line-height: 48px;
  margin-top: 60px;
  padding: 10px 20px;
}

.pull-quote {
  margin: 0 auto;
  width: 400px;
}

.byline {
  border-bottom: 1px solid LightGrey;
  border-top: 1px solid LightGrey;
  color: DarkGrey;
  font-size: 14px;
  font-weight: 200;
}

.share {
  border: 1px solid LightGrey;
  padding: 40px 0px;
  position: relative;
  text-align: center;
  width: 100%;
}

.share a {
  background: red;
  border: 1px solid red;
  border-radius: 3px;
  color: white;
  display: inline-block;
  margin: 10px;
  padding: 14px;
  text-decoration: none;
}

.share a:hover {
  background: white;
  border: 1px solid red;
  color: red;
}

#javascript

Limit input Characters

const string = "STANDEE CHÂN SẮT KHUNG NHÔM SANG TRỌNG SIZE 80x20CM";

function limitInputCharacters(str) {
  if (str.length > 45) return;
  return true
}

//limitInputCharacters(string)

#javascript

Pipe functions - 30 seconds of code

const pipeFunctions = (...fns) =>
  fns.reduce((f, g) => (...args) => g(f(...args)));

#javascript

Command+injection

undefined

#javascript

General CSS

* {
  border: 1px solid red;
}

p {
  color: green;
}

h1 {
  color: maroon;
}

.title {
  color: teal;
}

.uppercase {
  text-transform: uppercase;
}

#article-title {
  font-family: Tahoma;
}

a[href*='florence'] {
  color: lightgreen;
}

a[href*='beijing'] {
  color: lightblue;
}

a[href*='seoul'] {
  color: lightpink;
}

a:hover {
  color:darkorange;
}

.heading-background {
  background-color: aqua;
}

#publish-time {
  color: lightgray;
}

h5 {
  color: yellow;
}

.author-class {
  color: pink;
}

#author-id {
  color: cornflowerblue;
}

h2.destination {
  font-family: Tahoma;
}

.description h5 {
  color: blueviolet;
}

li h4 {
  color: gold;
}

h4 {
  color: dodgerblue;
}
h5, 
.li {
font-family: monospace;
}

#javascript

Multiple Selectors

h1, 
.menu {
  font-family: Georgia;
}

#javascript

chaining and Descendant Combinator

h2.destination {
  font-family: Tahoma;
}
/////

<ul class='main-list'>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>

.main-list li {
 
}

.description h5 {
  color: blueviolet;
}
///

#javascript

Pseudo-class

p:hover {
  color: darkorange;;
}

#javascript

ID and attributes

<h1 id='large-title'> ... </h1>

#large-title {
 font-family: cursive;
}
//attributes
[href*='florence'] {
  color: lightgreen;
}

#javascript

class

//<h1 class='title'>Top Vacation Spots</h1>
.title {
 color: teal;
}
//allows you to add two effects <h1 class='title uppercase'>

.uppercase {
  text-transform: uppercase;
}

#javascript

Selectors

p {
  color: green;
}

h1 {
  color: maroon;
}
* { 
  font-family: Verdana;
}
* { 
  border: 1px solid red;
}

#javascript

Events coming!

const parent = document.querySelector(".parent");
const child = document.querySelector(".child");

// grandparent.addEventListener("click", e => {
//     console.log("Grandparent capture")
// }, { capture: true })  // it gives the hierarchy

grandparent.addEventListener("click", e => {
    console.log("Grandparent bubble")
}, { once: true })  // will run the code once 
// parent.addEventListener("click", e => {
//     e.stopPropagation() // none of the bubbles or capture occur 
//     console.log("Parent capture")
// }, { capture: true })
parent.addEventListener("click", sayhi)
setTimeout(() => {  // removes the event at a given time
    parent.removeEventListener("click", sayhi)
}, 2000)

// child.addEventListener("click", e => {
//     console.log("Child capture")
// }, { capture: true })
child.addEventListener("click", e => {
    console.log("Child bubble")
})
function sayhi() {   // creat a separate function
    console.log('Hi!')
}



const divs = document.querySelectorAll('div');
divs.forEach(div => {
    div.addEventListener('click', () => {
        console.log("inamo")
    })
})

addGlobalEventListener('click', 'div', e => {
    console.log('gago')
})
function addGlobalEventListener(type, selector, callback) {
    document.addEventListener(type, e => {
        if (e.target.matches(selector)) callback(e)
    })
}

const newDiv = document.createElement("div")
newDiv.style.width = '100px';
newDiv.style.height = '100px';
newDiv.style.backgroundColor = 'orange';
// newDiv.addEventListener('click', () => {
//     console.log('inamo')
// })
document.body.append(newDiv);

#bootstrap #css #javascript #hover #dropdown

Make Bootstrap 5 dropdown open on hover with vanila js

document.addEventListener("DOMContentLoaded", function(){
// make it as accordion for smaller screens
if (window.innerWidth > 992) {

	document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){

		everyitem.addEventListener('mouseover', function(e){

			let el_link = this.querySelector('a[data-bs-toggle]');

			if(el_link != null){
				let nextEl = el_link.nextElementSibling;
				el_link.classList.add('show');
				nextEl.classList.add('show');
			}

		});
		everyitem.addEventListener('mouseleave', function(e){
			let el_link = this.querySelector('a[data-bs-toggle]');

			if(el_link != null){
				let nextEl = el_link.nextElementSibling;
				el_link.classList.remove('show');
				nextEl.classList.remove('show');
			}


		})
	});

}
// end if innerWidth
}); 
// DOMContentLoaded  end

#javascript

fashion blog

<!DOCTYPE html>

<html>
  <head>
    <title>Everyday with Isa</title>

    </head>
    <body>
      <h1>An Insider’s Guide to <a href="https://en.wikipedia.org/wiki/New_York_Fashion_Week" target="_blank">NYFW</a></h1>
      <img src =https://content.codecademy.com/courses/learn-html/elements-and-structure/image-one.jpeg>
      <p>NYFW can be both amazingly fun & incredibly overwhelming, especially if you’ve never been. Luckily, I’m here to give you an insider’s guide and make your first show a pleasurable experience. By taking my tips and tricks, and following your gut, you’ll have an unforgettable experience!
         </p>
      <h2>Getting Tickets & Picking the Shows</h2>
      <img src =https://content.codecademy.com/courses/learn-html/elements-and-structure/image-two.jpeg>
      <p>If you’re lucky or connected you can get an invite, sans the price tag. But I wasn’t so lucky or connected my first 2 years so I’m here to help you out. First, plan out which shows are most important to you and make a schedule and this is a biggie: SET A BUDGET. If you’re worrying about blowing your cash the whole time you won’t have fun. Then check out prices, days, and times and prioritize the designers you want to see most. Lastly, purchase your tickets and get excited!
         </p>
      <h2>Dressing for the Shows</h2>
      <img src =https://content.codecademy.com/courses/learn-html/elements-and-structure/image-three.jpeg>
      <p>Always be true to your own sense of style, if you don’t you’ll be uncomfortable the whole time and it will show. Remember, NYFW is about expressing yourself and taking in what the designers have chosen to express through their new lines. Also it’s important to wear shoes you’ll be comfortable in all day. Obviously you want to look good, but you’ll be on your feet all day long, so be prepared.”
        </p>
   
      </body>
  <img src =https://content.codecademy.com/courses/learn-html/elements-and-structure/profile.jpg>
  <h3>by Isabelle Rodriguez | 1 day ago</h3>
  <h4>Related Content</h4>
   <ul>
      <li>How To Style Boyfriend Jeans</li>
      <li>When Print Is Too Much</li>
      <li>The Overalls Trend</li>
      <li>Fall’s It Color: Blush</li>
    </ul>
    <div id="contact">
    <p><strong>email</strong>: isa@fashionblog.com | <strong>phone</strong>: 917-555-1098 | <br /><br /><strong>address</strong>: 371 284th St, New York, NY, 10001</p>
  </div>

#javascript

brown bear HTML full

<!DOCTYPE html>
<html>

<head>
  <title>Brown Bears</title>
</head>

<body>
  <a href="./index.html">Brown Bear</a>
  <a href="./aboutme.html">About Me</a>
  <h1>The Brown Bear</h1>
  <ul>
       <li><a href="#introduction">Introduction</a></li>
      <li><a href="#habitat">Habitat</a></li>
      <li><a href="#media">Media</a></li>

 </ul>
  <div id="introduction">
    <h2>About Brown Bears</h2>
    <p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the
      Atlas bear and the Himalayan brown bear.</p>
    <a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">Learn More</a>
    <h3>Species</h3>
    <ul>
      <li>Arctos</li>
      <li>Collarus</li>
      <li>Horribilis</li>
      <li>Nelsoni (extinct)</li>
    </ul>
    <h3>Features</h3>
    <p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
  </div>
  <div id="habitat">
    <h2>Habitat</h2>
    <h3>Countries with Large Brown Bear Populations</h3>
    <ol>
      <li>Russia</li>
      <li>United States</li>
      <li>Canada</li>
    </ol>
    <h3>Countries with Small Brown Bear Populations</h3>
    <p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
  </div>
  <div id="media">
    <h2>Media</h2>
    <a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank"><img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg"/></a>
    <video src="https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" height="240" width="320" controls>Video not supported</video>
  </div>
</body>

</html>

#javascript

brown bear HTML example bare bones

<body>
  <h1>The Brown Bear</h1>
  <div id="introduction">
    <h2>About Brown Bears</h2>
    <p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
    <h3>Species</h3>
    <ul>
      <li>Arctos</li>
      <li>Collarus</li>
      <li>Horribilis</li>
      <li>Nelsoni (extinct)</li>
    </ul>
    <h3>Features</h3>
    <p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
  </div>
  <div id="habitat">
    <h2>Habitat</h2>
    <h3>Countries with Large Brown Bear Populations</h3>
    <ol>
      <li>Russia</li>
      <li>United States</li>
      <li>Canada</li>
    </ol>
    <h3>Countries with Small Brown Bear Populations</h3>
    <p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
  </div>
  <div id="media">
    <h2>Media</h2>
    <img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg" alt="A Brown Bear"/>
        <video src="https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" width="500" height="500" controls>Video not supported</video>
  </div>
</body>

#javascript

Javascript / jQuery - map a range of numbers to another range of numbers - Stack Overflow

const num = 5;
console.log(scale(num, 0, 10, -50, 50)); // 0
console.log(scale(num, -20, 0, -100, 100)); // 150

#javascript

Javascript / jQuery - map a range of numbers to another range of numbers - Stack Overflow

function scale (number, inMin, inMax, outMin, outMax) {
    return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
}

#javascript

Arrow Functions

let getA = a => a*a;
console.log(getA(2))
 
var b = 5 // outside the scope 
let square = () => {return b*b};
console.log(square())

// inside the scope
let square = (b) => {return b*b};
console.log(square(9))

let double = function(b){
    return b*b
};
console.log(double(10))

#javascript #html #css

Css for Accordion/Colapsible

.accordion-item {
	background-color: #f4f4f6;
}

.accordion-header {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.accordion-header::before {
	content: '+';
	font-size: 3.5rem;
	margin-right: 20px;
}

.active-header::before {
	content: '-';
}

.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: 1s ease max-height;
	font-size: 1.5rem;
}

#javascript #html #css

Accordion/Collapsible

const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach((accordionHeader) => {
	accordionHeader.addEventListener('click', () => {
		accordionContent = accordionHeader.nextElementSibling;
		const height = accordionContent.scrollHeight;

		accordionHeader.classList.toggle('active-header');

		if (accordionHeader.classList.contains('active-header')) {
			accordionContent.style.maxHeight = `${height}px`;
		} else {
			accordionContent.style.maxHeight = '0px';
		}
	});
});

#javascript #jquery

DISABLE LANDSCAPE MODE ON MOBILE

//This will reload the hidden page when the user rotates the device.

jQuery(window).on("orientationchange",function(){
  
    if(screen.availHeight < screen.availWidth){
        //alert("chng");
          jQuery( ".h-main-body" ).css( "display", "none" );
          var newLine = "\r\n"
          var msg = "Please Don't use Landscape!"
          msg += newLine;
          msg += "(Turn your phone)";
          msg += newLine;
          msg += "and wait a seconds,";   
          // msg += newLine;
          // msg += "for the page to reload.";   
          alert(msg);
      }
      else{
        jQuery( ".h-main-body" ).css( "display", "block" );
         //location.reload();
      }
 
});

#javascript

Check form validation

form.find('[next-step-button]').on('click', function (e) {
  if (currentStep < nextStep && form.valid()) {
    gotoStep(nextStep)
  } else if (nextStep < currentStep ) {
    gotoStep(nextStep)
  }
})

#javascript

HTML Tags

Tag Name	Code	             		Definition

Bold	<b>	       		When surrounding text, makes that text bold.

Emphasis	<em>		When surrounding text, makes that text italic.

Hyperlink	<a>			Creates hyperlinks.

Image	<img>			Denotes images.

Break	<br>			A single line break.

Paragraph	<p>			Creates a paragraph in text.

Section	<span>			Makes a section in text.

Division	<div>		Defines an area of the page.

Form	    <form>			Creates a form for user input.

Unordered List	<ul>	Creates an unordered list.

Ordered List	<ol>	Creates an ordered list.

List element	<li>	Denotes an element of the list. This tag is used for both ordered and unordered lists.

Table	<table>	Creates a table on the page.

Heading Level One	<h1>	Creates a heading in the text.

#javascript

HTML structure

<!DOCTYPE html>
<html>
   <head>
      <title>My Web Page</title>
      content
   </head>
   <body>
      content
   </body>
</html>

#javascript

command line

cd
$ cd Desktop/
cd takes a directory name as an argument, and switches into that directory.

cd ..
$ cd ..
$ cd ../..
To move up one directory, use cd ... Here, cd .. navigates up from jan/memory/ to jan/.

ls
$ ls
2014  2015  hardware.txt
ls lists all files and directories in the working directory

mkdir
$ mkdir media
mkdir takes in a directory name as an argument, and then creates a new directory in the current working directory. Here we used mkdir to create a new directory named media/.

pwd
$ pwd
/home/ccuser/workspace/blog
pwd prints the name of the working directory

rm
$ rm waterboy.txt
rm deletes files. Here we remove the file waterboy.txt from the file system.

#javascript #jquery #speedoptimization

Javascript Get Image Height & Width

function getMeta(url, callback) {
    var img = new Image();
    img.src = url;
    img.onload = function() { callback(this.width, this.height); }
}
getMeta(
  "http://snook.ca/files/mootools_83_snookca.png",
  function(width, height) { alert(width + 'px ' + height + 'px') }
);

#javascript #jquery #speedoptimization

Javascript/jQuery Image load when section on view | Speed Optimization

document.addEventListener("DOMContentLoaded", function()
        {
            $("img").each(function()
            {
                $(this).attr("data-src",$(this).attr("src"));
                $(this).attr("src",'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
            });
            var $lazy_elements = $('img');
            var $window = $(window);
            function check_if_in_view()
            {
                var window_height = $window.height();
                var window_top_position = $window.scrollTop();
                var window_bottom_position = (window_top_position + window_height);
                $.each($lazy_elements, function()
                {
                    var $lazy_element = $(this);
                    var lazy_element_height = $lazy_element.outerHeight();
                    var lazy_element_top_position = $lazy_element.offset().top;
                    var lazy_element_bottom_position = (lazy_element_top_position + lazy_element_height);
                    //check to see if this current container is within viewport
                    if ((lazy_element_bottom_position >= window_top_position) && (lazy_element_top_position <= window_bottom_position))
                    {
                        if($lazy_element.attr('data-src'))
                        {
                            $lazy_element.attr("src",$lazy_element.attr('data-src'));
                        }
                    }
                });
            }
            $window.on('scroll resize', check_if_in_view);
            $window.trigger('scroll');
});

#javascript

School Catalogue

class School {
  constructor(name,level,numberOfStudents) {
    this._name = name;
    this._level = level;
    this._numberOfStudents = numberOfStudents ;
  }
  
  get name() {
    return this._name;
  }
  
  get level() {
    return this._level;
  }
  get numberOfStudents() {
    return this._numberOfStudents;
  }
  set numberOfStudents(value){
    if(value.isNaN()){
      console.log('Invalid input: numberOfStudents must be set to a Number.')
    }
    else{
      this._numberOfStudents = value;
    }
  }
  quickFacts(){
    console.log(`${this.name} educates ${this.numberOfStudents} students at the ${this.level} school level.`)
  }
static
pickSubstituteTeacher(substituteTeachers){
  const randInt = Math.floor(Math.random()*
  substituteTeachers.length);
  return substituteTeachers[randInt];
}

};


class PrimarySchool extends School {
 constructor(name,numberOfStudents,pickupPolicy) {
   super(name, 'primary',numberOfStudents);
   this._pickupPolicy = pickupPolicy;
  
 }
 get pickupPolicy() {
    return this._pickupPolicy;
  }
  
}

class HighSchool extends School {
 constructor(name,numberOfStudents,sportsTeams) {
   super(name, 'High',numberOfStudents);
   this._sportsTeams = sportsTeams;
  
 }
 get sportsTeams() {
    return this._sportsTeams;
  }
  
}


const lorraineHansbury = new PrimarySchool('Lorraine Hansbury',514,'Students must be picked up by a parent, guardian, or a family member over the age of 13.');

lorraineHansbury.quickFacts();

const sub = 
School.pickSubstituteTeacher(['Jamal Crawford', 'Lou Williams', 'J. R. Smith', 'James Harden', 'Jason Terry', 'Manu Ginobli']);
console.log(sub);


const alSmith = new HighSchool('Al E. Smith',415,['Baseball', 'Basketball', 'Volleyball', 'Track and Field']);

console.log(alSmith.sportsTeams);

#javascript

Build a Library

class Media {
  constructor(title) {
    this._title = title;
    this._isCheckedOut = false;
    this._ratings = [] ;
  }
  
  get title() {
    return this._title;
  }
  
  get isCheckedOut() {
    return this._isCheckedOut;
  }
  get ratings() {
    return this._ratings;
  }
  set isCheckedOut(value){
    this._isCheckedOut = value;
  }
  toggleCheckOutStatus(){
    this.isCheckedOut = !this.isCheckedOut;
  }
  
  takeVacationDays(daysOff) {
    this._remainingVacationDays -= daysOff;
  }
  getAverageRating(){
let ratingsSum = 
this.ratings.reduce((accumulator,rating) =>
accumulator + rating);
return ratingsSum/ this.ratings.length;
  }
  addRating(value){
    this.ratings.push(value);
  }
}

class Book extends Media {
 constructor(author,title,pages) {
   super(title);
   this._author = author;
   this._pages = pages;
 }
 get author() {
    return this._author;
  }
  get pages() {
    return this._pages;
  }
}
class Movie extends Media {
 constructor(director,title,runTime) {
   super(title);
   this._director = director;
   this._runTime = runTime;
 }
 get director() {
    return this._director;
  }
  get runTime() {
    return this._runTime;
  }
}

const historyOfEverything = new Book('Bill Bryson','A Short History of Nearly Everything',544);
historyOfEverything.toggleCheckOutStatus();
console.log(historyOfEverything.isCheckedOut);
historyOfEverything.addRating(4);
historyOfEverything.addRating(5);
historyOfEverything.addRating(5);


console.log(historyOfEverything.getAverageRating());

const speed = new Movie('Jan de Bont','Speed',116)
speed.toggleCheckOutStatus();
console.log(speed.isCheckedOut);
speed.addRating(1);
speed.addRating(1);
speed.addRating(5);
 console.log(speed.getAverageRating());

#javascript

knockout context extension

https://github.com/timstuyckens/chromeextensions-knockoutjs

#javascript

Static Methods

class HospitalEmployee {
  constructor(name) {
    this._name = name;
    this._remainingVacationDays = 20;
  }
  static generatePassword() {
    const randomNumber = Math.floor(Math.random()*5);
    return randomNumber;
  }
  
  get name() {
    return this._name;
  }
  
  get remainingVacationDays() {
    return this._remainingVacationDays;
  }
  
  takeVacationDays(daysOff) {
    this._remainingVacationDays -= daysOff;
  }
}

class Nurse extends HospitalEmployee {
  constructor(name, certifications) {
    super(name);
    this._certifications = certifications;
  } 
  
  get certifications() {
    return this._certifications;
  }
  
  addCertification(newCertification) {
    this.certifications.push(newCertification);
  }
}

const nurseOlynyk = new Nurse('Olynyk', ['Trauma','Pediatrics']);
nurseOlynyk.takeVacationDays(5);
console.log(nurseOlynyk.remainingVacationDays);
nurseOlynyk.addCertification('Genetics');
console.log(nurseOlynyk.certifications);

#javascript

Inheritance V

class HospitalEmployee {
  constructor(name) {
    this._name = name;
    this._remainingVacationDays = 20;
  }
  
  get name() {
    return this._name;
  }
  
  get remainingVacationDays() {
    return this._remainingVacationDays;
  }
  
  takeVacationDays(daysOff) {
    this._remainingVacationDays -= daysOff;
  }
}

class Nurse extends HospitalEmployee {
  constructor(name, certifications) {
    super(name);
    this._certifications = certifications;
  } 
  
  get certifications() {
    return this._certifications;
  }
  
  addCertification(newCertification) {
    this._certifications.push(newCertification);
  }
}

const nurseOlynyk = new Nurse('Olynyk', ['Trauma','Pediatrics']);
nurseOlynyk.takeVacationDays(5);
console.log(nurseOlynyk.remainingVacationDays);
nurseOlynyk.addCertification('Genetics');
console.log(nurseOlynyk.certifications);

#javascript

Inheritance IV

class HospitalEmployee {
  constructor(name) {
    this._name = name;
    this._remainingVacationDays = 20;
  }
  
  get name() {
    return this._name;
  }
  
  get remainingVacationDays() {
    return this._remainingVacationDays;
  }
  
  takeVacationDays(daysOff) {
    this._remainingVacationDays -= daysOff;
  }
}

class Nurse extends HospitalEmployee {
 constructor(name, certifications) {
   super(name);
   this._certifications = certifications;
 } 
}

const nurseOlynyk = new Nurse('Olynyk', ['Trauma','Pediatrics']);
nurseOlynyk.takeVacationDays(5);
console.log(nurseOlynyk.remainingVacationDays)

#javascript

Check if a string has the same amount of 'x's and 'o's. The method must return a boolean and be case insensitive. The string can contain any char.

function XO(str) {
  nbx = 0;
  nbo = 0;
  let array = str.split('');
  for(i = 0; i < array.length; i++) {
    if (array[i] == 'x' | array[i] == 'X') { nbx++; }
    if (array[i] == 'o' | array[i] == 'O') { nbo++; }
  }
  if (nbo == nbx && nbx == 0) { return true; }
  else if (nbo == nbx && nbx != 0) { return true; }
  else { return false; }
}

#javascript

Reversed Strings

function solution(str){
  return str.split('').reverse().join('');  
}

#javascript #jquery

Javascript/jQuery Run code if mobile screen

 if(window.matchMedia("(max-width: 620px)").matches){

	//Code Here
       
    } else{

	// Code Here
      
    }

#javascript

Inheritance III

class HospitalEmployee {
  constructor(name) {
    this._name = name;
    this._remainingVacationDays = 20;
  }
  
  get name() {
    return this._name;
  }
  
  get remainingVacationDays() {
    return this._remainingVacationDays;
  }
  
  takeVacationDays(daysOff) {
    this._remainingVacationDays -= daysOff;
  }
}

class Nurse extends HospitalEmployee {
  constructor(name,certifications) {
    super(name);
    //super(remainingVacationDays);
    this._certifications = certifications;
  }
}
const nurseOlynyk = new Nurse('Olynyk', ['Trauma', 'Pediatrics']); 
console.log(nurseOlynyk._certifications);

#javascript

Inheritance II

class HospitalEmployee {
  constructor(name) {
    this._name = name;
    this._remainingVacationDays = 20;
  }
 
  get name() {
    return this._name;
  }
 
  get remainingVacationDays() {
    return this._remainingVacationDays;
  }   
 
  takeVacationDays(daysOff) {
    this._remainingVacationDays -= daysOff;
  }
}

#javascript

Method Calls

class Surgeon {
  constructor(name, department) {
    this._name = name;
    this._department = department;
    this._remainingVacationDays = 20;
  }
  
  get name() {
    return this._name;
  }
  
  get department() {
    return this._department;
  }
  
  get remainingVacationDays() {
    return this._remainingVacationDays;
  }
  
  takeVacationDays(daysOff) {
    this._remainingVacationDays -= daysOff;
  }
}

const surgeonRomero = new Surgeon('Francisco Romero', 'Cardiovascular');
const surgeonJackson = new Surgeon('Ruth Jackson', 'Orthopedics');
console.log(surgeonRomero.name);

surgeonRomero.takeVacationDays(3);
console.log(surgeonRomero.remainingVacationDays)

#javascript

Getter

class Surgeon {
  constructor(name, department) {
    this._name = name;
    this._department = department;
    this._remainingVacationDays = 20;
  }
    get name() {
    return this._name;
  }
    get department() {
    return this._department;
  }
    get remainingVacationDays() {
    return this._remainingVacationDays;
  }
   takeVacationDays(daysOff) {
    this._remainingVacationDays -= daysOff;
  }



}


const surgeonRomero = new Surgeon('Francisco Romero', 'Cardiovascular');
const surgeonJackson = new Surgeon('Ruth Jackson', 'Orthopedics');

#javascript

Classes

class Surgeon {
  constructor(name, department) {
    this.name = name;
    this.department = department;
  }
}

const surgeonRomero = new Surgeon('Francisco Romero','Cardiovascular'); // Create new surgeon instance
console.log(surgeonRomero.name); 

const surgeonJackson = new Surgeon('Ruth Jackson','Orthopedics'); // Create new surgeon instance
console.log(surgeonJackson.name);

#javascript #jquery

Javascript/jQuery Image load when scroll

document.addEventListener("DOMContentLoaded", function()
        {
            $("img").each(function()
            {
                $(this).attr("data-src",$(this).attr("src"));
                $(this).attr("src",'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
            });
            var $lazy_elements = $('img');
            var $window = $(window);
            function check_if_in_view()
            {
                var window_height = $window.height();
                var window_top_position = $window.scrollTop();
                var window_bottom_position = (window_top_position + window_height);
                $.each($lazy_elements, function()
                {
                    var $lazy_element = $(this);
                    var lazy_element_height = $lazy_element.outerHeight();
                    var lazy_element_top_position = $lazy_element.offset().top;
                    var lazy_element_bottom_position = (lazy_element_top_position + lazy_element_height);
                    //check to see if this current container is within viewport
                    if ((lazy_element_bottom_position >= window_top_position) && (lazy_element_top_position <= window_bottom_position))
                    {
                        if($lazy_element.attr('data-src'))
                        {
                            $lazy_element.attr("src",$lazy_element.attr('data-src'));
                        }
                    }
                });
            }
            $window.on('scroll resize', check_if_in_view);
            $window.trigger('scroll');
});

#javascript #jquery

Trigger event when user scroll to specific element - with jQuery

jQuery(window).scroll(function() {
   var hT = jQuery('div#shopify-section-template--16081634984157__165209878371807727').offset().top,
       hH = jQuery('div#shopify-section-template--16081634984157__165209878371807727').outerHeight(),
       wH = jQuery(window).height(),
       wS = jQuery(this).scrollTop();
   if (wS > (hT+hH-wH)){
       console.log('H1 on the view!');
   }
});

#javascript

HTML Drag and Drop Example

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

#javascript

find() returns just a single instance (this might be an object or item). If several matches exist, it returns the first match – otherwise, it returns undefined.

const Bruno = users.find((person) => person.firstName === "Bruno");

console.log(Bruno);

#javascript

Filter() provides a new array depending on certain criteria. Unlike map(), it can alter the size of the new array

// for young people
const youngPeople = users.filter((person) => {
  return person.age <= 15;
});

//for senior people
const seniorPeople = users.filter((person) => person.age >= 50);

console.log(seniorPeople);
console.log(youngPeople);

#javascript

Map() in JavaScript

let singleUser = users.map((user)=>{
  //let's add the firstname and lastname together
  let fullName = user.firstName + ' ' + user.lastName;
  return `
    <h3 class='name'>${fullName}</h3>
    <p class="age">${user.age}</p>
  `
});

#javascript

There are 3 states of the Promise object: Pending: by default, this is the Initial State, before the Promise succeeds or fails. Resolved: Completed Promise Rejected: Failed Promise

function addName (time, name){
  return new Promise ((resolve, reject) => {
    if(name){
      setTimeout(()=>{
        console.log(name)
        resolve();
      },time)
    }else{
      reject('No such name');
    }
  })
}

addName(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

#javascript

Promises have two parameters, one for success (resolve) and one for failure (reject). Each has a condition that must be satisfied in order for the Promise to be resolved – otherwise, it will be rejected:

const promise = new Promise((resolve, reject) => {  
    let condition;
    
    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

#javascript

getLocation( ) + error handling

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

</body>
</html>

#javascript #react.js

Passing a ref as props

// A Modal with input in it, that receives focus when it is mounted and displayed on screen

// child component
import {useEffect} from "react"

export const Modal =({forwardedRef}) =>{
  useEffect(()=> {
    // adding the focus() to the ref when component is mounting
    forwardedRef.current?.focus()
  },[forwardedRef])

  return(
    <div>
      <label htmlFor="email">Add your email:</label>
      <input type="email" name="email" id="email" ref={forwardedRef}/>
    </div>
  )
}

// parent component
import {useRef, useState} from "react"
import {Modal} from "./Modal"

export default function App() {
  const [isModalOpened, setIsModalOpened] = useState(false)
  const inputRef = useRef()

  function handleModal(){
    setIsModalOpened(!isModalOpened)
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button type="button" onClick={handleModal}>
  		{isModalOpened === true ? "Close modal" : "Open modal"}
	</button>

      {isModalOpened && <Modal forwardedRef={inputRef}/>}
    </div>
  );
}

// Parent component will receive as props the values or functions set for the ref on the child component

#javascript #react.js

Passing ref as props, using forwardRef and useRef

// child component
import {forwardRef} from "react"

export const Button = forwardRef(({...props}, ref) => {
return <button ref={ref} id="buttonId-js" {...props}>Button</button>
})

// parent component
import {useRef} from "react"
import { Button } from "./Button";

export default function App() {
const buttonRef = useRef()
return (
<div className="App">
    <h1>Hello CodeSandbox</h1>
    <h2>Start editing to see some magic happen!</h2>
    <Button ref={buttonRef} onClick={()=> console.log(buttonRef.current.id)}
        />
</div>
);
}

// buttonRef.current gives access nodes and DOM, allowing to change the component
// useRef should be used in uncontrolled components - those ones that are not handled by React states or handle functions

#javascript

Video with some JavaScript code

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br><br>
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML video.
  </video>
</div> 

<script> 
var myVideo = document.getElementById("video1"); 

function playPause() { 
  if (myVideo.paused) 
    myVideo.play(); 
  else 
    myVideo.pause(); 
} 

function makeBig() { 
    myVideo.width = 560; 
} 

function makeSmall() { 
    myVideo.width = 320; 
} 

function makeNormal() { 
    myVideo.width = 420; 
} 
</script> 

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

#javascript

Date Set

'01/Jan/'||substr(:oarsdate,8,2)

#javascript

javascript - Setting query string using Fetch GET request - Stack Overflow

// encode to scape spaces
const esc = encodeURIComponent;
const url = 'https://maps.googleapis.com/maps/api/geocode/json?';
const params = { 
    key: "asdkfñlaskdGE",
    address: "evergreen avenue",
    city: "New York"
};
// this line takes the params object and builds the query string
const query = Object.keys(params).map(k => `${esc(k)}=${esc(params[k])}`).join('&')
const res = await fetch(url+query);
const googleResponse = await res.json()

#javascript

Create a function with 2 arguments that returns an array of the first (n) multiples of (x).

function countBy(x, n) {
  let z = [];
  for(i = 1; i <= n; i++) {
    z.push(x * i);
  }
  return z;
}

#javascript

Type of Loops

FOR LOOPS
for (inital expression; condition; increment) {
statements
}
use (i)for index
for (let i = 10; i >= 1; i--) {
    if (i % 2 !== 2) console.log(i)
}
 

FOR IN LOOPS
const device = {
    brand: 'Acer',
    model: 'TMP12-322',
    specs: {
        ram: 8,
        rom: 256
    }
}
for (key in device.specs) {
    console.log(key, device.specs[key])
}

// LOOP CONTROL
for (let i = 1; i <= 10; i++) {
    if (i == 5)
        // the counting will stop less than 5
        break;
    console.log(i)
}

#javascript #html

Tic Tac Toe javascript. How to store player wins and to alert if there is a tie? - Stack Overflow

<html>
<title>Tic Tac Toe</title>
<head>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script type="text/javascript" src="js/app.js"></script>
</head>
<body onload="startGame();">
  <h1>Tic Tac Toe</h1>
  <h2>By Irsyad</h2>
  <div id ="message"><h3> messages will go here<h3></div>
  <div>
    <a href="javascript:startGame();">Restart</a>
  </div>
  <table>
    <tr>
      <td id="s1" class="square" onclick="nextMove(this);"></td>
      <td id="s2" class="square" onclick="nextMove(this);"></td>
      <td id="s3" class="square" onclick="nextMove(this);"></td>
    </tr>
    <tr>
      <td id="s4" class="square" onclick="nextMove(this);"></td>
      <td id="s5" class="square" onclick="nextMove(this);"></td>
      <td id="s6" class="square" onclick="nextMove(this);"></td>
    </tr>
    <tr>
      <td id="s7" class="square" onclick="nextMove(this);"></td>
      <td id="s8" class="square" onclick="nextMove(this);"></td>
      <td id="s9" class="square" onclick="nextMove(this);"></td>
    </tr>
  </table>
</body>
</html>

#javascript

Create an array sequence from 1 to N in a single line in JavaScript | Techie Delight

https://www.techiedelight.com/create-array-from-1-n-javascript/

#html #javascript

Hide elements onclick - getElementsByClassName("")

<!DOCTYPE html>
<html>
<body>

<h2>Use of The class Attribute in JavaScript</h2>
<p>Click the button to hide all elements with class name "city":</p>
<button onclick="myFunction()">Hide elements</button>

<p>Click the button to show all elements with class name "city":</p>
<button onclick="myFunction2()">Show elements</button>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}

function myFunction2() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "block";
  }
}
</script>

</body>
</html>

#javascript

formatting - How to print a number with commas as thousands separators in JavaScript - Stack Overflow

function numberWithCommas(x) {
    return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}

function test(x, expect) {
    const result = numberWithCommas(x);
    const pass = result === expect;
    console.log(`${pass ? "✓" : "ERROR ====>"} ${x} => ${result}`);
    return pass;
}

let failures = 0;
failures += !test(0,               "0");
failures += !test(0.123456,        "0.123456");
failures += !test(100,             "100");
failures += !test(100.123456,      "100.123456");
failures += !test(1000,            "1,000");
failures += !test(1000.123456,     "1,000.123456");
failures += !test(10000,           "10,000");
failures += !test(10000.123456,    "10,000.123456");
failures += !test(100000,          "100,000");
failures += !test(100000.123456,   "100,000.123456");
failures += !test(1000000,         "1,000,000");
failures += !test(1000000.123456,  "1,000,000.123456");
failures += !test(10000000,        "10,000,000");
failures += !test(10000000.123456, "10,000,000.123456");
if (failures) {
    console.log(`${failures} test(s) failed`);
} else {
    console.log("All tests passed");
}

#javascript

date - Check if year is leap year in javascript - Stack Overflow

function leapYear(year)
{
  return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
}

#javascript #html

Format Number As Decimal

<p>
  {{ numberVariable | number: '1.0-2' }}
 </p>

#php #javascript #html

Scrolling tab

 $(document).on("scroll", onScroll);

        //smoothscroll
        $('.page-template-cannabis-101 .c-secondary-nav a[href^="#"]').on('click', function (e) {
            // e.preventDefault();
            // $(document).off("scroll");

            // $('.page-template-cannabis-101 .c-secondary-nav a').each(function () {
            //     $(this).removeClass('active');
            // })
            // $(this).addClass('active');

            // var target = this.hash,
            //     menu = target;
            // $target = $(target);
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top + 2
            }, 500, 'swing', function () {
                window.location.hash = target;
                $(document).on("scroll", onScroll);
            });
        });

#javascript #nodejs

Each combination of matrix

arr.reduce((pre, cur)=> [].concat.apply([], pre.map(t => cur.map(g => t + g))));

#javascript #nodejs

Stream write file

const file = bucket.file(`${folderName}/${fileName}`)
const passThroughStream = new stream.PassThrough()
passThroughStream.write(fileTitle)
passThroughStream.write(fileHeader)
passThroughStream.write(convertArrayToCSV(accounts.map(mapRecords)))
passThroughStream.end()

passThroughStream
  .pipe(file.createWriteStream())
  .on('error', (err) => {
  console.error(makeLogEntry(err))
})
  .on('finish', () => {
  console.log('writed')
})

#javascript

Validate an email address

const emailIsValid = (email) => {
  if (!(typeof email === "string" || email instanceof String)) {
    console.error(`string expected, ${typeof email} provided`)
    return false
  }
  const expression = /\S+@\S+\.\S+/
  return expression.test(email)
}

emailIsValid("somebody@somewhere.com") // true
emailIsValid("nobody@nowhere") // false

#javascript

Snake case to camel case

const snakeToCamelCase = (text) => {
  if (!(typeof text === "string" || text instanceof String)) {
    console.error(`string expected, ${typeof text} provided`)
    return text
  }
  text
    .toLowerCase()
    .replace(/([-_][a-z])/g, group =>
      group
        .toUpperCase()
        .replace("-", "")
        .replace("_", "")
    )
}

snakeToCamelCase("snake_case_to_camel_case") // snakeCaseToCamelCase

#javascript

Convert camel case to snake case

const camelToSnakeCase = (text) => {
  if (!(typeof text === "string" || text instanceof String)) {
    console.error(`string expected, ${typeof text} provided`)
    return text
  }
  return text.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`)
}

camelToSnakeCase("camelCaseToSnakeCase") // camel_case_to_snake_case

#javascript

Slugify a string

const slugify = (text) => {
  if (!(typeof text === "string" || text instanceof String)) {
    console.error(`string expected, ${typeof str} provided`)
    return str
  }
  return text.toLowerCase()
    .replace(/ /g, "-")
    .replace(/[^\w-]+/g, "")
}

slugify("Hello, everyone!") // hello-everyone

#javascript

Measure the performance/time taken of a function

const measureTime = (func, label = "default") => {
  if (typeof func !== "function") {
    console.error(`func must be a valid function, ${typeof func} provided`)
    return
  }
  console.time(label)
  func()
  console.timeEnd(label)
}

measureTime("findPeople", someExpensiveFindPeopleFunction)
// findPeople: 13426.336181640625ms

#javascript

Debounce (or delay) a function

const debounce = (func, timeout = 2500) => {
  if (typeof func !== "function") {
    console.error(`func must be a valid function, ${typeof func} provided`)
    return
  }
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => { 
      func.apply(this, args) 
    }, timeout)
  }  
}

#javascript

Remove duplicates from an array

const removeDuplicates = (arr) => {
  if (!Array.isArray(arr)) {
    console.error(`array expected, ${typeof arr} provided`)
    return
  }
  return [...new Set(arr)]
}

removeDuplicates(["Tom", "Simon", "Tom", "Sarah"])
// ["Tom", "Simon", "Sarah"]

#javascript

Shorten a string with ellipsis

const shorten = (text, length = 10, ellipsisCount = 3) => {
  if (!(typeof text === "string" || text instanceof String)) {
    console.error(`expecting a string, ${typeof text} provided`)
    return ""
  }
  if (isNaN(length) || isNaN(ellipsisCount)) {
    console.error("length and ellipsisCount must be valid numbers")
    return
  }
  
  if (text.length <= length) {
    return text
  }
  const ellipsis = Array.from(Array(ellipsisCount)).map(() => ".").join("")
  return `${text.substr(0, length)}${ellipsis}`
}

shorten("I am some text", 4, 2) // I am..

#javascript

Generate a random number

const getRandomNumberInRange = (lower = 0, upper = 10) => {
  if (isNaN(lower) || isNaN(upper)) {
    console.error("lower and upper must be valid numbers")
    return
  }
  lower = Math.ceil(lower)
  upper = Math.floor(upper)
  return Math.floor(Math.random() * (upper - lower + 1)) + lower
}

#javascript

Do something x times

const times = (times, func) => {
  if (isNaN(times)) {
    console.error("times to run must be specified")
    return
  }
  if (typeof func !== "function") {
    console.error(`func must be a valid function, ${typeof func} provided`)
    return
  }
  Array.from(Array(times)).forEach(() => {
    func()
  })
}

times(3, () => console.log("hello"))

#javascript

Get all unique values in a JavaScript array (remove duplicates) - Stack Overflow

x --> item in array
i --> index of item
a --> array reference, (in this case "list")

#javascript

Get all unique values in a JavaScript array (remove duplicates) - Stack Overflow

var myArray = ['a', 1, 'a', 2, '1'];

let unique = [...new Set(myArray)];

console.log(unique); // unique is ['a', 1, 2, '1']

#javascript

Get all unique values in a JavaScript array (remove duplicates) - Stack Overflow

function uniqueArray4(a) {
  return [...new Set(a)];
}

#javascript

Get all unique values in a JavaScript array (remove duplicates) - Stack Overflow

function uniqueArray3(a) {
  function onlyUnique(value, index, self) { 
      return self.indexOf(value) === index;
  }

  // usage
  var unique = a.filter( onlyUnique ); // returns ['a', 1, 2, '1']

  return unique;
}

#javascript

Get all unique values in a JavaScript array (remove duplicates) - Stack Overflow

function uniqueArray2(arr) {
    var a = [];
    for (var i=0, l=arr.length; i<l; i++)
        if (a.indexOf(arr[i]) === -1 && arr[i] !== '')
            a.push(arr[i]);
    return a;
}

#javascript

Get all unique values in a JavaScript array (remove duplicates) - Stack Overflow

function uniqueArray1( ar ) {
  var j = {};

  ar.forEach( function(v) {
    j[v+ '::' + typeof v] = v;
  });

  return Object.keys(j).map(function(v){
    return j[v];
  });
}

#javascript

Text_morphing

https://codepen.io/alvarotrigo/pen/eYEqPZa

#javascript #string #word #count

Count the no. of words

let words = input.match(/(\w+)/g).length

#javascript

Return menucode

SELECT  itemID, 
      mnu_code,
      bl.ID
      FROM lu_mnu_code lum
      LEFT OUTER JOIN bl ON bl.ID = lum.itemID
WHERE :MENUCODE = lum.mnu_code;

#javascript

adding days to existing date property mongodb

db.collection.updateMany(
  { date : { $exists : true } },
  [{ $set: { date: { $dateAdd: { startDate: "$date", unit: "day", amount: 1 } } } }]
)

#javascript

07-08-2022 JS

var add = (a,b) => { return a+b }; 
class Student {
    constructor(name,age,sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    getDetails() {
        return `${this.name}, ${this.age}, ${this.sex}`;
    }
}

var obj = {
    fun : function() {
        console.log('fun');
    }
}

var s= new Student('samee', 29, 'Male');
console.log(typeof(obj));

var scope = "global scope";
function check() 
{
    var scope = "local scope"; 
    function f() 
    { 
         return scope; 
    }
    return f();
}

console.log("A" - "B")

for(let i=0;i<3;i++) {
  setTimeout(() => console.log(i), 0);  
}

var t = check()
console.log(t);

#javascript

Suivi des conversions - Pixel Meta

fbq('track', 'Purchase', {currency: "USD", value: 30.00});

#javascript

Suivi des conversions - Pixel Meta

fbq('track', 'Purchase', {currency: "USD", value: 30.00});

#javascript

v.simple fetch

fetch('fetching here.json or fetching url here')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .then((json) => initialize(json))
  .catch((err) => console.error(`Fetch problem: ${err.message}`));

#javascript

Convert CSV to JSON in JavaScript | Delft Stack

const fs = require("fs");
csv = fs.readFileSync("username.csv")

const array = csv.toString().split("\n");

/* Store the converted result into an array */
const csvToJsonResult = [];

/* Store the CSV column headers into seprate variable */
const headers = array[0].split(", ")

/* Iterate over the remaning data rows */
for (let i = 1; i < array.length - 1; i++) {
/* Empty object to store result in key value pair */
const jsonObject = {}
/* Store the current array element */
const currentArrayString = array[i]
let string = ''

let quoteFlag = 0
for (let character of currentArrayString) {
	if (character === '"' && quoteFlag === 0) {
	    quoteFlag = 1
	}
	else if (character === '"' && quoteFlag == 1) quoteFlag = 0
	if (character === ', ' && quoteFlag === 0) character = '|'
	if (character !== '"') string += character
}

let jsonProperties = string.split("|")

for (let j in headers) {
	if (jsonProperties[j].includes(", ")) {
	jsonObject[headers[j]] = jsonProperties[j]
		.split(", ").map(item => item.trim())
	}
	else jsonObject[headers[j]] = jsonProperties[j]
}
/* Push the genearted JSON object to resultant array */
csvToJsonResult.push(jsonObject)
}
/* Convert the final array to JSON */
const json = JSON.stringify(csvToJsonResult);
console.log(json)

#javascript #react.js #next.js

Change Navbar Style With the Scroll in a Next.js Website ← Techomoro

// components/Navigation.js

import { useEffect, useState } from "react";

export default function Navigation() {
  
  const [clientWindowHeight, setClientWindowHeight] = useState("");

  const [backgroundTransparacy, setBackgroundTransparacy] = useState(0);
  const [padding, setPadding] = useState(30);
  const [boxShadow, setBoxShadow] = useState(0);

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  });

  const handleScroll = () => {
    setClientWindowHeight(window.scrollY);
  };

  useEffect(() => {
    let backgroundTransparacyVar = clientWindowHeight / 600;

    if (backgroundTransparacyVar < 1) {
      let paddingVar = 30 - backgroundTransparacyVar * 20;
      let boxShadowVar = backgroundTransparacyVar * 0.1;
      setBackgroundTransparacy(backgroundTransparacyVar);
      setPadding(paddingVar);
      setBoxShadow(boxShadowVar);
    }
  }, [clientWindowHeight]);

  return (
    <nav
      class="navbar navbar-expand-lg navbar-light fixed-top"
      style={{
        background: `rgba(255, 255, 255, ${backgroundTransparacy})`,
        padding: `${padding}px 0px`,
        boxShadow: `rgb(0 0 0 / ${boxShadow}) 0px 0px 20px 6px`,
      }}
    >
      <div className="container">
        <a class="navbar-brand" href="#">
          Techomoro
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarText"
          aria-controls="navbarText"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">
                Home
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                About
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                Contact
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
}

#cs #javascript

conditional Case

public static int DiceSum4(IEnumerable<object> values)
{
    var sum = 0;
    foreach (var item in values)
    {
        switch (item)
        {
            case 0:
                break;
            case int val:
                sum += val;
                break;
            case IEnumerable<object> subList when subList.Any():
                sum += DiceSum4(subList);
                break;
            case IEnumerable<object> subList:
                break;
            case null:
                break;
            default:
                throw new InvalidOperationException("unknown item type");
        }
    }
    return sum;
}

#javascript #react.js

React + Webpack + Babel

// React with webpack and babel configuration, to support Sass and SVG files
// npm init to initialize the project, then install packages 
// set project structure similar to CRA 
// index.jsx and App.jsx following same of CRA

// package.json
{
  "name": "something project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "npm run start & npx webpack serve",
    "build": "cross-env NODE_ENV=production webpack",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.18.10",
    "@babel/core": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "@babel/preset-react": "^7.18.6",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
    "babel-loader": "^8.2.5",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.1",
    "dotenv": "^16.0.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "react-refresh": "^0.14.0",
    "sass": "^1.54.1",
    "sass-loader": "^13.0.2",
    "style-loader": "^3.3.1",
    "svg-url-loader": "^7.1.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }
}


//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const isDevelopment = process.env.NODE_ENV !== "production";

module.exports = {
  mode: isDevelopment ? "development" : "production",
  devtool: isDevelopment ? "eval-source-map" : "source-map",
  entry: path.resolve(__dirname, "src", "index.jsx"),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            plugins: [
              isDevelopment && require.resolve("react-refresh/babel"),
            ].filter(Boolean),
          },
        },
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: "svg-url-loader",
            options: {
              limit: 10000,
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "images/[hash]-[name].[ext]",
            },
          },
        ],
      },
    ],
  },
  plugins: [
    isDevelopment && new ReactRefreshWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
    }),
  ].filter(Boolean),
  devServer: {
    // contentBase: path.join(__dirname, "public") // renamed to 'static'
    static: path.join(__dirname, "public"),
    hot: true,
  },
};

// babel.config.js
module.exports = {
  presets: [
    "@babel/preset-env",
    ["@babel/preset-react", { runtime: "automatic" }],
  ],
};

#javascript #react #css #button #hover #dropdown

Hoverable dropdown

//HTML
<div class='dropdown'>
          <Link id='product' className='every' to='/products'>OUR PRODUCTS</Link>
           <div class='dropdown-content'>
            <Link to='autocadd'>AutoCadd</Link>
            <Link to='techset'>Techset</Link>
            <Link to='Endorse'>Endorse</Link>
           </div>
          </div>

//CSS

.dropdown{
    position: relative;
    display: inline-block;
}
.dropdown-content{
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content>*{
 color: black;
 padding: 12px 6px;
text-decoration: none;
 display: block;
}

.dropdown:hover .dropdown-content{
    display: block;
}
.dropdown-content>*:hover{
    background-color: #ddd;
}

#javascript

reactjs - How to create dynamic styled component? - Stack Overflow

import styled from 'react-emotion'

const StyledComponent = styled(({tag, children, ...props}) => React.createElement(tag, props, children))`
    // some css styles
`

#javascript #react.js

Enum + Union Types

export enum KycModeKind {
  VIEW = 'VIEW',
  EDIT = 'EDIT',
}

export type KycMode = KycModeKind.VIEW | KycModeKind.EDIT;

#javascript

just console log but with timeout

for(var i=0;i<=5;i++){
setTimeout(function(){
    console.log(i)
},i*1000)}

#javascript

Frontend pagination with vanilla JavaScript - OpenJavaScript.info

const content = document.querySelector('#content-page');
const nav = document.querySelector('#nav');

let pageIndex = 0; // Starts at page 0
let itemsPerPage = 2; // 2 items per page
loadItems() // Call the load items function

function loadItems() {
  // Clear any existing content
  content.innerHTML = "";
    // Loop set to start at pageIndex*itemsPerPage and finish after one itemsPerPage 
    for (i=pageIndex*itemsPerPage; i<((pageIndex*itemsPerPage)+itemsPerPage); i++) {
      // Write content into new element
      const item = document.createElement('div');
      item.innerHTML =  `
      <div>
        <img src="${items[i].src}" loading="lazy"/>
      </div>
      <div>
        <span>${items[i].desc}</span>
      </div>
      `
      // Append to the DOM when finished
      content.append(item);
  }
  loadPageNav() // Update page navigation after new items are loaded
}

function loadPageNav() {
  // Clear nav content before updating
  nav.innerHTML = "";
  for (i=0; i<(items.length/itemsPerPage); i++) {
    // Create span for each page value
    let span = document.createElement('span');
    span.innerHTML = i+1;
    // Add event listener to each that will update pageIndex and then call loadItems
    span.addEventListener('click', (e) => {
      pageIndex = e.target.innerHTML-1;
      loadItems();
    });
    // Add styling if current page in navigation
    if (i === pageIndex) {
      span.style.fontSize = "1.7rem";
    }
    // Append each span inside navigation elements
    nav.append(span);
  }
}

#javascript

reactjs - How to tell if a website is using next.js? - Stack Overflow

console.log({
  NextJSVersion: window.next?.version,
  pageProps: window.__NEXT_DATA__?.props?.pageProps
})

#javascript

error handling - Is there a way to add try-catch to every function in Javascript? - Stack Overflow

const tryCatchWrapper = (executable) => async (...args) => {
    try {
        const result = await executable(...args);
        return result;
    } catch (error) {
        // use any custom handler here
       error.message = `[${executable.name}] - ${error.message}`;
       error.data = {...error.data, input_args: args}
       throw error;
    }
}

#javascript

reactjs - How to destructure useContext hook in Typescript with null default value? - Stack Overflow

function UserResults() {
  const appContext = useContext(GithubContext)

  const { users, loading, fetchUsers } = appContext
  

  useEffect(() => {
    fetchUsers()
  }, [fetchUsers])

  if (!loading) {
    return (
      <div className='grid grid-cols-1 gap-8 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2'>
        {users.map((user : User) => (
          <UserItem key={user.id} user={user} />
        ))}
      </div>
    )
  } else {
    return <Spinner />
  }
}

#javascript

reactjs - Onchange is not working when editing cell of material-table in react.js - Stack Overflow

const inputChangeHandler = (e, id) => {
  let result = data.map((data, id) =>{
   return data.id == id ? {...data, name:e.target.value} : {...data}
  })
   setdata(result)

}
//then 
onChange={(e) =>inputChangeHandler(e, data.id)}

#javascript

Conditonal Statements

IF STATEMENT
if (expressions) {
  Statment(s) to be executeed if expression is true
}

IF AND ELSE STATEMENT
if and else statement (expression) {
    Statement(s) to be executed if expression is true
    } else {
    Statement(s) to be executed if expression is false
    }

IF AND ELSE IF STATEMENT
if (expression 1) {
Statement(s) to be executed if expression 1 is true
} else if (expression 2) {
Statement(s) to be executed if expression 2 is true
} else if (expression 3) {
Statement(s) to be executed if expression 3 is true
} else {
Statement(s) to be executed if no expression is true
}

SWITCH STATEMENT
  switch (expression) {
case condition 1: statement(s)
break;

case condition 2: statement(s)
break;
and so on...

case condition n: statement(s)
break;

default: statement(s) 
}

WHILE STATEMENT
while (expression) {
Statement(s) to be executed if expression is true
}
example:
function score(score) {
    while (score < 20) {
        console.log("You failed nigga", score);
        score++;
    }
}

FOR LOOP STATEMENT
for (initialization; test condition; iteration statement) {
Statement(s) to be executed if test condition is true
}	
example:
for (let i = 10; i >= 1; i--) {
    if (i % 2 !== 2) console.log(i)
}

#javascript #css #html

Logos slider - slck - auto screen width

/**
*
* Section: Logos
*
*/

jQuery(document).ready( $ => {

  // Init
  initLogosSlider('.section-logos__list', '.section-logos__listItem', '.section-logos__wrapper');

  $(window).on('resize', debounce(function() {
    initLogosSlider('.section-logos__list', '.section-logos__listItem', '.section-logos__wrapper');
  }));

  // Init functions
  function initLogosSlider(sliderClassName, slidesClassName, sliderWrapperClassName) {
    
		if (!$(sliderClassName).length) return;

    // For each slider
    $(sliderClassName).each( function() {
      
      let slider = $(this);
      let wrapper = $(slider).parents(sliderWrapperClassName); // Slider wrapper

      if ( slidesWidthSum(slider) <= $(slider).outerWidth() && $(slider).hasClass("slick-initialized")) {
        $(wrapper).removeClass('is-slider');
        $(slider).slick("unslick");
      }
  
      if ( slidesWidthSum(slider) > $(slider).outerWidth() ) {
        if (!$(slider).hasClass("slick-initialized")) {
          
          $(wrapper).addClass('is-slider');

          let logosTotalCount = $(slider).find(slidesClassName).length;
          let defaultSlides1200 = 5;
          let defaultSlides992 = 4;
          let defaultSlides768 = 2;
          let defaultSlides561 = 1;

          if (logosTotalCount <= defaultSlides1200) {
            defaultSlides1200 -= 1;
          }

          if (logosTotalCount <= defaultSlides992) {
            defaultSlides992 -= 1;
          }

          if (logosTotalCount <= defaultSlides768) {
            defaultSlides768 -= 1;
          }
  
          $(slider).slick({
            infinite: true,
            slidesToShow: 6,
            slidesToScroll: 6,
            dots: true,
            arrows: true,
            autoplay: false,
            prevArrow: $(wrapper).find('.section-logos__arrow.slick-prev')[0],
            nextArrow: $(wrapper).find('.section-logos__arrow.slick-next')[0],
            responsive: [
              {
                breakpoint: 1200,
                settings: {
                  slidesToShow: defaultSlides1200,
                  slidesToScroll: defaultSlides1200,
                }
              },
              {
                breakpoint: 992,
                settings: {
                  slidesToShow: defaultSlides992,
                  slidesToScroll: defaultSlides992,
                }
              },
              {
                breakpoint: 768,
                settings: {
                  slidesToShow: defaultSlides768,
                  slidesToScroll: defaultSlides768,
                }
              },
              {
                breakpoint: 561,
                settings: {
                  slidesToShow: defaultSlides561,
                  slidesToScroll: defaultSlides561,
                }
              },
            ]
          });
  
        }
      }

    });

    // Helper
    function slidesWidthSum(slider) {
      let slidesWidth = 0;
      let totalGap = parseInt( $(slider).css('gap') ) * ( $(slider).find(`${slidesClassName}:not(.slick-cloned)` ).length - 1);

      $(slider).find(`${slidesClassName}:not(.slick-cloned)`).each(function() {
        slidesWidth += $(this).outerWidth();
      });

      return slidesWidth + totalGap;
    }
	}

  // Helper
  function debounce(func){
    var timer;
    return function(event){
      if(timer) clearTimeout(timer);
      timer = setTimeout(func, 150, event);
    };
  }
})



/**
 *
 * Section: Logos
 *
 */

.section-logos {
	padding: 70px 0;
  background-color: var(--bg-color);

  &, &[data-theme="white"] {
		--bg-color: #fff;
	}

	&[data-theme="grey"] {
		--bg-color: rgba(240, 243, 249, 0.5);
	}

	.container {
    @media (min-width: 1200px) {
      width: 1118px;
    }

    @media (min-width: 1440px) {
      width: 1278px;
    }

    @media (min-width: 1600px) {
      width: 1336px;
    }

    @media (min-width: 992px) and (max-width: 1199px) {
      width: 988px;
    }

		@media (max-width: 767px) {
      max-width: 500px;
			padding-left: 20px;
			padding-right: 20px;
		}
	}

  &__inner {
    max-width: 1078px;
    margin: 0 auto;

    @media (max-width: 1199px) {
      max-width: 896px;
    }

    @media (max-width: 560px) {
      max-width: calc(100% - 70px);
    }
  }

  &__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 37px;

    border-bottom: 1px solid #D4D3D7;

    @media (max-width: 767px) {
      flex-direction: column;
      padding-bottom: 32px;
      text-align: center;
    }
  }

	&__title {
		margin-top: 0;
		margin-bottom: 0;

		font-family: var(--font-family-primary);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    color: var(--color-dark2);
	}

  &__wrapper {
    padding-top: 40px;
    position: relative;

    @media (max-width: 767px) {
      padding-top: 32px;
    }

    &.is-slider {
      .section-logos__list {
        display: block;

        &Item {
          margin: 0 17px;
          min-width: unset;
        }
      }

      .section-logos__arrow {
        display: block;
      }
    }

    .slick-dots {
      --slick-dots-size: 12px;
      --slick-dots-background: #D4D3D7;
      --slick-dots-background-active: var(--color-dark2);
      --slick-dots-margin: 0 8px;
    }
  }

  &__arrow {
    --arrow-size: 32px;
    --arrow-offset: 35px;

    width: var(--arrow-size);
    height: var(--arrow-size);
    display: none;
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    @media (max-width: 1279px) {
      --arrow-offset: 15px;
    }

    @media (max-width: 1199px) {
      --arrow-offset: 10px;
    }
    
    &.slick-prev {
      right: 100%;
      margin-right: var(--arrow-offset);
      background-image: url('../images/sections/logos/arrow-prev.svg');
    }

    &.slick-next {
      left: 100%;
      margin-left: var(--arrow-offset);
      background-image: url('../images/sections/logos/arrow-next.svg');
    }
  }

	&__list {
		display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 35px;

		&Item {
      --logo-wrapper-width: 150px;
      --logo-wrapper-height: 50px;

			min-width: var(--logo-wrapper-width);
			min-height: var(--logo-wrapper-height);
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
      }
    }
	}
}

<section class="section-logos" data-theme="grey">
      <div class="container">
        <div class="section-logos__inner">
          <div class="section-logos__header">
            <h2 class="section-logos__title">Trusted by 1,800+ customers</h2>

            <a href="#" class="moreButton">
              Learn More
              <span class="moreButton-icon">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2 6H10" stroke="var(--more-button-color)" stroke-width="4" stroke-linecap="round"/>
                  <path d="M8 2L12 6L8 10" stroke="var(--more-button-color)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
            </a>
          </div>

          <div class="section-logos__wrapper">
            <button class="section-logos__arrow slick-prev"></button>
            <button class="section-logos__arrow slick-next"></button>

            <div class="section-logos__list">
              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/payoneer.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/masterclass.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/monday.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/lufthansa.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/adobe.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/capgemini.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/capgemini.svg" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

#javascript #react

Toggle in js

setTheme = () => {
    let element = document.getElementById('doc');
    // element.setAttribute('class','dark');
    element.classList.toggle('dark');
}

  render() {
    return (
      <div id='doc' class='light'>
        <h1>Hey</h1>
        <button id='btn' onClick={this.setTheme}>Click</button>
      </div>
    )
  }

#javascript

javascript - Sorting a HTML table with Array#sort - Stack Overflow

let table = document.getElementById("table1");
let trs = table.rows;

Array.from(trs)
     .sort((a, b) => a.cells[0].textContent - b.cells[0].textContent)
     .forEach(tr => table.appendChild(tr));

#javascript

How to verify when multiple images have been loaded in JavaScript | Our Code World

// Create the flag variables (counter and total of images)
var Counter = 0;
var TotalImages = 2;

// Create an instance of your images
var Image1 = new Image();
var Image2 = new Image();

// Store the images that were not correctly loaded inside an array to show later
var notLoadedImages = [];

// The onload callback is triggered everytime an image is loaded
var onloadCallback = function(){
    // Increment the counter
    Counter++;

    // Verify if the counter is less than the number of images
    if(Counter < TotalImages){
        return;
    }

    // Trigger the final callback if is the last img
    allLoadedCallback();
};

// The onerror callback is triggered everytime an image couldn't be loaded
var onerrorCallback = function(){
    // Increment the counter
    Counter++;
    
    // Add the current image to the list of not loaded images
    notLoadedImages.push(this);

    // Verify if the counter is less than the number of images
    if(Counter < TotalImages){
        return;
    }

    // Trigger the final callback if is the last img
    allLoadedCallback();
};

// The callback that is executed when all the images have been loaded or not
var allLoadedCallback = function(){
    console.log("Atention, the following images were not loaded ", notLoadedImages);
};

// Attach onload callbacks
Image1.onload = onloadCallback;
Image2.onload = onloadCallback;

// Attach onerror callbacks
Image1.onerror = onerrorCallback;
Image2.onerror = onerrorCallback;

// Load the images !
Image1.src = "queso.png";
Image2.src = "image.jpg";

#javascript

How to verify when multiple images have been loaded in JavaScript | Our Code World

/**
 * Loader function that helps to trigger a callback when multiple images has been loaded. Besides
 * indicates which images were correctly/wrong loaded.
 * 
 * @param {Array} Images An array of strings with the paths to the images.
 * @param {Function} Callback Callback function executed when all images has been loaded or not.
 */
function ImageLoader(Images, Callback){
    // Keep the count of the verified images
    var allLoaded = 0;

    // The object that will be returned in the callback
    var _log = {
        success: [],
        error: []
    };

    // Executed everytime an img is successfully or wrong loaded
    var verifier = function(){
        allLoaded++;

        // triggers the end callback when all images has been tested
        if(allLoaded == Images.length){
            Callback.call(undefined, _log);
        }
    };

    // Loop through all the images URLs
    for (var index = 0; index < Images.length; index++) {
        // Prevent that index has the same value by wrapping it inside an anonymous fn
        (function(i){
            // Image path providen in the array e.g image.png
            var imgSource = Images[i];
            var img = new Image();
            
            img.addEventListener("load", function(){
                _log.success.push(imgSource);
                verifier();
            }, false); 
            
            img.addEventListener("error", function(){
                _log.error.push(imgSource);
                verifier();
            }, false); 
           
            img.src = imgSource;
        })(index);
    }
}


//used like this
ImageLoader(["example.png", "example.jpg", "http://i.imgur.com/fHyEMsl.jpg"], function(result){
    if(result.error){
        // outputs: ["example.png", "example.jpg"]
        console.log("The following images couldn't be properly loaded: ", result.error);
    }

    // outputs: ["http://i.imgur.com/fHyEMsl.jpg"]
    console.log("The following images were succesfully loaded: ", result.success);
});

#html #javascript #json

Amateurpornos - Amateure haben Amateursex - www.mydirtyhobby.de

https://www.mydirtyhobby.de/n/profil/visits/lastvisitors

#javascript

Sepete ekleme animasyonu - uçak

$(".productPurchase button").on("click", function (e) {

    let _Form = $("#_Cargo_Form");
    // $("#_Anim").remove();
    let _Span = document.createElement("span");
    $(_Span).html(`<i class="fa-solid fa-plane"></i>`) ;
    _Span.id = "_Anim";

    console.log(_Span);

    $(_Form).append(_Span);

    var _This_Rect_Left = getOffset(this).left;
    var _This_Rect_Top = getOffset(this).top;

    $(_Span).css({
        "top": "" + _This_Rect_Top + "px",
        "left": "" + _This_Rect_Left + "px"
    })

    var _Shopping_Rect_Left = getOffset(_Shopping_Rect).left;
    var _Shopping_Rect_Top = getOffset(_Shopping_Rect).top;

    $(_Span).css({
        "transition": "all 1000ms",
        "top": "" + _Shopping_Rect_Top + "px",
        "left": "" + _Shopping_Rect_Left + "px"
    })

    console.log(_This_Rect_Left - _Shopping_Rect_Left);

    $(_Span).css({
        "transition": "all 1000ms",
        "top": "" + _Shopping_Rect_Top + "px",
        "left": "" + _Shopping_Rect_Left + "px"
    })
    setTimeout(() => {
        $("#_Anim").remove();
    }, 1000);

    e.preventDefault();
})

#javascript #nodejs #typescript

Adding TypeScript to a Node + Express app

$ npm install typescript --save-dev
$ npm install express
$ npm install --save-dev eslint @types/express @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier
$ npm install --save-dev ts-node-dev

// GENERATE TSCONFIG FILE FROM TERMINAL
$npm run tsc -- --init
$tsc --init

// PACKAGE.JSON
{
  // ..
  "scripts": {
    "start": "node dist/index.js",
    "build": "tsc --build",
    "clean": "tsc --build --clean",
    "tsc": "tsc",
    "dev": "ts-node-dev index.ts",
    "lint": "eslint src/**/*.ts",
     "format": "src/**/*.ts --fix",
  },
  // ..
}

// TSCONFIG.JSON
{
  "compilerOptions": {
    "target": "ES2018",
    "outDir": "dist",
    "sourceMap": true,
    "module": "commonjs",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": false,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "resolveJsonModule": true
  },
  "include": [
    "src/**/*.ts",
  ],
  "exclude": [
    "node_modules"
  ]
}

//.ESLINTRC
{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "rules": {
    "indent": 0,
    "linebreak-style": 0,
    "quotes": [
      "error",
      "double"
    ]
  }
}
  
// PRETTIERRC
{
  "trailingComma": "all",
  "importOrder": [
    "<THIRD_PARTY_MODULES>",
    "next-seo.config",
    "^components/(.*)$",
    "^utils/(.*)$",
    "^assets/(.*)$",
    "^@fontsource/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

#javascript

check for clicks outside event

var specifiedElement = document.getElementById(%27a%27);

//I%27m using "click" but it works with any event
document.addEventListener(%27click%27, function(event) {
  var isClickInside = specifiedElement.contains(event.target);

  if (!isClickInside) {
    //the click was outside the specifiedElement, do something
  }
});

#javascript

checks if image loaded on to webpage

function imageExists(url) {
    return new Promise(resolve => {
        let img = new Image()
        img.addEventListener('load', () => resolve(true))
        img.addEventListener('error', () => resolve(false))
        img.src = url
    })
}

#javascript

Comparison Operators

- Equal (==)
- if the value is same returns true, else false 
- number == string; returns true         
var a = 20; 
var b = "20";
a == b; true

- Strict equal (===)
- if the value and is same returns true, else false
- number === number, string === string returns true
var a = 20;
var b = 20;
a === b; true
var a = 20;
var b = "20";
a === b; false

-Not equal (!=)
- if the value is not the same returns true, else false        
var a = 5; 
var b = 4;
a != b; true  
            
Strict not equal (!==)            
- if the value is not the same return true, else false
- number to number, string to string returns true
var a = 2;
var b = "2";
a !== b; true

#javascript

Operators

Arithmetic Operator

- Addition
var a = 10;
var b = 5; 
var sum = a + b;

-Subtraction
var a = 6;
var b = 2;
var diff = a - b;

-Multipliacation
var a = 5;
var b = 5;
var diff = a * b;

-Division
var a = 4;
var b = 2
var divide = a / b;

-Modulus or remainder
var a = 4;
var b = 3;
var remainder = a % b;

- Increment (++)
- increase an integer value by one 
var a = 5;
a++;
var z = a++;
= 6         

-Decrement (--)   
-decrease the integer value by one                
var a = 5;
a--;
var z = a--;
= 4

#javascript

Get array of values in an objects by key (supports nested objects)

//Get array of values in a object by key
//same key can be nested in an object or object with array of objects
//@object Object : Source Object
//@originalKey String : Key to be searched

const deepSearchByKey = (object, originalKey, matches = []) => {

    if(object != null) {
        if(Array.isArray(object)) {
            for(let arrayItem of object) {
                deepSearchByKey(arrayItem, originalKey, matches);
            }
        } else if(typeof object == 'object') {

            for(let key of Object.keys(object)) {
                if(key == originalKey) {
                    matches.push(object[key]);
                } else {
                    deepSearchByKey(object[key], originalKey, matches);
                }

            }

        }
    }

    return matches;
}

//Example
const myObject = {
  "users" :[
  	{
      "name" : "John"
  		"address" : {
  			"city" : "New York"
    	}
    },
    {
      "name" : "Robert"
  		"address" : {
  			"city" : "Chicago"
    	}
    }
  ]
} 

const data = deepSearchByKey ( myObject , 'city' );

console.log ( data )
//will print 
//[ "New York" , "Chicago"]

#react.js #javascript

React props object spread into component

var condition = true;

var props = {
  value: 'foo',
  ...(condition && { disabled: true })
};

var component = <div {...props} />;

#javascript

Data Types

// change the string to number
const strnum = "10";
console.log(parseInt(strnum))
// change number to string
var b = 20;
console.log(b.toString())

// convert decimal to a whole numbe
var integer = 89.7920;
console.log(integer.toFixed())
// you can choose a number postion which you can rounded off
var integer = 89.7920;
console.log(integer.toFixed(1))

// string inside the double string, use backslash 
var doubleString = "this stirng \"inside\"the double string"
console.log(doubleString)
doubleString = this stirng "inside"the double string

// length of the string including spaces
var myFirstString = "This is my first string"
console.log(myFirstString.length)

// finding the specific number postion of a letter or word, number start from 0
var myFirstString = "This is my first string"
console.log(myFirstString.indexOf("my"))
// use this lastIndexOf if there are same word in a string like "This" and "is", only if you want the last index else, use indexOf()
var myFirstString = "This is my first string"
console.log(myFirstString.lastIndexOf("is"))

// get the specifc word just put the first and last index of the word inside the ()
var myFirstString = "This is my first string"
console.log(myFirstString.slice(0, 5)) = This
var myFirstString = "This is my first string"
console.log(myFirstString.slice(10, 23)) = first string

// extract a string from a string, number start from 0 
var myFirstString = "This is my first string"
console.log(myFirstString.substring(0, 7)) = this is

#javascript

Trigger Click

$('#mylink')[0].click();

#javascript

Method to get the Field API Names - Schema.SObjectTypeFields.

Schema.DescribeSObjectResult r = Account.sObjectType.getDescribe();
List<String>apiNames =  new list<String>();
for(string apiName : r.fields.getMap().keySet()){
   apiNames.add(apiName);
}
System.debug(apiNames);

#javascript

Wait for a function to finish before continuing in JavaScript - OpenJavaScript.info

async function task1() {
  const res = await fetch('https://httpbin.org/get')
    .then(res => res.json())
    .then(data => console.log(data))
  return res;
}

async function task2() {
  // Do something with Fetch result
  console.log("Done handling the Fetch result!");
}

async function executeTasks() {
  await task1();
  await task2();
  console.log("Task 3");
}

executeTasks();

#javascript

Create an image carousel with user controls - OpenJavaScript.info

    // Select DOM elements
    const imageContainer = document.getElementById('image-container');
    const images = document.querySelectorAll('img');

    // Create a index counter
    let index = 0;
    
    // Set the function runCarousel to be called
    // every 4 seconds
    let interval = setInterval(runCarousel, 4000);

    function runCarousel() {
        index++ // increase index by 1
        checkOutBoundConditions()
        changeImage() // change image to new index value
    }

    function checkOutBoundConditions() {
        // If index reaches the end, set
        // index to 0 again (recall index
        // starts from 0)
        if(index === images.length) {
            index = 0
        }
        // If index is less than 0, set
        // to 0
        else if (index < 0) {
            index = 0
        }
    }

    function changeImage() {
        // Negative value on translateX shifts images left,
        // so show animates by multiplying the width of an 
        // image by index value
        imageContainer.style.transform = `translateX(${-index * 600}px)`
    }

    const prevBtn = document.getElementById('previous');
    const nextBtn = document.getElementById('next');

    nextBtn.addEventListener('click', () => {
        // reset interval
        clearInterval(interval);
        interval = setInterval(runCarousel, 3000);
        // increase counter by 1
        index++;
        // Run index value through out of bounds 
        // check and then run change image with nex
        // index value
        checkOutBoundConditions();
        changeImage()
    })

    prevBtn.addEventListener('click', () => {
        // reset interval
        clearInterval(interval);
        interval = setInterval(runCarousel, 3000);
        // decrease counter by 1
        index--;
        // Out of bounds check and then change image
        // with new index value
        checkOutBoundConditions();
        changeImage()
    });

#javascript

Frontend pagination with vanilla JavaScript - OpenJavaScript.info

const content = document.querySelector('#content-page');
const nav = document.querySelector('#nav');

let pageIndex = 0; // Starts at page 0
let itemsPerPage = 2; // 2 items per page
loadItems() // Call the load items function

function loadItems() {
  // Clear any existing content
  content.innerHTML = "";
    // Loop set to start at pageIndex*itemsPerPage and finish after one itemsPerPage 
    for (i=pageIndex*itemsPerPage; i<((pageIndex*itemsPerPage)+itemsPerPage); i++) {
      // Write content into new element
      const item = document.createElement('div');
      item.innerHTML =  `
      <div>
        <img src="${items[i].src}" loading="lazy"/>
      </div>
      <div>
        <span>${items[i].desc}</span>
      </div>
      `
      // Append to the DOM when finished
      content.append(item);
  }
  loadPageNav() // Update page navigation after new items are loaded
}

function loadPageNav() {
  // Clear nav content before updating
  nav.innerHTML = "";
  for (i=0; i<(items.length/itemsPerPage); i++) {
    // Create span for each page value
    let span = document.createElement('span');
    span.innerHTML = i+1;
    // Add event listener to each that will update pageIndex and then call loadItems
    span.addEventListener('click', (e) => {
      pageIndex = e.target.innerHTML-1;
      loadItems();
    });
    // Add styling if current page in navigation
    if (i === pageIndex) {
      span.style.fontSize = "1.7rem";
    }
    // Append each span inside navigation elements
    nav.append(span);
  }
}

#javascript

javascript settimeout examples - Google Search

setTimeout(function(){alert("hello world")}, 2000)

#html #css #javascript

Bootstrap 5 CheatSheet

https://bootstrap-cheatsheet.themeselection.com/index.html#card-grid

#javascript

var, let, and const

// var -- function scope --
for (var i = 0; i < 100; i++) {
}
console.log(i)
// --still function because it has no boundaries--

// let-- scope function --
for (let i = 0; i < 100; i++) {
    console.log(i)
    // -- needs to be inside block scope "{}" otherwise it will not function -- 
} 
// const -- meaning constant it cant change
const bubbles = {x:100, y:200};
// can't change the value of bubble
const bubbles= "hello world" // can't redeclare bubbles
    //  but you can change the value of x and y
    bubbles.x = 200;
    bubbles.y = 300;
bubbles = {x:200, y:300};

#javascript

jquery - Disable SVG mouseclick event using CSS - Stack Overflow

<svg>
    <!-- Insert here -->
    <style>
        .disabled {
            pointer-events: none;
        }
    <style>
    <!-- The rest of the code -->
</svg>

#javascript

JavaScript, make a POST with JSON data with fetch() - Stack Overflow

(async () => {
  const rawResponse = await fetch('https://httpbin.org/post', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({a: 1, b: 'Textual content'})
  });
  const content = await rawResponse.json();

  console.log(content);
})();

#javascript

Add event listener to multiple buttons with the same class

    btns = document.getElementsByClassName("saveBtn");
    for (let i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function () {
			//Add function here
        });
    }

#javascript #eventlistener

Detect click outside element (vanilla JavaScript) - Stack Overflow

let specifiedElement = document.getElementById('a');
 
//I'm using "click" but it works with any event
document.addEventListener('click', function(event) {
  let isClickInside = specifiedElement.contains(event.target);
 
  if (!isClickInside) {
    //the click was outside the specifiedElement, do something
  }
});

#javascript

SOQL query to fetch and group all the records in an Object based on Created date.

select day_only(createdDate) createdonDate, count(createdDate) numCreated from SEASS__Asset_Detail__c group by day_only(createdDate) order by day_only(createdDate) desc


Need to replace a Object Name thats it.

#css #javascript

Slider HTML Code

/*HTML CODE*/
 
<input class="slider m-b-1" 
type="range" min="0" 
max="100" step="1" 
value="40" />

#css #javascript

Slider Js Code

 /* JavaScript */
  
 
const slider = document.querySelector(".slider");
 
slider.addEventListener("input", () => {
updateSlider();
});
 
const updateSlider = function () {
const backgroundPercentage =
((slider.value - slider.min) / (slider.max - slider.min)) * 100;
const backgroundColor = `linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) ${backgroundPercentage}%, var(--success-light) ${backgroundPercentage}%, var(--success-light) 100%)`;
slider.style.background = backgroundColor;
};
 
updateSlider();

#javascript #css

Notification Icon dropdown

 <!-- jQuery library -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

<div class="d-flex justify-content-center align-items-center p-1">
        <div>
          <i class="icon bi bi-bell" id="bell"></i>
          <div class="notifications " id="box">
            <h2>Notifications - <span>2</span></h2>
            <div class="notifications-item">
              <div class="text">
                <p>Samso Nagaro Like your home work</p>
              </div>
            </div>
            <div class="notifications-item">
              <div class="text">
                <p>+20 vista badge earned</p>
              </div>
            </div>
          </div>
        </div>

          <script>
            $(document).ready(function(){
        
            var down = false;
            
            $('#bell').click(function(e){
              
                var color = $(this).text();
                if(down){
                    
                    $('#box').css('height','0px');
                    $('#box').css('opacity','0');
                    down = false;
                }else{
                    
                    $('#box').css('height','auto');
                    $('#box').css('opacity','1');
                    down = true;
                    
                }
                
            });
                
                });
          </script>

          <style>
            .icon {
              cursor: pointer;
              margin-right: 5px;
              /* line-height: 60px; */
            }
            .icon span {
              background: #f00;
              padding: 7px;
              border-radius: 50%;
              color: #fff;
              vertical-align: top;
              /* margin-left: -25px; */
            }
            .icon img {
              display: inline-block;
              width: 26px;
              margin-top: 4px;
            }
            .icon:hover {
              opacity: 0.7;
            }
            .logo {
              flex: 1;
              margin-left: 50px;
              color: #eee;
              font-size: 20px;
              font-family: monospace;
            }
            .notifications {
              width: 300px;
              height: 0px;
              opacity: 0;
              position: absolute;
              top: 63px;
              right: 62px;
              border-radius: 5px 0px 5px 5px;
              background-color: #fff;
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
               0 6px 20px 0 rgba(0, 0, 0, 0.19);
            }
            .notifications h2 {
              font-size: 14px;
              padding: 10px;
              border-bottom: 1px solid #eee;
              color: #999;
            }
            .notifications h2 span {
              color: #f00;
            }
            .notifications-item {
              display: flex;
              border-bottom: 1px solid #eee;
              padding: 6px 9px;
              margin-bottom: 0px;
              cursor: pointer;
            }
            .notifications-item:hover {
              background-color: #eee;
            }
            .notifications-item img {
              display: block;
              width: 50px;
              height: 50px;
              margin-right: 9px;
              border-radius: 50%;
              margin-top: 2px;
            }
            .notifications-item .text h4 {
              color: #777;
              font-size: 16px;
              margin-top: 3px;
            }
            .notifications-item .text p {
              color: #aaa;
              font-size: 12px;
            }
          </style>
        <div>
          <span class="text-white fs-small p-0">Diane Ward</span>
        </div>
        <div class="p-3">
          <img
            src="./asset/Ellipse 461.svg"
            alt="user-icon"
            style="width: 2.5rem"
          />
        </div>
      </div>

#javascript

Understanding Synchronous and Asynchronous Code in JavaScript | by Mehdi Aoussiad | Dev Genius

https://blog.devgenius.io/understanding-synchronous-and-asynchronous-code-in-javascript-46734bf29914

#javascript

LOV in Lookup that has no table

Booking Status (res.status)
DVD SECTION
Mattress Deprecated

Source code for dlov from Lookup
LIST_RES_ES
OAR
OAR_BOOK
OAR_FB
OAR_MSG
OAR_RES
RES_EXTRASERVICES
WL_AUID

#javascript

LOV in Lookup that has no table

DVD SECTION
Booking Status
Mattress Deprecated

#javascript #react.js

reactjs - Correct way of using useState hook on radio buttons - Stack Overflow

<Form.Field control={Radio} label="Male" checked={gender === 'Male'} value="Male" onClick={() => setGender('Male')} />
<Form.Field control={Radio} label="Female" checked={gender === 'Female'} value="Female" onClick={() => setGender('Female')} />

#javascript

Append text to existing value

await Student.updateMany(
          { parent: new ObjectId(id) },
          [{ $set: { 
            isDeleted: true,
            username_lower: { $concat: [ `text to append`, "$username_lower" ] } 
          } }],
        )

#javascript

JS - Style Declaration setProperty Method

const setprop = declaration.setProperty("background-color", "yellow");
const setprop = declaration.setProperty("background-color", "yellow", "important"); // set higher priority

#javascript

Scalar Type

let isFoo:boolean
const ONE:number

#javascript

vue.js - "You are binding v-model directly to a v-for iteration alias" - Stack Overflow

new Vue({
  el: '#app',
  data: {
    settings: {
      runs: [1, 2, 3]
    }
  },
  methods: {
    removeRun: function(i) {
      console.log("Remove", i);
      this.settings.runs.splice(i,1);
    }
  }
});

#javascript

Adjust Popup LOV column width

function(options) {
    var col, columns = options.columns;    
    col = columns.MSQUENCE;
    col.width = 40;
    col.noStretch = true;

    col = columns.METERTYPE;
    col.width =40;
    col.noStretch = true;
    
    return options;
}

#javascript

multiple conditions for JavaScript .includes() method - Stack Overflow

var value = /hello|hi|howdy/.test(str);

#javascript

D'autres solutions pour convertir un objet en tableau

let links = document.querySelectorAll('.link');

let arr1 = [...links]; // iterable argument
let arr2 = Array.from(links);
let arr3 = [].slice.call(links); // [].slice === Array.prototype.slice;
let arr4 = Array.prototype.slice(links);

#javascript #react

Use of state with props in React

import React from "react";

class Clock extends React.Component {
  constructor(props) {      //Constructor is  called when root is rendered
    super(props);
    this.state = { date: new Date() }; //intializes this.state with current time
  }


  componentDidMount() { //React lifecycle method, is been called when clock output is inserted in the DOM
    this.timerID = setInterval(
        () => this.tick(),
        1000
    )           //Here class component asks the browser to set up a timer to call the tick() method once a second
  }

  tick(){               
    this.setState({         //calling setState method with an object containing the current time
        date: new Date()
    });                     //setState method updates the current time
}

  componentWillUnmount() {      // Incase if clock component is ever removed from the DOM , react call this lifecycle method so the timer is stopped.
    clearInterval(this.timerID)
  }
  


  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

export default Clock;

#javascript #react

Use of state with props in React

import React from "react";

class Clock extends React.Component {
  constructor(props) {      //Constructor is  called when root is rendered
    super(props);
    this.state = { date: new Date() }; //intializes this.state with current time
  }


  componentDidMount() { //React lifecycle method, is been called when clock output is inserted in the DOM
    this.timerID = setInterval(
        () => this.tick(),
        1000
    )           //Here class component asks the browser to set up a timer to call the tick() method once a second
  }

  tick(){               
    this.setState({         //calling setState method with an object containing the current time
        date: new Date()
    });                     //setState method updates the current time
}

  componentWillUnmount() {      // Incase if clock component is ever removed from the DOM , react call this lifecycle method so the timer is stopped.
    clearInterval(this.timerID)
  }
  


  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

export default Clock;

#javascript #react

Use of state with props in React

import React from "react";

class Clock extends React.Component {
  constructor(props) {      //Constructor is  called when root is rendered
    super(props);
    this.state = { date: new Date() }; //intializes this.state with current time
  }


  componentDidMount() { //React lifecycle method, is been called when clock output is inserted in the DOM
    this.timerID = setInterval(
        () => this.tick(),
        1000
    )           //Here class component asks the browser to set up a timer to call the tick() method once a second
  }

  tick(){               
    this.setState({         //calling setState method with an object containing the current time
        date: new Date()
    });                     //setState method updates the current time
}

  componentWillUnmount() {      // Incase if clock component is ever removed from the DOM , react call this lifecycle method so the timer is stopped.
    clearInterval(this.timerID)
  }
  


  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

export default Clock;

#javascript #react

Use of state with props in React

import React from "react";

class Clock extends React.Component {
  constructor(props) {      //Constructor is  called when root is rendered
    super(props);
    this.state = { date: new Date() }; //intializes this.state with current time
  }


  componentDidMount() { //React lifecycle method, is been called when clock output is inserted in the DOM
    this.timerID = setInterval(
        () => this.tick(),
        1000
    )           //Here class component asks the browser to set up a timer to call the tick() method once a second
  }

  tick(){               
    this.setState({         //calling setState method with an object containing the current time
        date: new Date()
    });                     //setState method updates the current time
}

  componentWillUnmount() {      // Incase if clock component is ever removed from the DOM , react call this lifecycle method so the timer is stopped.
    clearInterval(this.timerID)
  }
  


  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

export default Clock;

#javascript #react

Use of state with props in React

import React from "react";

class Clock extends React.Component {
  constructor(props) {      //Constructor is  called when root is rendered
    super(props);
    this.state = { date: new Date() }; //intializes this.state with current time
  }


  componentDidMount() { //React lifecycle method, is been called when clock output is inserted in the DOM
    this.timerID = setInterval(
        () => this.tick(),
        1000
    )           //Here class component asks the browser to set up a timer to call the tick() method once a second
  }

  tick(){               
    this.setState({         //calling setState method with an object containing the current time
        date: new Date()
    });                     //setState method updates the current time
}

  componentWillUnmount() {      // Incase if clock component is ever removed from the DOM , react call this lifecycle method so the timer is stopped.
    clearInterval(this.timerID)
  }
  


  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

export default Clock;

#javascript #react

Use of state with props in React

import React from "react";

class Clock extends React.Component {
  constructor(props) {      //Constructor is  called when root is rendered
    super(props);
    this.state = { date: new Date() }; //intializes this.state with current time
  }


  componentDidMount() { //React lifecycle method, is been called when clock output is inserted in the DOM
    this.timerID = setInterval(
        () => this.tick(),
        1000
    )           //Here class component asks the browser to set up a timer to call the tick() method once a second
  }

  tick(){               
    this.setState({         //calling setState method with an object containing the current time
        date: new Date()
    });                     //setState method updates the current time
}

  componentWillUnmount() {      // Incase if clock component is ever removed from the DOM , react call this lifecycle method so the timer is stopped.
    clearInterval(this.timerID)
  }
  


  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

export default Clock;

#javascript #react

Use of state with props in React

import React from "react";

class Clock extends React.Component {
  constructor(props) {      //Constructor is  called when root is rendered
    super(props);
    this.state = { date: new Date() }; //intializes this.state with current time
  }


  componentDidMount() { //React lifecycle method, is been called when clock output is inserted in the DOM
    this.timerID = setInterval(
        () => this.tick(),
        1000
    )           //Here class component asks the browser to set up a timer to call the tick() method once a second
  }

  tick(){               
    this.setState({         //calling setState method with an object containing the current time
        date: new Date()
    });                     //setState method updates the current time
}

  componentWillUnmount() {      // Incase if clock component is ever removed from the DOM , react call this lifecycle method so the timer is stopped.
    clearInterval(this.timerID)
  }
  


  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

export default Clock;

#javascript

team stats- add a new array to an object

const team ={
  _players : [
    {firstName: 'Saqoun', lastName: 'Barkley', age: 26},
    {firstName: 'Evan', lastName: 'Neal', age: 21},
    {firstName: 'Xavier', lastName: 'McKinney', age: 22}
  ],
  _games : [
    {opponent:'Cowboys', teamPoints:30, opponentPoints: 14},
    {opponent:'Eagles', teamPoints:37, opponentPoints: 10},
    {opponent:'Redskins', teamPoints:28, opponentPoints: 7}
  ],

  get players(){
    return this._players;
  },
  get games(){
    return this._games;
  },
  addPlayer(newFirstName, newLastName,newAge){
    let player ={
      firstName:newFirstName,
      lastName: newLastName,
      age: newAge
    };
    this.players.push(player);
  },
  addGame(newOpponent, newTeamPoints,newOpponentPoints){
    let game ={
      opponent:newOpponent,
      teamPoints: newTeamPoints,
      opponentPoints: newOpponentPoints
    };
    this.games.push(game)
  }
};

team.addPlayer('Daniel','Jones','27');

team.addGame('Jets',12,45);

console.log(team._games);

#javascript

Meal Maker set,get

const menu ={
  _menu: '',
  _price: 0,
  set meal(mealToCheck){
    if (typeof mealToCheck === 'string'){
      return this._meal = mealToCheck;
    }
  },
   set price(priceToCheck){
    if (typeof priceToCheck === 'number'){
      return this._price = priceToCheck; 
  }
},
get todaysSpecial(){
  if(this._meal && this._price){
    return `Today's Meal is ${this._meal} for $${this._price}!`
  }else{
    return `Meal or price was set crrectly!`
  }
}

};

menu.meal = 'pizza'
menu.price = 5

console.log(menu.todaysSpecial);

#javascript

Built-in Object Methods

const robot = {
	model: 'SAL-1000',
  mobile: true,
  sentient: false,
  armor: 'Steel-plated',
  energyLevel: 75
};

// What is missing in the following method call?
const robotKeys = Object.keys(robot);

console.log(robotKeys);

// Declare robotEntries below this line:
const robotEntries = Object.entries(robot)
console.log(robotEntries);

// Declare newRobot below this line:
const newRobot = Object.assign({laserBlaster: true, voiceRecognition: true}, robot);

console.log(newRobot);

#javascript

Destructured Assignment

const vampire = {
  name: 'Dracula',
  residence: 'Transylvania',
  preferences: {
    day: 'stay inside',
    night: 'satisfy appetite'
  }
};
const residence = vampire.residence; 
console.log(residence); // Prints 'Transylvania'

const { residence } = vampire; 
console.log(residence); // Prints 'Transylvania'

//Look back at the vampire object’s properties in the first code example. Then, in the example above, we declare a new variable residence that extracts the value of the residence property of vampire. When we log the value of residence to the console, 'Transylvania' is printed.
//We can even use destructured assignment to grab nested properties of an object:

const { day } = vampire.preferences; 
console.log(day); // Prints 'stay inside'



const robot = {
  model: '1E78V2',
  energyLevel: 100,
  functionality: {
    beep() {
      console.log('Beep Boop');
    },
    fireLaser() {
      console.log('Pew Pew');
    },
  }
};

const { functionality } = robot;

functionality.beep();

#javascript

Property Value Shorthand

function robotFactory(model, mobile){
  return {
    model,
    mobile,
    beep() {
      console.log('Beep Boop');
    }
  }
}

// To check that the property value shorthand technique worked:
const newRobot = robotFactory('P-501', false)
console.log(newRobot.model)
console.log(newRobot.mobile)

#javascript

setters

const robot = {
  _model: '1E78V2',
  _energyLevel: 100,
  _numOfSensors: 15,
  get numOfSensors(){
    if(typeof this._numOfSensors === 'number'){
      return this._numOfSensors;
    } else {
      return 'Sensors are currently down.'
    }
  },
  set numOfSensors(num) {
    if (typeof num === 'number' && num >= 0){
      this._numOfSensors = num;
    } else {
      console.log('Pass in a number that is greater than or equal to 0')
    }   
  } 
};

robot.numOfSensors = 100;
console.log(robot.numOfSensors);

//

#javascript

factory Functions

const robotFactory = (model,mobile) => {
  return { 
    model: model,
    mobile: mobile, 
    beep() {
      console.log('Beep Boop');
    } 
  }
};

const tinCan = robotFactory('P-500',true);
tinCan.beep();

///


const monsterFactory = (name, age, energySource, catchPhrase) => {
  return { 
    name: name,
    age: age, 
    energySource: energySource,
    scare() {
      console.log(catchPhrase);
    } 
  }
};

const ghost = monsterFactory('Ghouly', 251, 'ectoplasm', 'BOO!');
ghost.scare(); // 'BOO!'

//

#javascript

Getters

const robot = {
  _model: '1E78V2',
  _energyLevel: 100,
  get energyLevel(){
    if(typeof this._energyLevel === 'number') {
      return 'My current energy level is ' + this._energyLevel
    } else {
      return "System malfunction: cannot retrieve energy level"
    }
  }
};

console.log(robot.energyLevel);


const person = {
  _firstName: 'John',
  _lastName: 'Doe',
  get fullName() {
    if (this._firstName && this._lastName){
      return `${this._firstName} ${this._lastName}`;
    } else {
      return 'Missing a first name or a last name.';
    }
  }
}
 
// To call the getter method: 
person.fullName; // 'John Doe'

#javascript #jquery

jQuery: Delete all table rows except first one using jQuery - w3resource

$(document).ready(function(){ 
  $('#button1').click(function(){ 
    $("#myTable").find("tr:gt(0)").remove();
  });
});

#javascript #jquery

jQuery check country or ip and fire action

	fetch('https://api.ipregistry.co/?key=tryout')
    
    .then(function (response) {
        return response.json();
    })
    .then(function (payload) {
        console.log(payload.location.country.name);
        var cntr = payload.location.country.name;
        if( cntr == "United States" ){
           
            jQuery("div#gplaybtn .banner__btns a:nth-child(2)").attr("href", "https://play.google.com/store/apps/");
             //alert(cntr);
        }
    });

#javascript

The this Keyword

const robot = {
  model: '1E78V2',
  energyLevel: 100,
  provideInfo() { 
    return `I am ${this.model} and my current energy level is ${this.energyLevel}.`
  }
};

console.log(robot.provideInfo());

///.this with method


const robot = {
  energyLevel: 100,
  checkEnergy() {
    console.log(`Energy is currently at ${this.energyLevel}%.`)
  }
}

robot.checkEnergy();

#javascript #react.js

recommended posts

https://www.youtube.com/watch?v=VsUzmlZfYNg

#javascript #shopify

Shopify CSS & JS Render Blocking Issue Resolved.

CSS

<link rel="preload" href="{{ 'custommenu.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
        <link rel="stylesheet" href="{{ 'custommenu.css' | asset_url }}">
    </noscript>


==================================
JS


    <script src="{{ 'jquery-2.1.1.min.js' | asset_url }}" async></script>
    <script src="{{ 'jquery-ui.min.js' | asset_url }}" async></script>

#javascript

Generate random string/characters in JavaScript - Stack Overflow

function makeid(length) {
    var result           = '';
    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * 
 charactersLength));
   }
   return result;
}

console.log(makeid(5));

#javascript #shopify

Shopify Remove all apps from home page

   
  {% if template.name == "index" %} 

  
  {% comment %} Leave url_to_remove as 0 to remove all apps, or set to a number to remove a specific app. {% endcomment %}
  {% assign url_to_remove = 0 %}
  {% assign lines = content_for_header | newline_to_br | split: '<br />' %}
  
  {% for line in lines %}
    {% if line contains 'var urls' %}
      {% if url_to_remove == 0 %}
        {% comment %}Remove all apps{% endcomment %}
        {% capture new_line %}
        {% endcapture %}
        {% assign empty_array = new_line | append: "var urls = [];" %}
        {% assign content_for_header = content_for_header | replace: line, empty_array %}
        <!-- Removed all apps. -->
      {% else %}
        {% assign url_string = line | remove: "var urls = [" | remove: "];" | strip %}
        {% assign url_array = url_string | split: ',' | uniq %}
        {% comment %}Just remove app at index 'url_to_remove' {% endcomment %}
          {% for url in url_array %}
            {% if forloop.index == url_to_remove %}
              {% assign content_for_header = content_for_header | replace: url, '""' %}
              <!-- Removed app no. {{ url_to_remove }} of {{ url_array.size }}: {{ url }} -->
        {% endif %}
        {% endfor %}
      {% endif %}
    {% endif %}
  {% endfor %}
  
  
  
  
  
{% endif %}
  
    
    
    
  {{ content_for_header }}

#code #html #javascript #countdowntimer

Simple Countdown Time

<!-- Html -->
<div id="timer">
  <div id="days"></div>
  <div id="hours"></div>
  <div id="minutes"></div>
  <div id="seconds"></div>
</div>

<!-- Js Code -->
function makeTimer() {
  //	var endTime = new Date("29 April 2018 9:56:00 GMT+01:00");	
  var endTime = new Date("30 July 2022 12:00:00 GMT+01:00");			
  endTime = (Date.parse(endTime) / 1000);
  var now = new Date();
  now = (Date.parse(now) / 1000);
  var timeLeft = endTime - now;
  var days = Math.floor(timeLeft / 86400); 
  var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
  var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
  var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
  if (hours < "10") { hours = "0" + hours; }
  if (minutes < "10") { minutes = "0" + minutes; }
  if (seconds < "10") { seconds = "0" + seconds; }
  $("#days").html(days + "<span>Days</span>");
  $("#hours").html(hours + "<span>Hours</span>");
  $("#minutes").html(minutes + "<span>Minutes</span>");
  $("#seconds").html(seconds + "<span>Seconds</span>");		
}
setInterval(function() { makeTimer(); }, 1000);

#code #html #javascript

Navbar Code

// Navbar Link Js
$('.nav-link').on('click', function() {
  $('.nav-link').removeClass('active');
  $(this).addClass('active');
});

$('.nav-link').on('click', function() {
  $('.navbar-collapse').collapse('hide');
});

#navbar #javascript

On Scroll Add Class

$(window).scroll(function() {
  $('div').toggleClass('scrolled', $(this).scrollTop() > 50);
});

#navbar #javascript #scrollspy

Navbar Scroll Spy Code

$(document).ready(function() {
  var sectionIds = $('a.nav-link');
  $(document).scroll(function() {
    sectionIds.each(function() {
      var container = $(this).attr('href');
      var containerOffset = $(container).offset().top;
      var containerHeight = $(container).outerHeight();
      var containerBottom = containerOffset + containerHeight;
      var scrollPosition = $(document).scrollTop();
      if (scrollPosition < containerBottom - 350 && scrollPosition >= containerOffset - 350) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    });
  });
});

#javascript #nodejs #jwt #login

youse lnk as as in other components

 <Button component={Link} to='/auth' variant='contained'color='primary'>SignIn</Button>

#javascript

grammar checker exercise

let story = 'Last weekend, I took literally the most beautifull bike ride of my life. The route is called "The 9W to Nyack" and it stretches all the way from Riverside Park in Manhattan to South Nyack, New Jersey. It\'s really an adventure from beginning to end! It is a 48 mile loop and it literally took me an entire day. I stopped at Riverbank State Park to take some artsy photos. It was a short stop, though, because I had a freaking long way to go. After a quick photo op at the very popular Little Red Lighthouse I began my trek across the George Washington Bridge into New Jersey. The GW is a breathtaking 4,760 feet long! I was already very tired by the time I got to the other side. An hour later, I reached Greenbrook Nature Sanctuary, an extremely beautifull park along the coast of the Hudson. Something that was very surprising to me was that near the end of the route you literally cross back into New York! At this point, you are very close to the end.';

let storyWords = story.split(' ');
let unnecessaryWord = 'literally';
let misspelledWord = 'beautifull';
let badWord = 'freaking';
let count = 0;

storyWords.forEach(() =>{
count ++;
});
console.log(count);


storyWords= storyWords.filter((word) =>{
return word !== unnecessaryWord;
});

storyWords= storyWords.map((word) =>{
return word === misspelledWord ? 'beautiful' : word;
});

const badWordIndex = storyWords.findIndex(storyWords => {
  return storyWords === badWord;
});

console.log(badWordIndex);

storyWords[78] = 'really';

const lengthCheck = storyWords.every(word => {
  return word.length < 10;
});
console.log(lengthCheck);

const longWordIndex = storyWords.findIndex(word => {
  return word.length > 10;
});
console.log(longWordIndex);


storyWords[111] = 'glorious';

console.log(storyWords.join(" "));

#javascript #react.js

Apollo Client setup template in React and React Native

import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";

const httpLink = createHttpLink({
  uri: <insert uri here>,
});

//Without authentication
const createApolloClient = () => {
  return new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache(),
  });
}


/* With authentication using setContext. <authentication_token> can also be a function or method returning an authentication token */
import {setContext} from "@apollo/client/link/context";

const createApolloClient = (<authentication_token>) => {
  const authLink = setContext(async (_, { headers }) => {
    try {
      const accessToken = <authentication_token>;
      return {
        headers: {
          ...headers,
          authorization: accessToken ? `Bearer ${accessToken}` : "",
        },
      };
    } catch (e) {
      console.log(e);
      return {
        headers,
      };
    }
  });

  return new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
  });
};
  

export default createApolloClient;

#javascript #react.js

useConfirm

import { useEffect, useState } from 'react';

interface ConfirmState {
  isOpen: boolean;
  proceed: any;
  cancel: any;
}

interface UseConfirmReturnType extends ConfirmState {
  isConfirm: () => Promise<boolean>;
}

export const useConfirm = (): UseConfirmReturnType => {
  const [confirm, setConfirm] = useState<ConfirmState>({} as ConfirmState);
  const [needsCleanup, setNeedsCleanup] = useState(false);

  const isConfirm = () => {
    setNeedsCleanup(true);
    const promise = new Promise((resolve, reject) => {
      setConfirm({
        isOpen: true,
        proceed: resolve,
        cancel: reject,
      });
    });

    return promise.then(
      () => {
        setConfirm({ ...confirm, isOpen: false });
        return true;
      },
      () => {
        setConfirm({ ...confirm, isOpen: false });
        return false;
      }
    );
  };

  useEffect(() => {
    return () => {
      if (confirm.cancel && needsCleanup) {
        confirm.cancel();
      }
    };
  }, [confirm, needsCleanup]);

  return {
    ...confirm,
    isConfirm,
  };
};

#javascript

Iterator Documentation

const words = ['unique', 'uncanny', 'pique', 'oxymoron', 'guise'];

// Something is missing in the method call below

console.log(words.some((word) => {
  return word.length < 6;
}));

// Use filter to create a new array
const interestingWords = words.filter(words => {
  return words.length > 5;
});


// Make sure to uncomment the code below and fix the incorrect code before running it

 console.log(interestingWords.every((word) => {
   return word.length > 5;
  } ));



const cities = ['Orlando', 'Dubai', 'Edinburgh', 'Chennai', 'Accra', 'Denver', 'Eskisehir', 'Medellin', 'Yokohama'];

const nums = [1, 50, 75, 200, 350, 525, 1000];

//  Choose a method that will return undefined
cities.forEach(city => console.log('Have you visited ' + city + '?'));

// Choose a method that will return a new array
const longCities = cities.filter(city => city.length > 7);

// Choose a method that will return a single value
const word = cities.reduce((acc, currVal) => {
  return acc + currVal[0]
}, "C");

console.log(word)

// Choose a method that will return a new array
const smallerNums = nums.map(num => num - 5);

// Choose a method that will return a boolean value
nums.some(num => num < 0);

#javascript

The .reduce() Method

//The .reduce() method returns a single value after iterating through the elements of an array, thereby reducing the array. Take a look at the example below:



const newNumbers = [1, 3, 5, 7];

const newSum = newNumbers.reduce((accumulator, currentValue) => {
  console.log('The value of accumulator: ', accumulator);
console.log('The value of currentValue: ', currentValue);
  return accumulator + currentValue;

},10)
 
console.log(newSum)

#javascript

The .findIndex() Method

const animals = ['hippo', 'tiger', 'lion', 'seal', 'cheetah', 'monkey', 'salamander', 'elephant'];


const foundAnimal = animals.findIndex(animals => {
  return animals ==='elephant';
});
console.log(foundAnimal);

const startsWithS = animals.findIndex(animals => {
  return animals[0] ==='s';
});

console.log(startsWithS);

#javascript #nodejs #jwt #login

pagination backend

 const {page}=req.query;
    console.log(page);
    try {
        const LIMIT=6; 
        // limit can be used dynamically
        const startIndex=(Number(page)-1 )* LIMIT;//getting the starting index of all the posts
        // converting page to Number because we get string as query

        const total=await PostMessage.countDocuments({});
        const posts = await PostMessage.find().sort({_id:-1}).limit(LIMIT).skip(startIndex); //skipping all the previous pages from loading
        
        res.status(200).json({data:posts,currentPage:Number(page),numberOfPages:Math.ceil(total/LIMIT)});
    }
    catch (error) {
        res.status(404).json({ message: error.message });

    }

#javascript

The .filter() Method

//.filter returns new array with filtered data
const randomNumbers = [375, 200, 3.14, 7, 13, 852];

// Call .filter() on randomNumbers below
const smallNumbers = randomNumbers.filter(randomNumbers => {
  return randomNumbers< 250;
});
console.log(smallNumbers);
const favoriteWords = ['nostalgia', 'hyperbole', 'fervent', 'esoteric', 'serene'];


// Call .filter() on favoriteWords below

const longFavoriteWords = favoriteWords.filter(favoriteWords => {
  return favoriteWords.length > 7;
});

console.log(longFavoriteWords);

#javascript

The .map() Method

//.map takes an argument of a callback function and returns a new array

const animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale', 'octopus', 'rabbit', 'lion', 'dog'];

// Create the secretMessage array below
const secretMessage = animals.map(animals =>{
return animals[0];
});

console.log(secretMessage.join(''));
//output 'HelloWorld'
const bigNumbers = [100, 200, 300, 400, 500];

// Create the smallNumbers array below
const smallNumbers = bigNumbers.map(bigNumbers =>{
  return bigNumbers / 100;
});

console.log(smallNumbers)
//output [ 1, 2, 3, 4, 5 ]

#javascript

the .forEach() method

const fruits = ['mango', 'papaya', 'pineapple', 'apple'];

// Iterate over fruits below : output "I want to eat each fruit"
fruits.forEach(fruitItem => console.log(`I want to eat a ${fruitItem}`));

#javascript

Functions as data/

const checkThatTwoPlusTwoEqualsFourAMillionTimes = () => {
  for(let i = 1; i <= 1000000; i++) {
    if ( (2 + 2) != 4) {
      console.log('Something has gone very wrong :( ');
    }
  }
};

// assigning a function to a variable 


isTwoPlusTwo = checkThatTwoPlusTwoEqualsFourAMillionTimes;

isTwoPlusTwo();
console.log(isTwoPlusTwo.name);


/// function as Parameters

const addTwo = num => {
  return num + 2;
}

const checkConsistentOutput = (func, val) => {
let checkA = val + 2;
  let checkB = func(val);
  if (checkA === checkB){
    return checkB;
  }else{
    console.log('inconsistent results');
  }
}

console.log(checkConsistentOutput(addTwo, 5));

#javascript #nodejs #jwt #login

searching something from multiple fields using regex in mongoose/mongodb

//backend
//api

export const getPostsBySearch=async  (req,res)=>{
    const {searchQuery , tags}=req.query; 
    try {
       const title=new RegExp(searchQuery,'i');
       const posts=await PostMessage.find({$or:[{title},{tags:{$in:tags.split(',') }}]})
       //here we get tags as an array so finding the specific tag by spliting tags using array, because we get the array as an object here using ",". or = search by title or tags .RegExp = regex.

       res.json({data:posts})
    //    i for ignoring case 
    } catch (error) {
        
    }
}
//actions
 
export const getPostsBySearch=(searchQuery)=>async(dispatch)=>{
    try {
        
        const {data:{data}}=await api.fetchPostsBySearch(searchQuery);
        console.log(data);
    } catch (error) {
       console.log(error); 
    }
}
//action in front end

export const getPostsBySearch=(searchQuery)=>async(dispatch)=>{
    try {
        const {data:{data}}=await api.fetchPostsBySearch(searchQuery);
        console.log(data);
    } catch (error) {
       console.log(error); 
    }
}

#javascript

Change MUI textField focus ring color

import styled from "styled-components";
import {TextField} from "@material-ui/core";

const WhiteBorderTextField = styled(TextField)`
  & label.Mui-focused {
    color: white;
  }
  & .MuiOutlinedInput-root {
    &.Mui-focused fieldset {
      border-color: white;
    }
  }
`;

#react #javascript #bootstrap

Bootstrap installation

npm install react-bootstrap bootstrap@5.1.3

#react #javascript

Font Awesome cdn

    <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" />

#javascript #nodejs #jwt #login

hook to use query for searching

///eta bahire\\\
function useQuery(){
    return new URLSearchParams(useLocation().search)
}
/// then vitore\\\
const query=useQuery();
    const page=query.get(page)
    /// page name e kono query thakle tar value dibe\\\

#javascript

Objects and Object Constructors | The Odin Project

function Student(name, grade) {
  this.name = name
  this.grade = grade
}

Student.prototype.sayName = function() {
  console.log(this.name)
}
Student.prototype.goToProm = function() {
  console.log("Eh.. go to prom?")
}

#javascript

javascript - Use v-if for a specific element in a v-for - Stack Overflow

<!-- In the v-for directive you can get the index of the element v-for="(profile, index)

Use that index to only show the style you want it, in your template.

for example. -->



new Vue({
  el: '#app',
  data: {
    selected : 0
  }
})


<!-- CSS -->

.selectedClass {
  background: lightblue
}

.hoverClass:hover {
  background: lightcoral
}


<!-- Script -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<main id="app">
  <div v-for="(elem, index) in 4">
    <p class="hoverClass" :class="{'selectedClass': selected === index}" @click="selected = index" >{{elem}}</p>
  </div>
</main>
https://stackoverflow.com/posts/54025706/edit#


<!-- Edited-->

<!-- It's perfeclty fine combine class="..." with the Vue binding :class="..."

-->

<!-- Edited 2-->

<!-- For nested v-for declare another name for index.
-->


new Vue({
  el: '#app'
})


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<main id="app">
    <div v-for="(item, i) in 2">
       <div v-for="(elem, j) in 3">
        v-for item {{ i }} v-for elem {{ j }}
       </div>
    </div>
</main>

#javascript #nodejs #jwt #login

jwt middle ware to verify a user

import jwt from 'jsonwebtoken'
const auth=async (req,res,next)=>{
    try {
       const token=req.headers.authorization.split(''[1]);
       const isCustomAuth=token.length<500;
       let decodedData;
       if(token && isCustomAuth){
               decodedData=jwt.verify(token,process.env.SECRET);
              req.userId=decodedData?.id;
       }
       else{
        decodedData=jwt.decode(token);
        req.userId=decodedData?.sub;
       }
       next();
    } catch (error) {
        console.log(error);
    }
}

#javascript

nesting ternaries

isLogged(user) ? sayHello : ''; // bad

if (isLogged(user)) sayHello; // good

#javascript

Sorting

// Better to avoid mutations (that will bite you in libraries like React):
[...stringArr].sort();
[...stringArr].reverse();

// I generally recommend to use `a` and `z` to make it clear:
[...array].sort((a, z) => a - z);
[...array].sort((a, z) => z - a);

// But you could also make it more readable:
[...array].sort((first, second) => first - second);
[...array].sort((first, second) => second - first);

#javascript

Remove Duplicates array

const array  = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
// or
const nonUnique = [...new Set(array)];
// Output: [5, 4, 7, 8, 9, 2]

#javascript

sum, minimum and maximum

const array  = [5,4,7,8,9,2]; 

// Sum in array javascript
array.reduce((a,b) => a+b);
array.reduce((total, item) => total + item);
// Output: 35

// MAX in array javascript
array.reduce((a,b) => a>b?a:b);
// For max, this is way faster:
Math.max(...array);
// Output: 9

// MIN in array javascript
array.reduce((a,b) => a<b?a:b);
// For min this is way faster
Math.min(...array);
// Output: 2

#javascript

Async/await

// we assume this code runs at top level, inside a module
let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();

console.log(user);

#javascript #nodejs #jwt #login

node jwt login controller

import bcrypt from 'bcryptjs';
import jwt from 'jsonwebtoken';
import user from '../models/user';

export const signin=async (res,req)=>{
 const {email,password} =req.body;
 try {
    const existingUser=await userfindOne({email: email});
    if(!existingUser) return res.status(404).json({message: 'user doesnot exist'});
    const isPasswordCorrect=await bcrypt.compare(password,existingUser.password);
    if(!isPasswordCorrect) return res.status(400).json({message: 'invalid credintials'});
    const token=jwt.sign({email:existingUser.email,id:existingUser._id},process.env.SECRET,{expiresIn:'1h'})
    res.status(200).json({result:existingUser,token})
 } catch (error) {
    res.status(500).json({message:'something went wrong'})
 }
}
export const signup=async (res,req)=>{

}

#javascript

Whale loops exercise

let input = 'turpentine and turtles';

const vowels = ['a','e','i','o','u'];

let resultArray =[ ];

for (let i = 0; i < input.length; i++){
  if(input[i] === "e"){
    resultArray.push(input[i]);
  }
   if(input[i] === "u"){
    resultArray.push(input[i]);
  }
  for(let j = 0; j < vowels.length; j++){
    if (input[i] === vowels[j]){
      resultArray.push(input[i]);
    }
  }

};

//console.log(resultArray);

const resultString = resultArray.join('').toUpperCase();
console.log(resultString);

#javascript

put all the input values in a single object

const initialState={firstName:'',lastName:'',email:'',password: '',confirmPassword:''}

 const [formData,setFormData]=useState(initialState)

const handleChange = (e) => {
(\\https://www.youtube.com/watch?v=VsUzmlZfYNg&t=12191s//)
            setFormData({...formData,[e.target.name]:e.target.value})
    };

#javascript

soql-query-in-javascript-example/

https://www.sfdcpoint.com/salesforce/soql-query-in-javascript-example/

#javascript

Airtable Scripts to resize and crop images

//Trigger: User clicks button
// settings you change:
// ========================
let apiKey = "yourApiKeyHere";
let apiSecret = "yourSecretHere";
let originalFieldName = "Original";
let largeFieldName = "Large Web";
let largeWidth = 630;
let smallFieldName = "Small Web";
let smallWidth = 416;

// ========================
// Image resize code
// ========================

let table = base.getTable("Employees");
let record = await input.recordAsync("Select an Employee whose images you would like to create", table); 

// need an image there
if(record.getCellValue(originalFieldName) === null){	
		//console.log("Please upload an image for this record");
    output.text("Please upload an image for this record");
    return;
}

let imageToResizeUrl = record.getCellValue(originalFieldName)[0].url;

// send stuff to image processor
let callToKraken = await remoteFetchAsync('https://api.kraken.io/v1/url',
    {
        method: 'POST',
        body: JSON.stringify(
            {
                "auth": {
                    "api_key": apiKey,
                    "api_secret": apiSecret
                },
                "wait": true,
                "lossy": true,
                "url": imageToResizeUrl,
                "resize": [
                    {
                        "id": "small",
                        "strategy": "landscape",
                        "width": smallWidth,
                    },
                    {
                        "id": "large",
                        "strategy": "landscape",
                        "width": largeWidth,
                    }
                ]
            }       
        ),
        headers:{
            'Content-type':'application/json',
            'Accept':'application/json'
        }
    }
)
let returnedImages = await callToKraken.json();
// some debugging checks. Uncomment to view
//console.log(returnedImages); 
//console.log(returnedImages.results.small.kraked_url);

//add images as attachments into Airtable row:
// "small" and "large" under "results" below are the IDs we specified in the Kraken body above
await table.updateRecordAsync(record, {
    [smallFieldName]: [ { url: returnedImages.results.small.kraked_url } ],
    [largeFieldName]: [ { url: returnedImages.results.large.kraked_url } ]
})

#javascript

Secret Message array exercise

let secretMessage = ['Learning', 'is', 'not', 'about', 'what', 'you', 'get', 'easily', 'the', 'first', 'time,', 'it', 'is', 'about', 'what', 'you', 'can', 'figure', 'out.', '-2015,', 'Chris', 'Pine,', 'Learn', 'JavaScript'];

secretMessage.pop();
//console.log(secretMessage.length);

secretMessage.push('to','Program');
//console.log(secretMessage);

secretMessage[7]= 'right';
//console.log(secretMessage);

secretMessage.shift();
//console.log(secretMessage);

secretMessage.unshift('Programming');
//console.log(secretMessage);

secretMessage.splice(6,5,'know');
 //console.log(secretMessage);
 ///.splice it used to select and replace. the 6 is the index and 5 is counting how much you want to replace and 'know' is what you are replacing it with.

console.log(secretMessage.join(' '));
// .join converts the array to a string, and the ' ' is to add spaces to the string so it reads like a normal sentence.

#javascript

Nested Arrays

let numberClusters =[[1,2],[3,4],[5,6]];

const target = numberClusters[2][1];

console.log(target);

#react #javascript

Push an object to a state array

import {useState} from 'react';

export default function App() {
  const initialState = [
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
  ];
  const [employees, setEmployees] = useState(initialState);

  const handleClick = () => {
    // 👇️ push object to end of state array
    setEmployees(current => [...current, {id: 3, name: 'Carl'}]);

    // 👇️ spread an array of objects into the state array
    // setEmployees(current => [
    //   ...current,
    //   ...[
    //     {id: 3, name: 'Carl'},
    //     {id: 4, name: 'Delilah'},
    //   ],
    // ]);

    // 👇️ push object to beginning of state array
    // setEmployees(current => [{id: 3, name: 'Zoey'}, ...current]);
  };

  return (
    <div>
      <div>
        <button onClick={handleClick}>Push to state array</button>
      </div>

      {employees.map((element, index) => {
        return (
          <div key={index}>
            <h2>{element.name}</h2>
          </div>
        );
      })}
    </div>
  );
}

#react #javascript

Push an element to a state Array in React

import {useState} from 'react';

export default function App() {
  const [names, setNames] = useState(['Alice', 'Bob']);

  const handleClick = () => {
    // 👇️ push to end of state array
    setNames(current => [...current, 'Carl']);

    // 👇️ spread an array into the state array
    // setNames(current => [...current, ...['Carl', 'Delilah']]);

    // 👇️ push to beginning of state array
    // setNames(current => ['Zoey', ...current]);
  };

  return (
    <div>
      <div>
        <button onClick={handleClick}>Push to state array</button>
      </div>

      {names.map((element, index) => {
        return (
          <div key={index}>
            <h2>{element}</h2>
          </div>
        );
      })}
    </div>
  );
}

#javascript

javascript - Map and filter an array at the same time - Stack Overflow

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

var reduced = options.reduce(function(filtered, option) {
  if (option.assigned) {
     var someNewValue = { name: option.name, newProperty: 'Foo' }
     filtered.push(someNewValue);
  }
  return filtered;
}, []);

document.getElementById('output').innerHTML = JSON.stringify(reduced);

#react #javascript

One Component per file | React Tutorial

https://react-tutorial.app/app.html?id

#react.js #javascript

render functional component

import React from "react";
import {createRoot} from "react-dom/client";

// do not modify this function
function Navbar() {
    return (
        <>
            <h3>Supermarket</h3>
            <p>Start shopping</p>
        </>
    );
}

const root = document.querySelector("#react-root");
createRoot(root).render(Navbar());
// TODO:

#javascript

javascript - How to set the next/image component to 100% height - Stack Overflow

<div style={{width: '100%', height: '100%', position: 'relative'}}>
  <Image
    alt='Mountains'
    src='/mountains.jpg'
    layout='fill'
    objectFit='contain'
  />
</div>

#javascript #reference #qualifier

Make variables dynamically available on tasks

//On display BR to capture scratchpad 
//HH - Set g_scratchpad for sc_task
//Capture the current wf activity to use in client side scripts
(function executeRule(current, previous /*null when async*/) {
    g_scratchpad.wf_activity = current.wf_activity.getDisplayValue();
})(current, previous)

//UI Policy on sc_task table to dynamically show/hide/make mandatory
//HH - Make variables visible and mandatory for tasks on RITM -  Settlement Vendor
//execute if true
function onCondition() {
    if (g_scratchpad.wf_activity == 'Create Task for Accounts Payable') {
        g_form.setVisible('u_1099_misc_form_legal_name', true);
        g_form.setVisible('u_1099_code', true);
        g_form.setMandatory('u_1099_code', true);
        g_form.setMandatory('u_1099_misc_form_legal_name', true);
    }
}
if (g_scratchpad.wf_activity == 'Create Task for Data Integrity') {
    g_form.setVisible('u_1099_code', true);
    g_form.setVisible('u_1099_misc_form_legal_name', true);
    g_form.setReadOnly('u_1099_code', true);
    g_form.setReadOnly('u_1099_misc_form_legal_name', true);
    g_form.setVisible('vendor_number', true);
    g_form.setMandatory('vendor_number', true);
}

if (g_scratchpad.wf_activity == 'Create Task for Treasury') {
    g_form.setVisible('u_1099_code', false);
    g_form.setVisible('u_1099_misc_form_legal_name', false);
    g_form.setMandatory('u_1099_code', false);
    g_form.setMandatory('u_1099_form_legal_name', false);
    g_form.setVisible('vendor_number', false);
    g_form.setMandatory('vendor_number', false);
}

//execute if false
function onCondition() {
    g_form.setVisible('u_1099_code', false);
    g_form.setVisible('u_1099_misc_form_legal_name', false);
    g_form.setMandatory('u_1099_code', false);
    g_form.setMandatory('u_1099_form_legal_name', false);
    g_form.setVisible('vendor_number', false);
    g_form.setMandatory('vendor_number', false);
}

#javascript

arrays methods

//with arrays it is always 1 extra from 0
//.push adds to end of array
const chores = ['wash dishes', 'do laundry', 'take out trash'];


chores.push('item 3', 'item 4');

console.log(chores);

////.pop removes the last

const chores = ['wash dishes', 'do laundry', 'take out trash', 'cook dinner', 'mop floor'];


chores.pop();
console.log(chores);

///.shift removes the first
const groceryList = ['orange juice', 'bananas', 'coffee beans', 'brown rice', 'pasta', 'coconut oil', 'plantains'];

groceryList.shift();
console.log(groceryList);

///.unshift adds to beginning of array

groceryList.unshift('popcorn');
console.log(groceryList);

//use .slice to select items and copy in an array. for example .slice(1,4) means 1-4.
// use .splice to actually select and change the array and replace it with a new string see secret message excerise for better explanation.

console.log(groceryList.slice(1,4));

groceryList.splice(1,4);

// .indexOf allows you to select a particular item

const pastaIndex = groceryList.indexOf('pasta');
console.log(pastaIndex);
///when you pass an array into a function, if the array is mutated inside the function, that change will be maintained outside the function as well. You might also see this concept explained as pass-by-reference since what we’re actually passing to the function is a reference to where the variable memory is stored and changing the memory.


const concept = ['arrays', 'can', 'be', 'mutated'];

function changeArr(arr){
  arr[3] = 'MUTATED';
}

changeArr(concept);

console.log(concept);

function removeElement(newArr){
  newArr.pop();
}

removeElement(concept);
console.log(concept);

#javascript

sortBy / order

value.sort(function (a, b) {
                var dateA = new Date(a.invoice_date.slice(0, -17)),
                    dateB = new Date(b.invoice_date.slice(0, -17));
                return dateA - dateB;
            });

#javascript #react.js #typescript

Add a gitignore file to a directory

npm install -g gitignore
npx gitignore <language/framework/library>
  
/* npx gitignore node
npx gitignore react
npx gitignore reactNative */

#javascript

javascript - Load specific element from another page with vanilla js - Stack Overflow

function getPage(url, from, to) {
    var cached=sessionStorage[url];
    if(!from){from="body";} // default to grabbing body tag
    if(to && to.split){to=document.querySelector(to);} // a string TO turns into an element
    if(!to){to=document.querySelector(from);} // default re-using the source elm as the target elm
    if(cached){return to.innerHTML=cached;} // cache responses for instant re-use re-use

    var XHRt = new XMLHttpRequest; // new ajax
    XHRt.responseType='document';  // ajax2 context and onload() event
    XHRt.onload= function() { sessionStorage[url]=to.innerHTML= XHRt.response.querySelector(from).innerHTML;};
    XHRt.open("GET", url, true);
    XHRt.send();
    return XHRt;
}

#javascript

Scope Training days

// The scope of `random` is too loose 


const getRandEvent = () => {
  const random = Math.floor(Math.random() * 3);
  if (random === 0) {
    return 'Marathon';
  } else if (random === 1) {
    return 'Triathlon';
  } else if (random === 2) {
    return 'Pentathlon';
  }
};

// The scope of `days` is too tight 
const getTrainingDays = event => {
let days ="";
  if (event === 'Marathon') {
    days = 50;
  } else if (event === 'Triathlon') {
    days = 100;
  } else if (event === 'Pentathlon') {
     days = 200;
  }

  return days;
};
const name = 'Nala';
// The scope of `name` is too tight 
const logEvent = (name, event) => {
  console.log(`${name}'s event is: ${event}`);
};

const logTime = (name,days) => { 
  console.log(`${name}'s time to train is: ${days} days`);
};

const event = getRandEvent();
const days = getTrainingDays(event);
// Define a `name` variable. Use it as an argument after updating logEvent and logTime 


logEvent(name,event);
logTime(name,days);

const event2 = getRandEvent();
const days2 = getTrainingDays(event2);
const name2 = 'Warren';
 
logEvent(name2, event2);
logTime(name2, days2);

#javascript

Race day conditionals

let raceNumber = Math.floor(Math.random() * 1000);
console.log(raceNumber);

let early = false;

let age = 18;

if(early && age >18){
  raceNumber += 1000;
}

if(early && age >18){
  console.log(`You will race at 9:30am and your race number is ${raceNumber}`);
}else if(!early && age>18){
  console.log(`You will race at 11:00am and your race number is ${raceNumber}`)
}else if(age < 18){
  console.log(`You will race at 12:30pm and your race number is ${raceNumber}`);
} else( console.log("Go to the registration desk please."))

#javascript #chrome #extension

Set key-values in chrome extension storage

const storage = {
   async set(key, value){
      return new Promise(resolve => {
         chrome.storage.local.set({[key]: value}, (a) => resolve(a[key]))
      })
   },
   get(key){
      return new Promise(resolve => {
         chrome.storage.local.get([key], (a) => resolve(a[key]));
      })
   }
}

#javascript #chrome #extension

Get the active tab in a chrome extension (includes fallbacks)

function getActiveTab(){
   return new Promise((r, reject) => {
      chrome.tabs.query({
         active: true,
         lastFocusedWindow: true,
      }, (tabs) => {
         if (tabs.length){
            r(tabs[0]);
         } else {
            chrome.tabs.query({}, tabs => {
               if (tabs.length){
                  if (tabs.length === 1){
                     r(tabs[0]);
                  } else if (tabs.find(i => i.active)){
                     r(tabs.find(i => i.active))
                  } else {
                     reject("No tab found");
                  }
               } else {
                  reject("No tab found");
               }
            })
         }
      })
   });
}

#javascript #extension #chrome

Chrome Extension Permissions Utilities (manifest V3)

const permissions = {
   async add(permission = [], origins = []){
      if (!origins?.length){origins = undefined};
      if (typeof permission === "string"){permission = [permission]};
      return new Promise((r, reject) => {
         chrome.permissions.request(
            {permissions: permission, origins},
            (granted) => {
               if (!granted){
                  reject("Permission not granted");
               } else {
                  r();
               }
            }
         )
      })
   },
   async remove(permission = [], origins = []){
      if (!origins?.length){origins = undefined};
      if (typeof permission === "string"){permission = [permission]};
      return new Promise((r, reject) => {
         chrome.permissions.remove(
            {permissions: permission, origins},
            (removed) => {
               if (!removed){
                  reject("Permission not removed");
               } else {
                  r();
               }
            }
         )
      })
   },
   async with(permission = [], origins = [], func){
      if (!origins?.length){origins = undefined};
      if (typeof permission === "string"){permission = [permission]};
      await new Promise((r, reject) => {
         chrome.permissions.request(
            {permissions: permission, origins},
            (granted) => {
               if (!granted){
                  reject("Permission not granted");
               } else {
                  r();
               }
            }
         )
      });
      let out = await func();
      await new Promise((r, reject) => {
         chrome.permissions.remove(
            {permissions: permission, origins},
            (removed) => {
               if (!removed){
                  reject("Permission not removed");
               } else {
                  r();
               }
            }
         )
      })
      return out;
   },
}

#javascript #event

Event emitter hub

let hub = () => ({
  hub: Object.create(null),
  emit(event, data) {
    (this.hub[event] || []).forEach((handler) => handler(data));
  },
  on(event, handler) {
    if (!this.hub[event]) this.hub[event] = [];
    this.hub[event].push(handler);
  },
  off(event, handler) {
    const i = (this.hub[event] || []).findIndex((h) => h === handler);
    if (i > -1) this.hub[event].splice(i, 1);
    if (this.hub[event].length === 0) delete this.hub[event];
  },
});

#javascript #developer-facing #reload

Hot reload the current page

(async ({
  interval = 500,
  method = "fetch",
  useIframe = false,
  resources = [],
  autoDetect = true,
  resourceTypes = ["navigation", "script", "resource", "link", "img", "other"],
}) => {
  if (autoDetect) {
    resources = performance
      .getEntries()
      .filter((i) => resourceTypes.includes(i.initiatorType))
      .map((i) => i.name);
  } else if (!resources.length) {
    resources = [location.href];
  }
  console.log({ interval, method, useIframe, resources });
  if (useIframe) {
    document.documentElement.innerHTML = "";
    window.stop();
  }
  let text = await getText(resources, method);
  if (useIframe) {
    let ifr = document.createElement("iframe");
    ifr.id = "hotreload";
    (document.body || document.documentElement).appendChild(ifr);
    document
      .querySelector("iframe#hotreload")
      .setAttribute(
        "style",
        `position: fixed; top: 0; right: 0; left: 0; bottom: 0; display: block;`
      );
    document.querySelector(
      "iframe#hotreload"
    ).style.width = `${window.innerWidth}px`;
    document.querySelector(
      "iframe#hotreload"
    ).style.height = `${window.innerHeight}px`;
    update({ old: "", newText: text });
  }
  let int = setInterval(async () => {
    let newText = await getText(resources, method);
    if (newText !== text) {
      update({ old: text, newText });
    }
  }, interval);

  function update({ old, newText }) {
    if (useIframe) {
      let ifr = document.querySelector("iframe#hotreload");
      if (!ifr) {
        throw new Error("[hotreload] iframe#hotreload nonexistant");
      }
      let dataURL = `data:text/html,${encodeURIComponent(newText)}`;
      ifr.src = dataURL;
      text = newText;
    } else {
      clearInterval(int);
      location.reload();
    }
  }

  async function getText(resources, method = "fetch") {
    return JSON.stringify(
      await Promise.all(resources.map((i) => f(i, method)))
    );
    async function f(url, method) {
      method = method.toLowerCase();
      if (method === "fetch") {
        return await fetch(url).then((res) => res.text());
      } else if (method === "xmlhttprequest") {
        return await new Promise((resolve) => {
          let req = new XMLHttpRequest();
          req.addEventListener("load", (r) => resolve(r.responseText));
          req.open(url);
          req.send();
        });
      }
    }
  }
})(window.HOTRELOAD_OPTIONS || {});

#javascript

Magic 8 ball switch/case

userName='Greg';
userName ? console.log(`Hello, ${userName}`) : console.log('Hello');

let userQuestion = "Will the Giants win 14 games?";

console.log(`${userName} has asked - ${userQuestion}`);

let randomNumber = Math.floor(Math.random()*8);

console.log(randomNumber);

let eightball = '';

switch(randomNumber){
  case 0:
  eightball = 'It is certain';
  break;
  case 1:
  eightball = 'It is decidely so';
  break;
  case 2:
  eightball = 'reply hazy try again';
  break;
  case 3:
  eightball = 'cannot predict now';
  break;
  case 4:
  eightball = 'do not count on it';
  break;
  case 5:
  eightball = 'my sources say no';
  break;
  case 6:
  eightball = 'you can bet on it';
  break;
  case 7:
  eightball = 'there is no doubt';
  break;
}

console.log(`The Magic 8 ball says ${eightball}.`);

#javascript

JS Cookie Library

With this library, you can create cookies using Cookies.set(). You can also define the number of days until the cookie expires:

Cookies.set('name', 'Buffy', { expires: 365 });

Additionally, you can use Cookies.set() to update cookies.

Cookies.set('name', 'Sabrina', { expires: 50 });

With the JavaScript Cookie library, you can specify which data you want to extract using Cookies.get():

Cookies.get('name'); //returns Sabrina
To delete a cookie, you no longer need to specify an expiry date in the past; instead, you can use:

Cookies.remove('name');

#javascript

To create a new cookie with an expiration date

document.cookie = ‘name=Buffy; expires=Fri, 15 Dec 2020 23:00:00 GMT’;

let myCookies = document.cookie;

This command returns all cookies, meaning you’d have to manually extract the data you need.

The code for updating a cookie is similar to the code for creating a new one—you simply overwrite the existing cookie with a new value. Let’s change the user’s name from “Buffy” to “Sabrina”:

document.cookie = 'name='Sabrina'; expires=Fri, 15 Dec 2020 23:00:00 GMT';
To delete a cookie, you do the same thing again. This time, however, you should set expires to be a date in the past:

document.cookie = 'name='Sabrina'; expires=Fri, 15 Dec 1970 10:00:00 GMT';

#javascript

node.js - Find (and kill) process locking port 3000 on Mac - Stack Overflow

 netstat -vanp tcp | grep 3000

#javascript #react.js #typescript

Eslint config file in JS format - .eslintrc.js

module.exports = {
  globals: {
    module: true,
  },
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  plugins: ["react", "@typescript-eslint"],
  settings: {
    react: {
      pragma: "React",
      version: "detect",
    },
  },
  rules: {
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/explicit-module-boundary-types": 0,
    "react/react-in-jsx-scope": 0,
  },
  'import/order': [
    2,
    {
      'newlines-between': 'always',
      groups: [
        'builtin',
        'external',
        'internal',
        'parent',
        'sibling',
        'index',
        'unknown',
        'object',
        'type',
      ],
      alphabetize: {
        order: 'asc',
        caseInsensitive: true,
      },
      pathGroups: [
        {
          pattern: 'react*',
          group: 'external',
          position: 'before',
        },
      ],
    },
  ],
};

// Add lint script to package.json
// "lint": "eslint './src/**/*.{ts,tsx}'"

#javascript #nodejs

Allowing CORS in NodeJS runtime

import cors from "cors"; //ES6
const cors = require("cors"); //commonjs

const corsOptions = {origin: "*", methods: ["GET, HEAD, PUT, PATCH, POST, DELETE"], credentails: true, optionsSuccessStatus: 200};
app.use(cors(corsOptions));

#javascript #nodejs #react.js

Configure eslint with Airbnb rules extension and Prettier in React apps

$npm install --save-dev eslint @babel/eslint-parser eslint-plugin-react eslint-plugin-react-native ...

// AUTOMATIC CONFIG FILE
$npm init @eslint/config

//GLOBAL INSTALLATION AND USE
$npm i -g eslint
$eslint --init

// PACKAGE.JSON
{ //...,
  
  "devDependencies": {
    "@babel/eslint-parser": "^7.18.9",
    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
    "@typescript-eslint/eslint-plugin": "^5.32.0",
    "@typescript-eslint/parser": "^5.32.0",
    "eslint": "^8.21.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-react": "^7.30.1",
    "eslint-plugin-react-hooks": "^4.6.0"
  },
   //...
}

// TSCONFIG.JSON
{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src/**/*"
  ]
}


// .ESLINTRC
{
  "globals": {
    "module": true
  },
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint"
  ],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/explicit-module-boundary-types": 0,
    "react/react-in-jsx-scope": 0,
    "quotes": [
      "error",
      "double"
    ],
    "import/extensions": 0,
    "import/no-unresolved": 0,
    "linebreak-style": [
      "error",
      "windows"
    ],
    "operator-linebreak": "off",
    "react/jsx-filename-extension": 0,
    "no-shadow": "off",
    "jsx-a11y/label-has-associated-control": 0,
    "react/jsx-no-bind": 0,
    "no-unused-expressions": [
      "warn",
      {
        "allowShortCircuit": true,
        "allowTernary": true
      }
    ]
  }
}

// .PRETTIERRC
{
  "trailingComma": "all",
  "importOrder": [
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "next-seo.config",
    "^components/(.*)$",
    "^utils/(.*)$",
    "^assets/(.*)$",
    "^@fontsource/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

#javascript

Current

IF({Current progress},ABS({Current progress}),0)

#javascript

Dot Goal

ABS(Goal)

#javascript

% Progress Dots

IF(
    {Dot Goal},
    REPT(
        ' ',
        3-LEN(
            INT(
                (IF(
                    Current<={Dot Goal},
                    Current,
                    {Dot Goal}
                    )/{Dot Goal})*100
                )&''
            )
        )&
        INT(
           (IF(
                Current<={Dot Goal},
                Current,
                {Dot Goal}
                )/{Dot Goal})*100
            )&
        '% '&
        REPT(
            '🔴',
            INT(
                (IF(
                    Current<={Dot Goal},
                    Current,
                    {Dot Goal}
                    )/{Dot Goal})*10
                )
            )&
            IF(
                ROUND(
                    MOD(
                        (IF(
                            Current<={Dot Goal},
                            Current,
                            {Dot Goal}
                            )/{Dot Goal})*10,
                        1
                        ),  
                    0
                    )=1,
                '❗️'
                )
				)

#javascript

Express Simple Guide

//to run : node filename.js
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

//visit localhost:3000
// assuming you have done 1) npm init 2) npm install express

#php #javascript #html #blade

Live search in Laravel using AJAX

https://medium.com/@cahyofajar28/live-search-in-laravel-8-using-ajax-and-mysql-ac4bc9b0a93c

#javascript

Uzimanje parametra iz URL-a

function getUrlParameter() {

    var sPageURL = window.location.href;

    var sURLVariables = sPageURL.split("/");

    if (sURLVariables.length > 3) {
        return sURLVariables[sURLVariables.length - 1];
    }
    else {
        return null;
    }
}

#javascript #ui #cute

bubbles random color

function bubbleHover() {
  for (var e = document.querySelectorAll('circle'), t = 0; t < e.length; t++) {
    e[t].addEventListener('mouseover', function () {
      fillColor(this)
    })
  }
}
function fillColor(e) {
  e.setAttribute('style', 'fill:' + colors[Math.floor(Math.random() * colors.length)])
}

#javascript #array #quicksort

Quick Sort JavaScript

function quickSort(arr) {
  if (arr.length <= 1) {
    return arr;
  }
  const Pivot = arr[arr.length - 1];
  const LeftSide = [];
  const RightSide = [];
  for (let index = 0; index < arr.length - 1; index++) {
    if (arr[index] < Pivot) {
      LeftSide.push(arr[index]);
    } else {
      RightSide.push(arr[index]);
    }
  }
  return [...quickSort(LeftSide), Pivot, ...quickSort(RightSide)];
}
const a = quickSort([1, 2, 5, 7, 3, 0.99, -199, -1, 99]);

a; // [ -199, -1, 0.99, 1, 2, 3, 5, 7, 99 ]

#javascript

conditional object

let inbox = true;
let assign = {...(inbox ? {assign_to: 2} : {})};
console.log("assign", assign);

inbox = false;
assign = {...(inbox ? {assign_to: 2} : {})};
console.log("assign", assign);

#javascript

javascript - How do make an api fetch request on button click Reactjs? - Stack Overflow

const App = () => {
  const [YearList, setYearsData] = useState([]);
  const [NamesList, setNameData] = useState([]);
  const [itemList, setItemList] = useState([]);

  let [year, setYear] = useState(null);
  let handleYearChange = (e) => {
    setYear(e.target.value);
  };

  let [searchQuery, setSearchQuery] = useState('');
  let handleSearchChange = (e) => {
    setSearchQuery(e.target.value);
  };

  let [year, setYear] = useState(null);
  let handleYearChange = (e) => {
    setYear(e.target.value);
  };

  let [searchQuery, setSearchQuery] = useState('');
  let handleSearchChange = (e) => {
    setSearchQuery(e.target.value);
  };

  const fetchYearList = async () => {
    try {
      const response = await fetch('http://localhost:56384/api/YearList');
      setYearsData(await response.json());
    } catch (error) {
      console.log('Failed to fetch from Amazon DB', error);
    }
  };

  const fetchNameList = async () => {
    try {
      const response = await fetch('http://localhost:56384/api/NameList');
      setNameData(await response.json());
    } catch (error) {
      console.log('Failed to fetch from Amazon DB', error);
    }
  };

  const fetchItemData = async () => {
    try {
      const response = await fetch(
        `http://localhost:56384/api/RecallSearch?searchText=${searchQuery}&year=${year}`
      );
      const itemData = await response.json();
      setItemList(itemData);
    } catch (error) {
      console.log('Failed to fetch from Amazon DB', error);
    }
  };

  const handleSearch = () => {
    fetchItemData();
  };

  useEffect(() => {
    fetchYearList();
    fetchNameList();
    fetchItemData();
  }, []);

  return (
    <div className='App'>
      <TitleCard />
      <input
        type='text'
        value={searchQuery}
        onChange={handleSearchChange}
        placeholder='Search Amazon Items'
      />
      <select onChange={handleYearChange}>
        <option value='-- Select year --'> -- Select a Year -- </option>
        {YearList.map((year) => (
          <option key={year} value={year}>
            {year}
          </option>
        ))}
      </select>
      //Button that isnt working
      <button onClick={handleSearch}>Search</button>
    </div>
  );
};

export default App;

#javascript

verifyIfHasShippingMethodsInAllPaymentTypes

verifyIfHasShippingMethodsInAllPaymentTypes: function () {
  var widget = this;
  var selectedShippingMethod = widget.cart().shippingMethod();
  var shippingMethodNotAvailable = widget.paymentTypes().some(function (paymentType) {
      if (!(paymentType.hasOwnProperty('freights') && paymentType.freights && paymentType.freights.includes(selectedShippingMethod))) {
          return paymentType
      }
  })
  if (!shippingMethodNotAvailable) {
      widget.enableAllPaymentTypes(true);
  }
},

#javascript #react.js

Create HTML element in React

const container = React.createElement('div', {}, [title, paragraph]);
const container = React.createElement('div', {className='container'}, [title, paragraph]);
const container = React.createElement('div', {className='container', children: 'Hello Stranger'});

// with JSX
const container = <div className='container'>Hello Stranger</div>

#javascript #react.js

Map() implementation

// with return with a single child
{events.map((item) => {
  return <p>{item.title}</p>;
  }
)}

// with return with a multiple children
{events.map((item) => {
  return (
  <>
    <p>{item.title}</p>
   <p>{item.description}</p>
  </>
  );
 }
)}

// with return and conditional
{events.map((item, index) => {
  if (index % 2 === 0) {
    return (
      <p>{index}{item.title}</p>
  	);
  }
})}

//no return declaration and single child
{events.map((item, index) => (
  <p>{item.title}</p>
  )
)}

//no return declaration and multiple chidlren
{events.map((item, index) => (
  <>
  	<p>{item.title}</p>
  	<p>{item.description}</p>
  </>
 )
)}

//Ps.: conditionals are only allowed with return declaration

#javascript #react.js

Iterate a list and adding/grouping components according to its index

// Consider a array that you need to map to display it
// You want to group the array content into pairs
// Each pair will have: open div tag + pair of items + close div tag
// To reach that, use index during the mapping, like below
// Ps.: The list I have to reproduce this has 15 items

var openDiv = "<div>";
var closeDiv = "</div>";
var animation = "--- collapsible content ---";

list.map((item, index) => {
  // call all odd indexes and last item of the list, opening the div before each one
  if (index % 2 === 0 || index === mealList.length - 1) {
    console.log(openDiv);
    console.log(index, item.foodItem);
  }
  // call all even numbers, closing the div after each one
  if (index % 2) {
    console.log(index, item.foodItem);
    console.log(closeDiv);
    console.log(animation);
    console.log(" ");
  }
  // call the last item of the list to close the div
  if (index === mealList.length - 1) {
    console.log(closeDiv);
    console.log(animation);
  }
});

/* 
Output:
<div>
0 Oven Mitt - 13 Inch
1 Lamb - Bones
</div>
--- collapsible content ---
 
<div>
2 Mcguinness - Blue Curacao
3 Pumpkin - Seed
</div>
--- collapsible content ---

<div>
4 Onions - Red Pearl
5 Wine - Rioja Campo Viejo
</div>
--- collapsible content ---

<div>
6 Pepper - Green, Chili
7 Coffee Caramel Biscotti
</div>
--- collapsible content ---

<div>
8 Water - Perrier
9 Bread - Multigrain
</div>
--- collapsible content ---

<div>
10 Veal - Tenderloin, Untrimmed
11 Butcher Twine 4r
</div>
--- collapsible content ---

<div>
12 Extract Vanilla Pure
13 Strawberries - California
</div>
--- collapsible content ---

<div>
14 Nut - Walnut, Chopped
</div>
--- collapsible content ---
*/

#javascript

⬛ Tutorial - Client Proposal Opportunities STage

IF(FIND("Closed Won",Stage)>0,"Won",IF(FIND("Closed Lost",Stage)>0,"Lost","Open"))

#javascript

Due Date - Status Airtable

IF(Due = BLANK(), "", IF(Done, "Completed", IF(DATETIME_DIFF(Due, TODAY(), 'days') =-1, "🟡  Due Yesterday",IF(DATETIME_DIFF(Due, TODAY(), 'days') =0, "🔵  Due Today", IF(DATETIME_DIFF(Due, TODAY(), 'days') =1, "Due Tomorrow", IF(DATETIME_DIFF(Due, TODAY(), 'days') <-1, "🔴  Overdue (" & DATETIME_DIFF(TODAY(), Due, 'days') & " days)", IF(DATETIME_DIFF(Due, TODAY(), 'days') >1, "Due in " & (DATETIME_DIFF(Due, TODAY(), 'days') & " days"))))))))

#javascript

2. Creating a custom report

let table = base.getTable('Design projects');
let result = await table.selectRecordsAsync();
output.markdown('# Project report generator');
let type = await input.buttonsAsync(
    'Which report would you like to generate?',
    [
        'Completed Projects',
        'Incomplete Projects',
    ],
);
output.clear();
output.markdown(`# ${type} Report`);
let records;
if (type === 'Completed Projects') {
    records = result.records.filter(record => record.getCellValue('Complete'));
} else {
    records = result.records.filter(record => !record.getCellValue('Complete'));
}
function countByField(records, groupByField) {
    let counts = {};
    for (let record of records) {
        let key = record.getCellValueAsString(groupByField);
        if (key in counts) {
            counts[key] = counts[key] + 1;
        } else {
            counts[key] = 1;
        }
    }
    return counts;
}
output.markdown('## Categories');
let categoryCounts = countByField(records, 'Category');
output.table(categoryCounts);
output.markdown('## Projects');
output.table(
    records.map(record => ({
        Name: record.getCellValue('Name'),
        Category: record.getCellValue('Category'),
        'Project lead': record.getCellValue('Project lead'),
        Client: record.getCellValue('Client'),
    })),
);
output.markdown(`**Total**: ${records.length}`);

#javascript #react.js

Add a new object to a list (array) in React

const [inputValue, setInputValue] = useState('');
const [list, setList]= useState([]);

handleAddIntemOnList(){
  // create a new item as object to be added to the list array
  const newItem = {
    name: inputValue,
    addedAt: new Date().toLocaleTimeString("pt-br", {
      hour: '2-digit',
      minute: '2-digit'
    })
  }
  // save into the list state
  setList(prevState => [...prevState, newItem])
}

#javascript #react.js

Keep the previous state in React useState

setState(prevState => [...prevState, newState])

#javascript #react.js

Create and format the current hour with JS

const createdAt = new Date().toLocaleTimeString("pt-br", {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
})

#javascript

打字机

function updateSpeed() {
    speedNum = 600 / speedDom.value;
    console.log(speedNum);
}

#javascript #shopify

Checkbox filter


jQuery('.main-button').click(function () {

   if(jQuery('.main-button').prop("checked") == false ){

    jQuery(".projectmain-div").removeClass('h-activeall');
	  jQuery(".main-button").removeClass("is-checked");
	   
	}
	if(jQuery('.main-button').prop("checked") == true ){

    jQuery(".projectmain-div").addClass('h-activeall');
	  jQuery(".main-button").addClass("is-checked");
	jQuery(".sub-button").prop("checked", false);
	jQuery(".projectmain-div").removeClass('active-this');
	
	}


});
jQuery('.sub-button').click(function(){
    jQuery("input.button.is-checked.main-button").click();
    jQuery("input.button.is-checked.main-button").removeClass("is-checked");
     
    var dival = jQuery(this).attr("data-filter");
         
    jQuery(dival).addClass("active-this");
    //alert('sdfa');
	if(jQuery(this).prop("checked") == false ){
		jQuery(dival).removeClass('active-this');
	}
	

});

#javascript #lwc

How to use getRecord in LWC

import { LightningElement, wire, api } from "lwc";

//1. import the methods getRecord and getFieldValue
import { getRecord, getFieldValue } from "lightning/uiRecordApi";

//2. Import reference to the object and the fields
import NAME_FIELD from "@salesforce/schema/Account.Name";
import RATING_FIELD from "@salesforce/schema/Account.Rating";
import INDUSTRY_FIELD from "@salesforce/schema/Account.Industry";

const fields = [NAME_FIELD, RATING_FIELD, INDUSTRY_FIELD];
export default class ExploreGetRecord extends LightningElement {
  @api
  recordId;

  //3. Wire the output of the out of the box method getRecord to the property account
  @wire(getRecord, {
    recordId: "$recordId",
    fields
  })
  account;

  renderedCallback() {
    console.log(this.account.data);
  }
  
  //4. Fetch the field values from the record
  get name() {
    return getFieldValue(this.account.data, NAME_FIELD);
  }

  get rating() {
    return getFieldValue(this.account.data, RATING_FIELD);
  }

  get industry() {
    return getFieldValue(this.account.data, INDUSTRY_FIELD);
  }
}

#javascript

SSE setup member interplayers

app.post('/occ-intera-business-gateway-setup-member', function (req, res) {
  if (req.body.captchaToken) {

    var options = {
      'method': 'POST',
      'url': 'https://www.google.com/recaptcha/api/siteverify?secret=' + recaptchaSeccret + '&response=' + req.body.captchaToken,
      'headers': {
      }
    };

    request(options, function (error, response) {
      if (JSON.parse(response.body).success) {

        req.query.apiKey = process.env.OIBG_APIKEY;
        proxy(req, res, 'https://occ-intera-business.gateway.linkapi.com.br');

      } else {
        return res.status(400).json({ error: "not auth", code: 20051 })
      }
    });
  } else {
    return res.status(400).json({ error: "not auth", code: 10102 })
  }
});

#javascript #leetcode

Two Sum - Submission Detail - LeetCode

/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number[]}
 */
/*
var twoSum = function(nums, target) {
    var targetMap = new Map();
    var result = new Array();
    for(var i = 0; i < nums.length; i++)
        {
            var diff = target - nums[i];
            if(!targetMap.has(diff)){
                targetMap.set(nums[i],i);
            }else{
                result[0] = targetMap.get(diff);
                result[1] = i;
                return result;
            }
        }
    return result;
};
*/
const twoSum = function(nums, target) {
    const comp = {};
    for(let i=0; i<nums.length; i++){
        if(comp[nums[i] ]>=0){
            return [ comp[nums[i] ] , i]
        }
        comp[target-nums[i]] = i
    }
};

#javascript #shopify

Shopify Check if template =

{% if template.name != "index" %} 
 do something
{% endif %}

#javascript #shopify

Disabling Shopify App via code

### Disabling all apps code loaded via `content_for_header`

Apps are all loaded in the header via a single script call, then the remaining assets are loaded below. This process takes place in the liquid tag `content_for_header`.

1. Open theme.liquid and locate the line which reads `{{ content_for_header }}`.

2. Now you can paste the following block of code to disable all apps on a new line before `{{ content_for_header }}`.

```
{% comment %} Leave url_to_remove as 0 to remove all apps, or set to a number to remove a specific app. {% endcomment %}
  {% assign url_to_remove = 0 %}
  {% assign lines = content_for_header | newline_to_br | split: '<br />' %}
  
  {% for line in lines %}
    {% if line contains 'var urls' %}
      {% if url_to_remove == 0 %}
        {% comment %}Remove all apps{% endcomment %}
        {% capture new_line %}
        {% endcapture %}
        {% assign empty_array = new_line | append: "var urls = [];" %}
        {% assign content_for_header = content_for_header | replace: line, empty_array %}
        <!-- Removed all apps. -->
      {% else %}
        {% assign url_string = line | remove: "var urls = [" | remove: "];" | strip %}
        {% assign url_array = url_string | split: ',' | uniq %}
        {% comment %}Just remove app at index 'url_to_remove' {% endcomment %}
          {% for url in url_array %}
            {% if forloop.index == url_to_remove %}
              {% assign content_for_header = content_for_header | replace: url, '""' %}
              <!-- Removed app no. {{ url_to_remove }} of {{ url_array.size }}: {{ url }} -->
        {% endif %}
        {% endfor %}
      {% endif %}
    {% endif %}
  {% endfor %}
```

3. Save theme.liquid. The above code will remove the assets of all apps enabled on the account by removing them from `{{ content_for_header }}`, so will disable every app which is loaded through there.

### Disabling Individual Apps

If we want to discover which of the 17 apps a store has installed is breaking everything we can disable apps one by one to troubleshoot.

1. Use the same block of code mentioned above, but don't save theme.liquid yet.

2. Now change the value of the liquid variable `url_to_remove` to a number to disable that specific app (e.g. changing it to 3 will disable the 3rd app enabled by {{ content_for_header }}, leaving the value as 0 will disable all apps). Now you can start running through each app to troubleshoot that issue.

3. Visit the storefront in Google Chrome when you have an app disabled and use the inspect tool to search in the storefront's code for the following text: `Removed app no.`. You can repeat this step, disabling each app on the store 1 by 1 until you find the one causing the issue.

#javascript #array #set

Remove Array Duplicates

const removeArrDup = (arr = []) => [... new Set(arr)]

removeArrDup([1,1,2,2,2,3])
// Expect output to be  [1,2,3]

#javascript

Map Objects JavaScript new Map()

// Create New map
const MapObject = new Map();

// Insert New Elements 
MapObject.set("One" , 1 ) ;

// Map has size property count elements
console.log("Map Size  : " , MapObject.size)
// expect output to be  Map Size  : 1

// Map Key Could be any Thing 

MapObject.set(2 , "Two");
console.log("Map Size  : " , MapObject.size)
// expect output to be  Map Size  : 2


MapObject.set( {body : 3} , "Three");
console.log("Map Size  : " , MapObject.size)
// expect output to be  Map Size  : 3

console.log ("Map Object : " , MapObject)
// expect output to be Map Object :  Map(3) {'One' => 1, 2 => 'Two', {…} => 'Three'}

// Map Object  unlike object it's iterable .entries() , .Keys() , .values()
let values = []
for (let item of MapObject.entries()) {
   values.push( item)
}
console.log ("array values :" , values)

#javascript #react.js

Cleanup create-react-app

If you want to get rid of unnecessary files created by create-react-app you can:
1. Install this: npm i -g cleanup-react-app
2. Run inside your REACT project: cleanup-react-app

#javascript

Maskify

function maskify(cc) {
  return cc.slice(-4).padStart(cc.length,'#')
}

#javascript

Odd or even

const oddOrEven = (num) => ((num % 2) === 1) ? 'odd' : 'even';

console.log(oddOrEven(1));
console.log(oddOrEven(2));

or,

const evenOrOdd = (num) => ((num % 2) === 0) ? 'even' : 'odd';

console.log(evenOrOdd(1));
console.log(evenOrOdd(2));

#php #javascript

Image is often missing on first render on Safari iOS · Issue #343 · tsayen/dom-to-image · GitHub

domtoimage.toJpeg(imageCard, {
    width: 1080,
    height: 1080,
    quality: 0.5,
  }).then(dataUrl => {
  domtoimage
    .toJpeg(imageCard, {
      width: 1080,
      height: 1080,
      quality: 0.5,
    })
    .then(dataUrl2 => {
      //Do your all stuff with dataUrl2...
    });
  });

#javascript

javascript - Filter array of objects whose any properties contains a value - Stack Overflow

function filterByValue(array, string) {
    return array.filter(o =>
        Object.keys(o).some(k => o[k].toLowerCase().includes(string.toLowerCase())));
}

const arrayOfObject = [{ name: 'Paul', country: 'Canada', }, { name: 'Lea', country: 'Italy', }, { name: 'John', country: 'Italy' }];

console.log(filterByValue(arrayOfObject, 'lea')); // [{name: 'Lea', country: 'Italy'}]
console.log(filterByValue(arrayOfObject, 'ita')); // [{name: 'Lea', country: 'Italy'}, {name: 'John', country: 'Italy'}]

#javascript

Dog years

let myAge = 25;
let earlyYears = 2;
earlyYears *= 10.5;

let laterYears = (myAge-2);
console.log(laterYears);
console.log(earlyYears);

laterYears *= 4;
console.log(laterYears);

let myAgeInDogYears= (laterYears + earlyYears);
console.log(myAgeInDogYears);


let myName = "Sequan".toLowerCase();

console.log(`My name is ${myName}. I am ${myAge} years old in human years which is ${myAgeInDogYears} years old in dog years. `)

#javascript

string interpolation example

const myPet = 'armadillo';
console.log(`I own a pet ${myPet}.`);

let myName = 'Natalia';
let myCity = 'Mexico City';

console.log(`My name is ${myName}. My favorite city is ${myCity}.`)

#javascript

Pass by reference

let spaceship = {
  'Fuel Type' : 'Turbo Fuel',
  homePlanet : 'Earth'
};

// Write your code below

let greenEnergy = obj => {
  obj['Fuel Type'] = 'avocado oil';
}

let remotelyDisable = obj => {
  obj.disabled = true;
}

greenEnergy(spaceship);

remotelyDisable(spaceship);

console.log(spaceship)

#javascript

Nested Objects

let spaceship = {
  passengers: [{name: 'Space Dog'}], 
  telescope: {
    yearBuilt: 2018,
    model: "91031-XLT",
    focalLength: 2032 
  },
  crew: {
    captain: { 
      name: 'Sandra', 
      degree: 'Computer Engineering', 
      encourageTeam() { console.log('We got this!') },
     'favorite foods': ['cookies', 'cakes', 'candy', 'spinach'] }
  },
  engine: {
    model: "Nimbus2000"
  },
  nanoelectronics: {
    computer: {
      terabytes: 100,
      monitors: "HD"
    },
    'back-up': {
      battery: "Lithium",
      terabytes: 50
    }
  }
}; 

let capFave = spaceship.crew.captain['favorite foods'][0];

let firstPassenger = spaceship.passengers[0];

console.log(capFave);
console.log(firstPassenger);

#javascript

object methods

let retreatMessage = 'We no longer wish to conquer your planet. It is full of dogs, which we do not care for.';

// Write your code below

let alienShip = {
  retreat() {
    console.log(retreatMessage)
  },
  takeOff() {
    console.log('Spim... Borp... Glix... Blastoff!')
  }
};

alienShip.retreat();

alienShip.takeOff();

#javascript

changing Objects properties

let spaceship = {
  'Fuel Type' : 'Turbo Fuel',
  homePlanet : 'Earth',
  color: 'silver',
  'Secret Mission' : 'Discover life outside of Earth.'
};

// Write your code below

spaceship.color = 'glorious gold';

spaceship.numEngines = 9;

delete spaceship['Secret Mission'];

#javascript

object bracket notation

let spaceship = {
  'Fuel Type' : 'Turbo Fuel',
  'Active Mission' : true,
  homePlanet : 'Earth', 
  numCrew: 5
 };

let propName =  'Active Mission';

// Write your code below

let isActive = spaceship['Active Mission'];

console.log(spaceship[propName]);

#javascript

Object dot notation

let spaceship = {
  homePlanet: 'Earth',
  color: 'silver',
  'Fuel Type': 'Turbo Fuel',
  numCrew: 5,
  flightPath: ['Venus', 'Mars', 'Saturn']
};

// Write your code below

let crewCount = spaceship.numCrew;

let planetArray = spaceship.flightPath;

#javascript #videoplay

Video Sound ON/OFF JavaScript

  document.addEventListener('DOMContentLoaded', function() {
var toggleSoundButton = document.querySelector('.toggle_sound');
var icon = document.querySelector('.toggle_sound i');
var heroBackgroundVideo = document.querySelector('.video video');
toggleSoundButton.addEventListener('click', function (event) {
if (heroBackgroundVideo.muted !== false){
	 
heroBackgroundVideo.muted=false;
icon.classList.add("fa-volume-up");
} else {
	 
heroBackgroundVideo.muted=true;
icon.classList.remove("fa-volume-up");
} }); });

#javascript

Automator

tell application "Google Chrome"
    tell active tab of front window
        execute javascript "document.getElementsByClassName('artdeco-button artdeco-button--2 artdeco-button--secondary ember-view m1')[0].click();"
    end tell
end tell

#javascript

ORBE Footer Selector JS

class MDFooterSelectorLocalizationForm extends HTMLElement {
        constructor() {
            super();
            this.elements = {
                selectorCountry: this.querySelector("#md-footer-selector__country"),
                selectorLanguage: this.querySelector("#md-footer-selector__language")
            };
            this.elements.selectorCountry.addEventListener('change', this.onItemChange.bind(this));
            this.elements.selectorLanguage.addEventListener('change', this.onItemChange.bind(this));
        }
 
        onItemChange() {
            const form = this.querySelector('form');
 
            let countrySelector = document.getElementById('md-footer-selector__country');
            let countryCode = countrySelector[countrySelector.selectedIndex].dataset.country;
            let countryCodeDomain = document.domain;
 
            if (typeof document.domain.split('.')[3] !== 'undefined') {
                countryCodeDomain = document.domain.split('.')[2]+'.'+document.domain.split('.')[3];
            } else if (typeof document.domain.split('.')[2] !== 'undefined') {
                countryCodeDomain = document.domain.split('.')[1]+'.'+document.domain.split('.')[2];
            }
          
          	let mdCountryRedirect = '';
            let formInputReturnTo = document.querySelector("#md-footer-selector__form__id input[name='return_to']");

            if (formInputReturnTo.value.includes('?')) {
                mdCountryRedirect = '&mdApp_countryCodeDomain=' + countryCode;
            } else {
                mdCountryRedirect = '?mdApp_countryCodeDomain=' + countryCode;
            }
            formInputReturnTo.value = formInputReturnTo.value + mdCountryRedirect;
          
            document.cookie = `mdApp_countryCodeDomain=${countryCode}; domain=${countryCodeDomain}; path=/; max-age=${60 * 60 * 24 * 60};`;
 
            if (form) {
                form.submit();
            }
        }
    }
    customElements.define('md-footer-selector__form', MDFooterSelectorLocalizationForm);

#javascript

ORBE Footer Selector JS

class MDFooterSelectorLocalizationForm extends HTMLElement {
        constructor() {
            super();
            this.elements = {
                selectorCountry: this.querySelector("#md-footer-selector__country"),
                selectorLanguage: this.querySelector("#md-footer-selector__language")
            };
            this.elements.selectorCountry.addEventListener('change', this.onItemChange.bind(this));
            this.elements.selectorLanguage.addEventListener('change', this.onItemChange.bind(this));
        }

        onItemChange() {
            const form = this.querySelector('form');

            let countrySelector = document.getElementById('md-footer-selector__country');
            let countryCode = countrySelector[countrySelector.selectedIndex].dataset.country;
            let countryCodeDomain = document.domain;

            if (typeof document.domain.split('.')[2] !== 'undefined') {
                countryCodeDomain = document.domain.split('.')[1]+'.'+document.domain.split('.')[2];
            }
            document.cookie = `mdApp_countryCodeDomain=${countryCode}; domain=${countryCodeDomain}; path=/; max-age=${60 * 60 * 24 * 60};`;

            if (form) {
                form.submit();
            }
        }
    }
    customElements.define('md-footer-selector__form', MDFooterSelectorLocalizationForm);

#javascript

Math Method

//Math object can not be changed
console.log(Math.PI);


function randomSelection(arr){
   let index = Math.floor(Math.random()*arr.length);
   return arr[index];
}

let happiness = ['Hope','Joy','Peace','Love','Kindness','Puppies','Kittens','Tortoise'];

for (i=0; i < 8; i++){
   console.log(randomSelection(happiness));
}

#javascript

objects and functions

let giraffe = {
  species: "Reticulated Giraffe",
  name: "Cynthia",
  weight: 1500,
  age: 15,
  diet: "leaves"
};

function birthday(animal) {
    animal.age = animal.age + 1;
    return animal;
}

console.log(giraffe.age);

birthday(giraffe);

console.log(giraffe.age);

#javascript

12.3 iterating an object

let giraffe = {
  species: "Reticulated Giraffe",
  name: "Cynthia",
  weight: 1500,
  age: 15,
  diet: "leaves"
};

for (item in giraffe) {
   console.log(item + ", " + giraffe[item]);
}

let spaceship = {
    crew: {
    captain: { 
        name: 'Lily', 
        degree: 'Computer Engineering', 
        cheerTeam() { console.log('You got this!') } 
        },
    'chief officer': { 
        name: 'Dan', 
        degree: 'Aerospace Engineering', 
        agree() { console.log('I agree, captain!') } 
        },
    medic: { 
        name: 'Clementine', 
        degree: 'Physics', 
        announce() { console.log(`Jets on!`) } },
    translator: {
        name: 'Shauna', 
        degree: 'Conservation Science', 
        powerFuel() { console.log('The tank is full!') } 
        }
    }
}; 

// Write your code below
for (let crewMember in spaceship.crew) {
  console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`);
}
for (let crewMember in spaceship.crew) {
  console.log(`${spaceship.crew[crewMember].name}: ${spaceship.crew[crewMember].degree}`);

#javascript

objects 12.1

let tortoiseOne = {
    species: "Galapagos Tortoise",
    name: "Pete",
    weight: 919,
    age: 85,
    diet: ["pumpkins", "lettuce", "cabbage"]
};
//In the case of Pete, our zoo's friendly Galapagos Tortoise, the object tortoiseOne has several properties for his species, name, weight, age, and diet. If we wanted to add a method to our object, we might add a function that returns a helpful statement for the general public.
let tortoiseOne = {
    species: "Galapagos Tortoise",
    name: "Pete",
    weight: 919,
    age: 85,
    diet: ["pumpkins", "lettuce", "cabbage"],
    sign: function() {
        return this.name + " is a " + this.species;
    }
 };
//In the example above, on line 8, we see a keyword which is new to us. Programmers use the this keyword when they call an object's property from within the object itself. We could use the object's name instead of this, but this is shorter and easier to read. For example, the method, sign, could have a return statement of tortoiseOne.name + " is a " + tortoiseOne.species". However, that return statement is bulky and will get more difficult to read with more references to the tortoiseOne object.

#javascript

Objects 12.2 add new key/value

let tortoiseTwo = {
    species: "Galapagos Tortoise",
    name: "Pete",
    weight: 919
};

console.log(tortoiseTwo);

tortoiseTwo["age"] = 120;
tortoiseTwo["speed"] = 'Faster than the hare.'

console.log(tortoiseTwo);
console.log(tortoiseTwo.age);

#javascript

Date and time

new Date('2020-02-21' + 'T00:00');

// or

new Date('2020-02-21T00:00');

//or

const dateFromDateInput = '2020-02-21';
const dateFromTimeInput = '05:00';
cosnt baseDate = (new Date(`${dateFromDateInput}T${dateFromTimeInput}`));

//then, now you can use date-fns getUnixTime to turn it into timestamp
//turn timestamp into human readable date with fromUnixTime

#javascript #reduce #object

Use reduce() to get object value by key name set as dotted variable

function getObjectDataByKey( field, theObject ){
	// get data
	return field.split('.').reduce((o,i)=> o[i], theObject);
}

// a simple object
const myObject = {
  name: 'John',
  lastname: 'Doe',
  data: {
    birthDate: '01/01/1970',
    placeOfBirth: 'San Francisco'
  }
}

// variable representing a key of the object
const field = 'data.birthDate';

console.log ( getObjectDataByKey ( field , myObject ) );
//will print
//01/01/1970

// also simple key will return correct value
console.log ( getObjectDataByKey ( 'name' , myObject) );
//will print
//John

#javascript

example of scope

const logVisibleLightWaves = () => {
  let lightWaves = 'Moonlight';
	let region = 'The Arctic';
  // Add if statement here:
  if (region === 'The Arctic'){
    let lightWaves = 'Northern Lights';
    console.log(lightWaves);
  }
  console.log(lightWaves);
};

logVisibleLightWaves();

#javascript #github

Git Rebase

1. git checkout dev-david
2. git rebase master
3. git add .
4. git rebase --continue

===
Successfully rebased and updated refs/heads/dev-david.
==
5. git push origin dev-david --force
6. git checkout master
7. git merge dev-david 
8. git push

git rebase --continue
git rebase --abort

#javascript

sleep debt calculator

const getSleepHours = day => {
  if (day === 'monday') {
    return 8;
  } 
  else if(day === 'tuesday'){
    return 7;
  }
  else if(day === 'wednesday'){
    return 3;
  }
  else if(day === 'thursday'){
    return 8;
  }
  else if(day === 'friday'){
    return 5;
  }
  else if(day === 'saturday'){
    return 6;
  }
  else if(day === 'sunday'){
    return 9;
  }
  else
  return 'Error!'
};
console.log(getSleepHours('wednesday'));

const getActualSleepHours = () => 
getSleepHours('monday') +
getSleepHours('tuesday') +
getSleepHours('wednesday') +
getSleepHours('thursday') +
getSleepHours('friday') +
getSleepHours('saturday') +
getSleepHours('sunday');

console.log(getActualSleepHours());


const getIdealSleepHours = () =>{
  let idealHours = 8;
  return idealHours * 7;
};

const calculateSleepDebt = () =>{
const actualSleepHours = getActualSleepHours();
const idealSleepHours = getIdealSleepHours();

if (actualSleepHours === idealSleepHours){
  console.log('Good Job you got just the right amount of sleep');
}
else if(actualSleepHours > idealSleepHours){
  console.log('You got' + (idealSleepHours - actualSleepHours) + 'hours more sleep than you needed');
}
else if (actualSleepHours < idealSleepHours){
  console.log('Hey you need to get about'+ " "+(idealSleepHours- actualSleepHours)+' ' + 'hours of some more rest!');
}
else {
  console.log('Error! Something went wrong, check your code');
}
};

calculateSleepDebt();

#javascript

Find last element of an array

const data = ['a', 'b', 'c', 'd'],
      [last] = data.slice(-1);

console.log(last);

#blade #javascript #html

International phone number input in HTML and JavaScript

<html>
</head>
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"
      />

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

   <script>
    const phoneInputField = document.querySelector("#phone");
    const phoneInput = window.intlTelInput(phoneInputField, {
        // preferredCountries: ["us", "mz", "sa", "za"],
        // initialCountry: "auto",
        // geoIpLookup: getIp,
        utilsScript:
        "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
    });

    const info = document.querySelector(".alert-info");

    function process(event) {
    event.preventDefault();
      
    const phoneNumber = phoneInput.getNumber();

    info.style.display = "";
    info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
    }

    function getIp(callback) {
     fetch('https://ipinfo.io/json?token=<your token>', { headers: { 'Accept': 'application/json' }})
       .then((resp) => resp.json())
       .catch(() => {
         return {
           country: 'us',
         };
       })
       .then((resp) => callback(resp.country));
    }
 </script>

</head>

 <body>
    <div class="container">
        <form id="login" onsubmit="process(event)">
          <p>Enter your phone number:</p>
          <input id="phone" type="tel" name="phone" />
          <input type="submit" class="btn" value="Verify" />
        </form>
        <div class="alert alert-info" style="display: none;"></div>
    </div>
 </body>
 </html>

#javascript

Custom Menus in Google Workspace | Apps Script | Google Developers

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  // Or DocumentApp or FormApp.
  ui.createMenu('Custom Menu')
      .addItem('First item', 'menuItem1')
      .addSeparator()
      .addSubMenu(ui.createMenu('Sub-menu')
          .addItem('Second item', 'menuItem2'))
      .addToUi();
}

function menuItem1() {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
     .alert('You clicked the first menu item!');
}

function menuItem2() {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
     .alert('You clicked the second menu item!');
}

#javascript

rock paper scissors

const getUserChoice = userInput => {
  userInput = userInput.toLowerCase();
  if (userInput === 'rock' || userInput === 'paper' || userInput === "scissors" || userInput === 'bomb') {
  return userInput;
} else {
  console.log('Error!');
}
};



const getComputerChoice = ( ) =>{
randomNumber = Math.floor(Math.random() * 3);
switch (randomNumber) {
  case 0:
    return 'rock';
  case 1:
    return 'paper';
    case 2:
    return 'scissors';
  
}
}; 


const determineWinner = (userChoice, computerChoice) => {
if (userChoice === computerChoice){
  return 'This game is a tie';
}
if (userChoice === 'rock'){
  if (computerChoice === 'paper'){
    return 'Looks like you lost!';
  } else{
    return 'Congrats you won!!!';
  }
}
if (userChoice === 'paper'){
  if( computerChoice === 'scissors'){
    return 'Looks like you lost!';
  } else{
    return 'Congrats you won!!!';
  }
}
if (userChoice === 'scissors'){
  if (computerChoice === 'rock'){
    return 'Looks like you lost!';
  }else{
    return 'Congrats you won';
  }
}
if (userChoice === 'bomb'){
  return 'You got the answers Sway!!! You Win!!'
}
};

console.log(determineWinner('rock','scissors'));
console.log(determineWinner('rock','paper'));
console.log(determineWinner('paper','paper'));
console.log(determineWinner('bomb','paper'));



const playGame =() =>{
const userChoice = getUserChoice('rock');
const computerChoice = getComputerChoice();
console.log(`You threw: ${userChoice}`);
console.log(`The Computer threw: ${computerChoice}`);

console.log(determineWinner(userChoice,computerChoice))
};

playGame();

#bash #ionic #angular #capacitor #qrcode #reader #typescript #javascript #html #xml #android

capacitor open on android

npx cap open ios #abrir o projecto no xcode

npx cap open android #abrir o projecto no android

#bash #ionic #angular #capacitor #qrcode #reader #typescript #javascript #html #xml #ios

info plist ios qrcode

<dict>
+  <key>NSCameraUsageDescription</key>
+  <string>To be able to scan barcodes</string>
</dict>

#bash #ionic #angular #capacitor #qrcode #reader #typescript #javascript #html #xml #android

android manifest - qrcode

<?xml version="1.0" encoding="utf-8"?>
<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:tools="http://schemas.android.com/tools" <-- adicionas esta linha não removendo nada e seguindo esta lógica

  package="com.example">

  <application
+    android:hardwareAccelerated="true" <-- adicionas esta linha não removendo nada e seguindo esta lógica
  >
  </application>

+  <uses-permission android:name="android.permission.CAMERA" /><-- adicionas esta linha não removendo nada e seguindo esta lógica

+  <uses-sdk tools:overrideLibrary="com.google.zxing.client.android" /><-- adicionas esta linha não removendo nada e seguindo esta lógica
</manifest>

#bash #ionic #angular #capacitor #qrcode #reader #typescript #javascript #html

commands qrcode app - ionic

ionic build --prod

#caso quiseres colocar a app para android dás o seguinte comando:
npm install @capacitor/android
npx cap add android

#caso quiseres colocar a app para iOS dás o seguinte comando:
npm install @capacitor/ios
npx cap add ios


#no final dão estes dois ultimos comandos

npx cap sync
npx cap copy Android ou ios #dependendo do qual escolheram

#bash #ionic #angular #capacitor #qrcode #reader #typescript #javascript #html

html-qrcode reader

...

<ion-content class="scanner-hide" *ngIf="scanStatus == false">
  <div class="padding-container center">
    <ion-button color="primary" (click)="scanCode()"><ion-icon slot="start" name="qr-code-outline"></ion-icon> Scanear Código</ion-button> <!-- Botão que chama a função do scanner-->
  </div>
  <ion-card>
    <ion-card-content><h1>{{ result }}</h1></ion-card-content> <!-- mostra o resultado do scan -->
  </ion-card>
  
  <div class="scanner-ui"> <!-- Quando estamos a scanear, chama esta classe-->
    ...Scanner Interface
    </div>
    <div class="ad-spot"></div>
</ion-content>

#bash #ionic #angular #capacitor #qrcode #reader #typescript #javascript

qrcode typescript logic

...
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';



...



export class HomePage {
  public scanStatus:boolean = false; // no inicio da página, coloca o estado do código qr para falso
  public result:any;

  constructor() {}


  async scanCode () {

    this.setPermissions(); /* chama as permissões à camera */
  
    BarcodeScanner.hideBackground(); // coloca o fundo transparente
    this.scanStatus = true; // ao mudar esta variável para true, estamos a puxar o qr code scanner 
    document.body.classList.add("qrscanner"); // adiciona a classe css que fizemos no global
    const result = await BarcodeScanner.startScan(); // começa a fazer scan e espera por um result
  
  // se o qr scanner detectou algum número, então ele faz o código abaixo
    if (result.hasContent) {

        
        this.scanStatus = false; //como é obvio, ele tem de desligar o scanner ao obter o resultado
        BarcodeScanner.stopScan(); //para o scan
        this.result = result.content; // passa o resultado para a variável global result
        BarcodeScanner.showBackground(); //volta a mostrar o fundo
        document.body.classList.remove("qrscanner"); //remove a classe css que criamos no global
    
    }
  }

  async setPermissions(){
    const status = await BarcodeScanner.checkPermission({ force: true }); /* força a permissão para true, caso o utilizador não aceite, o scanner não funciona */
    if (status.granted) {
      // the user granted permission
      return true; // se o utilizador aceitou as permissões retorna true
    }
  
      return false; // se o utilizador não aceitou retorna false
  }
}

#bash #ionic #angular #capacitor #qrcode #reader #javascript

install qrcode-reader plugin

npm install @capacitor-community/barcode-scanner

#javascript

GitHub - uuidjs/uuid: Generate RFC-compliant UUIDs in JavaScript

const { v4: uuidv4 } = require('uuid');
uuidv4(); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'

#javascript

Is it possible to remove inline styles with jQuery? - Stack Overflow

$('#element').attr('style', function(i, style)
{
    return style && style.replace(/display[^;]+;?/g, '');
});

#javascript

Widget - Add green background for newly added rows on multi-row variable set (Service Portal)

c.addGreenBackground = function() {
  $timeout( function() { //timeout needed because we have to wait for the MRVS to be populated with the new values
    $scope.page.g_form.getDisplayValue('u_applicable_services').split(',').filter(function (el) {return el != null;}).forEach(function(el){
      if (el && $("td:contains('" + el.trim() + "')").length>0)
        $("td:contains('" + el.trim() + "')").parent().css("background-color", "#98fb98");
    })
  }, 500);
}

#javascript

Arrow Functions

const plantNeedsWater = (day) => {
  if (day === 'Wednesday') {
    return true;
  } else {
    return false;
  }
};
//the above function can be refactored to this since it has only one parameter

const plantNeedsWater = day => day === 'Wednesday' ? true : false;

console.log(plantNeedsWater("Tuesday"));

#javascript

Array examples

let programmingLanguages = ["JavaScript", "Python", "Java", "C#"];
console.log(programmingLanguages[-1]);
console.log(programmingLanguages[100]);

let javaScriptFrameworks = ["React", "Angular", "Ember"];
console.log(javaScriptFrameworks);

// Set the value of index 2 to be "Vue"
javaScriptFrameworks[2] = "Vue";

// Notice the value at index 2 is now "Vue"
console.log(javaScriptFrameworks);

let charles = ['coder', 'Tech', 47, 23, 350];
charles.sort();
console.log(charles);


let groceryBag = ['bananas', 'apples', 'edamame', 'chips', 'cucumbers', 'milk', 'cheese'];
let selectedItems = [];

selectedItems = groceryBag.slice(2, 5).sort();
console.log(selectedItems);

let shuttleCrews = [
   ['Robert Gibson', 'Mark Lee', 'Mae Jemison'],
   ['Kent Rominger', 'Ellen Ochoa', 'Bernard Harris'],
   ['Eilen Collins', 'Winston Scott',  'Catherin Coleman']
];

console.log(shuttleCrews[0][2]);
console.log(shuttleCrews[1][1]);
console.log(shuttleCrews[2][1]);

let sshuttleCrews = [
   ['Robert Gibson', 'Mark Lee', 'Mae Jemison'],
   ['Kent Rominger', 'Ellen Ochoa', 'Bernard Harris'],
   ['Eilen Collins', 'Winston Scott',  'Catherin Coleman']
];

let newCrew = ['Mark Polansky', 'Robert Curbeam', 'Joan Higginbotham'];

// Add a new crew array to the end of shuttleCrews
sshuttleCrews.push(newCrew);
console.log(sshuttleCrews[3][2]);

// Reverse the order of the crew at index 1
sshuttleCrews[1].reverse();
console.log(sshuttleCrews[1]);

#javascript

if/else examples

// Declare and initialize the variables for exercise 1 here:
let engineIndicatorLight = "red blinking";
let spaceSuitsOn = true;
let shuttleCabinReady = true;
let crewStatus = spaceSuitsOn && shuttleCabinReady;
let computerStatusCode = 200;
let shuttleSpeed = 15000


// BEFORE running the code, predict what will be printed to the console by the following statements:

if (engineIndicatorLight === "green") {
   console.log("engines have started");
} else if (engineIndicatorLight === "green blinking") {
   console.log("engines are preparing to start");
} else {
   console.log("engines are off");
}



let tool = 'marker';

// Use short circuit evaluation to assign  writingUtensil variable below:
let writingUtensil = tool || "pen";

console.log(`The ${writingUtensil} is mightier than the sword.`);



let stopLight = 'yellow';
 
if (stopLight === 'red') {
  console.log('Stop!');
} else if (stopLight === 'yellow') {
  console.log('Slow down.');
} else if (stopLight === 'green') {
  console.log('Go!');
} else {
  console.log('Caution, unknown!');
}

#javascript

function pt 2

function hello(name) {
   return `Hello, ${name}!`;
}

console.log(hello("Lamar"));

//In this example, name is a parameter. It is part of the function definition, and behaves like a variable that exists only within the function.The value "Lamar" that is used when we invoke the function on line 5 is an argument. It is a specific value that is used during the function call.The difference between a parameter and an argument is the same as that between a variable and a value. A variable refers to a specific value, just like a parameter refers to a specific argument when a function is called. Like a value, an argument is a concrete piece of data.

function hello(name = "World") {
   return `Hello, ${name}!`;
}

console.log(hello());
console.log(hello("Lamar"));
//this example modifies the hello function to use a default value for name. If name is not defined when hello is called, it will use the default value.

function monitorCount(rows, columns) {
  return rows * columns;
}

const numOfMonitors = monitorCount(5, 4);

console.log(numOfMonitors);


// examples below of "helper functions" when a functions uses info from a different function

function monitorCount(rows, columns) {
  return rows * columns;
}

function costOfMonitors(rows, columns){
  return monitorCount(rows, columns) *200;
}

const totalCost = costOfMonitors(5,4);

console.log(totalCost);

//Function expressions
const plantNeedsWater = function(day) {
  if(day === 'Wednesday'){
    return true;
  }
  else{
    return false;
  }
}

console.log(plantNeedsWater("Tuesday"));

#javascript

How do I apply a 2d shader to a webgl canvas in js? - Stack Overflow

const canvas = document.querySelector('#glcanvas');
main();

//
// Start here
//
function main() {
  const gl = canvas.getContext('webgl');
  // If we don't have a GL context, give up now

  if (!gl) {
    alert('Unable to initialize WebGL. Your browser or machine may not support it.');
    return;
  }

  // Vertex shader program

  const vsSource = `
    attribute vec4 aVertexPosition;

    uniform mat4 uModelViewMatrix;
    uniform mat4 uProjectionMatrix;

    void main() {
      // We don't need the projection:
      //gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;

      // Instead we pass through each vertex position as-is:
      gl_Position = aVertexPosition;
    }
  `;

  // Fragment shader program

  const fsSource = `
    precision mediump float;


    // Require resolution (canvas size) as an input
    uniform vec3 uResolution;
      
    void main() {

      // Calculate relative coordinates (uv)
      vec2 uv = gl_FragCoord.xy / uResolution.xy;

      gl_FragColor = vec4(uv.x, uv.y, 0., 1.0);
    }
  `;  

  // Initialize a shader program; this is where all the lighting
  // for the vertices and so forth is established.
  const shaderProgram = initShaderProgram(gl, vsSource, fsSource);

  // Collect all the info needed to use the shader program.
  // Look up which attribute our shader program is using
  // for aVertexPosition and look up uniform locations.
  const programInfo = {
    program: shaderProgram,
    attribLocations: {
      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
    },
    uniformLocations: {
      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
      resolution: gl.getUniformLocation(shaderProgram, 'uResolution'),
    },
  };

  // Here's where we call the routine that builds all the
  // objects we'll be drawing.
  const buffers = initBuffers(gl);

  // Draw the scene
  drawScene(gl, programInfo, buffers);
}

//
// initBuffers
//
// Initialize the buffers we'll need. For this demo, we just
// have one object -- a simple two-dimensional square.
//
function initBuffers(gl) {

  // Create a buffer for the square's positions.

  const positionBuffer = gl.createBuffer();

  // Select the positionBuffer as the one to apply buffer
  // operations to from here out.

  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  // Now create an array of positions for the square.

  const positions = [
     1.0,  1.0,
    -1.0,  1.0,
     1.0, -1.0,
    -1.0, -1.0,
  ];

  // Now pass the list of positions into WebGL to build the
  // shape. We do this by creating a Float32Array from the
  // JavaScript array, then use it to fill the current buffer.

  gl.bufferData(gl.ARRAY_BUFFER,
                new Float32Array(positions),
                gl.STATIC_DRAW);

  return {
    position: positionBuffer,
  };
}

//
// Draw the scene.
//
function drawScene(gl, programInfo, buffers) {
  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
  gl.clearDepth(1.0);                 // Clear everything
  gl.enable(gl.DEPTH_TEST);           // Enable depth testing
  gl.depthFunc(gl.LEQUAL);            // Near things obscure far things

  // Clear the canvas before we start drawing on it.

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // Create a perspective matrix, a special matrix that is
  // used to simulate the distortion of perspective in a camera.
  // Our field of view is 45 degrees, with a width/height
  // ratio that matches the display size of the canvas
  // and we only want to see objects between 0.1 units
  // and 100 units away from the camera.

  const fieldOfView = 45 * Math.PI / 180;   // in radians
  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  const zNear = 0.1;
  const zFar = 100.0;
  const projectionMatrix = mat4.create();

  // note: glmatrix.js always has the first argument
  // as the destination to receive the result.
  mat4.perspective(projectionMatrix,
                   fieldOfView,
                   aspect,
                   zNear,
                   zFar);

  // Set the drawing position to the "identity" point, which is
  // the center of the scene.
  const modelViewMatrix = mat4.create();

  // Now move the drawing position a bit to where we want to
  // start drawing the square.

  mat4.translate(modelViewMatrix,     // destination matrix
                 modelViewMatrix,     // matrix to translate
                 [-0.0, 0.0, -6]);  // amount to translate

  // Tell WebGL how to pull out the positions from the position
  // buffer into the vertexPosition attribute.
  {
    const numComponents = 2;
    const type = gl.FLOAT;
    const normalize = false;
    const stride = 0;
    const offset = 0;
    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
    gl.vertexAttribPointer(
        programInfo.attribLocations.vertexPosition,
        numComponents,
        type,
        normalize,
        stride,
        offset);
    gl.enableVertexAttribArray(
        programInfo.attribLocations.vertexPosition);
  }

  // Tell WebGL to use our program when drawing

  gl.useProgram(programInfo.program);

  // Set the shader uniforms

  gl.uniformMatrix4fv(
      programInfo.uniformLocations.projectionMatrix,
      false,
      projectionMatrix);
  gl.uniformMatrix4fv(
      programInfo.uniformLocations.modelViewMatrix,
      false,
      modelViewMatrix);
  
  gl.uniform3f(programInfo.uniformLocations.resolution, canvas.width, canvas.height, 1.0);  

  {
    const offset = 0;
    const vertexCount = 4;
    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
  }
}

//
// Initialize a shader program, so WebGL knows how to draw our data
//
function initShaderProgram(gl, vsSource, fsSource) {
  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

  // Create the shader program

  const shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);

  // If creating the shader program failed, alert

  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
    return null;
  }

  return shaderProgram;
}

//
// creates a shader of the given type, uploads the source and
// compiles it.
//
function loadShader(gl, type, source) {
  const shader = gl.createShader(type);

  // Send the source to the shader object

  gl.shaderSource(shader, source);

  // Compile the shader program

  gl.compileShader(shader);

  // See if it compiled successfully

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
  }

  return shader;
}

#javascript

generate random colors javascript

const changeToFunkyColor = (domElement) => {
  const r = Math.random() * 255;
  const g = Math.random() * 255;
  const b = Math.random() * 255;
 
  domElement.style.background = `rgb(${r}, ${g}, ${b})`;
}

#javascript

Fetch w/ async/await

async function myFetch() {
    try {
        /* Request */
        let res = await fetch('https://reqres.in/api/users/2');
        /* Check response */
        let resChecked;
        if (res.ok) { /* If successful: */
            console.log("Request successful"); 
            resChecked = res; 
            let data = await resChecked.json();
            console.log(data);
        } else { /* If unsuccessful: */
            console.log("Request unsuccessful");
        }
    } catch (err) {
        console.log(err);
    }
}

myFetch() // Prints data object containing information about user 2

#javascript

Fetch DELETE call

fetch('https://reqres.in/api/users/2', {
    method: "DELETE",
    headers: {
        'Content-type': 'application/json'
    }
})
.then(res => {
    if (res.ok) { console.log("HTTP request successful") }
    else { console.log("HTTP request unsuccessful") }
    return res
})
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.log(error))

#javascript

Fetch PUT Request

fetch('https://reqres.in/api/users/2', {
    method: "PUT", 
    headers: {
        'Content-type': 'application/json'
    },
    body: JSON.stringify(
        { name: "Capitain Anonymous"}
    )
})
.then(res => {
    if (res.ok) { console.log("HTTP request successful") }
    else { console.log("HTTP request unsuccessful") }
    return res
})
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.log(error))

#javascript

Fetch POST Call

const url = 'https://jsonplaceholder.typicode.com/users';

let data = {
  name: 'Sammy'
}

let request = new Request(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: new Headers({
    'Content-Type': 'application/json; charset=UTF-8'
  })
});

fetch(request)
  .then(function() {
    // Handle response you get from the API
  });

#javascript

javascript - overflow hidden adding in body tag which remove the scrollbar sometime - Stack Overflow

body {
    overflow: visible !important;
}

#javascript

function return

function sumToN(n) {
   let sum = 0;
   for (let i = 0; i <= n; i++) {
      sum += i;
   }
   return sum;
}

console.log(sumToN(3));
//Notice that sumToN does not print anything; the output comes from the final line of the program, which prints the value returned by the function call sumToN(3).

function isEven(n) {
   if (n % 2 === 0) {
      return true;
   } else {
      return false;
   }
}

console.log(isEven(4));
console.log(isEven(7));

#javascript

Functions pt1

let names = ["Lena", "James", "Julio"];

for (let i = 0; i < names.length; i++) {
   console.log(names[i]);
}
//Following this pattern, we can create a function that prints any array of names.
function printNames(names) {
   for (let i = 0; i < names.length; i++) {
      console.log(names[i]);
   }
}
//Notice that there is nothing about this function that forces names to actually contain names, or even strings. The function will work the same for any array it is given. Therefore, a better name for this function would be printArray.Our function can be used the same way as each of the built-in functions, such as console.log, by calling it. Remember that calling a function triggers its actions to be carried out.

function printArray(names) {
   for (let i = 0; i < names.length; i++) {
      console.log(names[i]);
   }
}

printArray(["Lena", "James", "Julio"]);
console.log("---");
printArray(["orange", "apple", "pear"]);

function sayHello() {
   console.log("Hello, World!");
}
sayHello();

function sayThanks(name) {
  console.log('Thank you for your purchase '+ name + '! We appreciate your business.');
}

sayThanks("Cole");

///example of functions with default values

function makeShoppingList(item1 = 'milk', item2 = 'bread', item3 = 'eggs'){
  console.log(`Remember to buy ${item1}`);
  console.log(`Remember to buy ${item2}`);
  console.log(`Remember to buy ${item3}`);
}

#javascript

Updater function that spreads current state object and adds a key value pair

const doSomething = (name, value) => {
  setValues(values => ({ ...values, [name]: value }))
}

#javascript #typescript

Kangaroo best approach

let max: number = 10000;

for (let n = 1; n < max; n++) {
  let dist1: number = x1 + (v1 * n);
  let dist2: number = x2 + (v2 * n);
  if (dist1 === dist2) return 'YES';        
}

return 'NO';

#javascript

truffle-config.js

module.exports = {
  networks: {
    development: {
    host: "127.0.0.1",	 // Localhost (default: none)
    port: 7545,		 // Standard Ethereum port (default: none)
    network_id: "*",	 // Any network (default: none)
    },
  },
    contracts_build_directory: "./artifacts/",
    
  // Configure your compilers
  compilers: {
    solc: {	
      version: "^0.8.7",
    
    // See the solidity docs for advice
    // about optimization and evmVersion
      optimizer: {
      enabled: false,
      runs: 200
      },
      evmVersion: "byzantium"
    }
  }
  };

#javascript

2_deploy_contracts.js

const HelloWeb3 = artifacts.require("HelloWeb3");

module.exports = function (deployer) {
    deployer.deploy(HelloWeb3);
};

#nextjs #javascript #plausible #analytics

NextJS | Plausible.io Analytics integration | Component

import PlausibleProvider from "next-plausible";

function MyApp({ Component, pageProps }) {
  return 
  	<PlausibleProvider domain="<Your domain>">
  		<Component {...pageProps} />
  	</PlausibleProvider>
}

export default MyApp

#nextjs #javascript #plausible #analytics

NextJS | Plausible.io integration | Custom Document | Head

import Document, {Html, Head, Main, NextScript} from 'next/document'

class MyDocument extends Document {
    render() {
        return (
            <Html>
                <Head>
                    <base href="/"></base>
                    <script async defer data-domain="<your-domain.com>" src="https://plausible.io/js/plausible.js"></script>

                </Head>
                <body>
                <Main/>
                <NextScript/>
                </body>
            </Html>
        )
    }
}

export default MyDocument

#javascript #weather #api

weather api

var inputvalue = document.querySelector('#cityinput')
var btn = document.querySelector('#sub')
var city = document.querySelector('#cityoutput')
var description = document.querySelector('#description')
var temp = document.querySelector('#temp')
var wind = document.querySelector('#wind')
 
apikey = "de9fd8a722542a526890360832401551"
 
function convertion(val) {
    return (val - 273).toFixed(2)
}
 
btn.addEventListener('click', function () {
 
    fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputvalue.value+'&appid='+apikey)
        .then(res => res.json())
 
        .then(data => {
 
            var namevalue = data['name']
            var descri = data['weather']['0']['description']
            var tempature = data['main']['temp']
            var wndspd = data['wind']['speed']
 
            city.innerHTML = `Weather of <span>${namevalue}<span>`;
            temp.innerHTML = `Temparature : <span>${convertion(tempature)} C</span>`
            description.innerHTML = `Sky Condition : <span>${descri}<span>`
            wind.innerHTML = `Wind Speed : <span>${wndspd} km/h<span>`
        })
 
        .catch(err => alert('Entered City Name is Wrong, Please try again!'))
})

#javascript #object #deep #copy #clone #recursion

deep copy objects

function deepCopy(obj){
    let toString = Object.prototype.toString;
    if(typeof obj !== 'object') return obj;
    if(obj === null) return null;
    if(Array.isArray(obj)) return obj.map(deepCopy);
    let newObj = {};
    for(let key in obj){
        if(toString.call(obj[key])==='[object Date]'){
            newObj[key] = new Date(obj[key])
        } else if(toString.call(obj[key])==='[object RegExp]'){
            newObj[key] = new RegExp(obj[key])
        }else{
            newObj[key] = deepCopy(obj[key]);
        }
    }
    return newObj;
}

#javascript

click and drag

var dragAndDrop = document.createElement('div');
dragAndDrop.innerHTML = 'Drag and Drop';
dragAndDrop.style.width = '100px';
dragAndDrop.style.height = '100px';
dragAndDrop.style.backgroundColor = 'red';
dragAndDrop.style.position = 'absolute';
dragAndDrop.style.top = '0px';
dragAndDrop.style.left = '0px';
dragAndDrop.style.cursor = 'pointer';
dragAndDrop.style.zIndex = '9999';
document.body.appendChild(dragAndDrop);
var mouseX = 0;
var mouseY = 0;
var offsetX = 0;
var offsetY = 0;
var isDown = false;
dragAndDrop.addEventListener('mousedown', function(e) {
  isDown = true;
  offsetX = dragAndDrop.offsetLeft - e.clientX;
  offsetY = dragAndDrop.offsetTop - e.clientY;
});
document.addEventListener('mouseup', function() {
  isDown = false;
});
document.addEventListener('mousemove', function(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
  if (isDown) {
    dragAndDrop.style.left = (mouseX + offsetX) + 'px';
    dragAndDrop.style.top = (mouseY + offsetY) + 'px';
  }
});

#javascript

Singleton in javascript

var SingletonFactory = (function(){
    function SingletonClass() {
        //do stuff
    }
    var instance;
    return {
        getInstance: function(){
            if (instance == null) {
                instance = new SingletonClass();
                // Hide the constructor so the returned object can't be new'd...
                instance.constructor = null;
            }
            return instance;
        }
   };
})();

#javascript

rental unit class example

class RentalUnit {
  constructor(address, costPerYear) {
    this._address = address;
    this._costPerYear = costPerYear;
  }
 
  get address() {
    return this._address;
  }
 
  get costPerYear() {
    return this._costPerYear;
  }
 
  calculateMonthly() {
    return this.costPerYear / 12; 
  }
}
 
class Apartment extends RentalUnit {
  constructor(address, costPerYear, numberOfBedrooms) {
    super(address, costPerYear);
    this._numberOfBedrooms = numberOfBedrooms;
  }
 
  get numberOfBedrooms() {
    return this._numberOfBedrooms;
  }
}

#javascript

Transform Invoice To Credit Memo

// apply open credit memo(s) to invoice [assumption under the same AR account]
	var objCustPaymtRec = record.transform({
		fromType : record.Type.INVOICE,
		fromId : intInvoiceId,
		toType : record.Type.CUSTOMER_PAYMENT,
		isDynamic : true
	});

#javascript

adasd

 <LoaderWrapper loading={this.state.loading}>
        <View style={styles.main}>
          {this.props.totalQuizCount > 0 && this.state.filter === "ALL" ? (
            <View style={styles.filterContainer}>
              {filters.map((filter) => (
                <View style={styles.filter} key={filter.id}>
                  <QuizFilterTab
                    filterName={filter.name}
                    active={filter.id === this.state.filter}
                    // TODO: find a way to get the total number efficiently
                    itemCount={20}
                    onPress={() => this.fetchPracticeQuiz(filter.id)}
                    key={filter.id}
                  />
                </View>
              ))}
            </View>
          ) : (
            <View style={styles.noContentContainer}>
              <QuizEmptyScreen />
            </View>
          )}

          {this.state.filter !== "ALL" && this.props.totalQuizCount === 0 ? (
            <ScrollView>
              <FlatList
                data={Object.values(this.props.quizSections)}
                renderItem={this.renderItem}
                keyExtractor={(item) => item.id}
              />
            </ScrollView>
          ) : (
            <View style={styles.noContentContainer}>
              <QuizEmptyScreen />
            </View>
          )}
        </View>
      </LoaderWrapper>

#javascript

DATE FORMAT Netsuite Javascript

var new_str2 = end_date.toString();
      var end_day = new_str2.substring(8, 10);
      log.debug("end_day", end_day);


var rec_create_date_time = new Date();
      var rec_create_date = rec_create_date_time.getFullYear() +
        "-" +
        (rec_create_date_time.getMonth() + 1) +
        "-" +
        rec_create_date_time.getDate();
      var rec_create_time =
        rec_create_date_time.getHours() +
        ":" +
        rec_create_date_time.getMinutes() +
        ":" +
        rec_create_date_time.getSeconds();
      var rec_create_date_time_str = rec_create_date + " " + rec_create_time;
      log.debug("rec_create_date_time_str", rec_create_date_time_str);

#javascript

slick - the last carousel you'll ever need

 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

#javascript

array to string js

dataNonDaily = JSON.stringify(dataNonDaily);

#javascript #html

changes all but the last four characters into '#'.

// return masked string
function maskify(cc) {
  const text = cc.replace(/\s/g,'').replace(/\w(?=\w{4})/gi,'#');
  return text
}
maskify('1')

#javascript #html

remove all of the vowels from the String

/*
* Solution 1
*/
const vowels = ['a','e','i','o','u']
function disemvowel(str) {
  const text = str.split('');
  const textWithoutVowels = text.filter(el => !vowels.includes(el.toLowerCase()))
  return textWithoutVowels.join('')
}
disemvowel('This website is for losers LOL!"), "Ths wbst s fr lsrs LL!')

/*
* Solution 2
*/
function disemvowel(str) {
  const noVowels = str.replace(/[aeiou]/gi, '');
  return noVowels
}
disemvowel('This website is for losers LOL!"), "Ths wbst s fr lsrs LL!')

#javascript

IndexedDB

export function idbPromise(storeName, method, object) {
  return new Promise((resolve, reject) => {
    // open connection to the database `shop-shop` with the version of 1
    const request = window.indexedDB.open('shop-shop', 1);

    // create variables to hold reference to the database, transaction (tx), and object store
    let db, tx, store;

    // if version has changed (or if this is the first time using the database), run this method and create the three object stores 
    request.onupgradeneeded = function(e) {
      const db = request.result;
      // create object store for each type of data and set "primary" key index to be the `_id` of the data
      db.createObjectStore('products', { keyPath: '_id' });
      db.createObjectStore('categories', { keyPath: '_id' });
      db.createObjectStore('cart', { keyPath: '_id' });
    };

    // handle any errors with connecting
    request.onerror = function(e) {
      console.log('There was an error');
    };
    
    // on database open success
	request.onsuccess = function(e) {
 	// save a reference of the database to the `db` variable
 	 db = request.result;
 	// open a transaction do whatever we pass into `storeName` (must match one of the 		object store names)
 	tx = db.transaction(storeName, 'readwrite');
  	// save a reference to that object store
  	store = tx.objectStore(storeName);

 	 // if there's any errors, let us know
 	 db.onerror = function(e) {
    console.log('error', e);
  };
      
    switch (method) {
  		case 'put':
   		store.put(object);
    	resolve(object);
    	break;
  	case 'get':
    	const all = store.getAll();
    	all.onsuccess = function() {
      		resolve(all.result);
    	};
    	break;
  	case 'delete':
    	store.delete(object._id);
    	break;
  	default:
    	console.log('No valid method');
    	break;
}

  // when the transaction is complete, close the connection
  tx.oncomplete = function() {
    db.close();
  };
};
    
    

  });
}

#javascript

pagination archive (15/06/2022)

// pagination
                //     let currentPage = response.meta.current_page;
                //     let lastPage = response.meta.last_page;
                //     var pagination = ''
                //     var page_first = 0
                //     var page_last = 0
                //     if (response.meta && (response.meta.total > 5)) {
                //         if (lastPage <= 5) {
                //             page_first = 1;
                //             page_last = lastPage;
                //         } else {
                //             if (currentPage <= 3) {
                //                 page_first = 1;
                //                 page_last = 5;
                //             } else if (currentPage >= lastPage - 2) {
                //                 page_first = lastPage - 4;
                //                 page_last = lastPage;
                //             } else {
                //                 page_first = currentPage - 2;
                //                 page_last = currentPage + 2;
                //             }
                //         }

                //         pagination +=
                //             `<nav class="navigation mt-4">
                //     <div>
                //         <span class="pagination-detail d-none d-md-block">${response.meta.to ?? 0} dari ${response.meta.total } siswa</span>
                //     </div>
                //     <ul class="pagination mb-0">
                //         <li class='page-item cursor-pointer ${currentPage == 1 ? 'disabled' : ''}'>
                //             <a class="page-link page-daily grey-3" data-page="1"  tabindex="-1">&lt;</a>
                //         </li>`;
                //         for (page_first; page_first <= page_last; page_first++) {
                //             pagination += `
                //         <li class="page-item cursor-pointer">
                //             <a class="page-link page-daily ${page_first == currentPage ? 'bg-blue-tp font-w700 blue' : 'grey-6'}" data-page="${page_first}">${page_first}</a>
                //         </li>`;
                //         }
                //         pagination += `
                //         <li class="page-item cursor-pointer ${currentPage == lastPage ? 'disabled' : ''}">
                //             <a class="page-link grey-3 page-daily" data-page="${lastPage}">&gt;</a>
                //         </li>
                //     </ul>
                // </nav>`;
                //     }
                    // console.log({pagination, response, currentPage, lastPage})
                    // $('#dataAbsences').html(html)
                    // $('#pageAbsence').html(pagination)
            // end pagination

#javascript

Prop Lifting

// Parent
import Child from './Child';

function App() {
  
  const pull_data = (data) => {
    console.log(data); // LOGS DATA FROM CHILD (My name is Dean Winchester... &)
  }
  
  return (
    <div className='App'>
      <Child
        func={pull_data}
      />
    </div>
  );
}

export default App;




// Child
const Child = (props) => {
  
  props.func('My name is Dean Winchester & this is my brother Sammie');
  
  return (
    <>
      <h1>I am the Child Component!</h1>
    </>
  );
}

export default Child;

#javascript

Find Min in Array

const arrMin = arr => Math.min(...arr);
// arrMin([20, 10, 5, 10]) -> 5

#javascript

javascript - Convert blob to base64 - Stack Overflow

var blobToBase64 = function(blob, callback) {
    var reader = new FileReader();
    reader.onload = function() {
        var dataUrl = reader.result;
        var base64 = dataUrl.split(',')[1];
        callback(base64);
    };
    reader.readAsDataURL(blob);
};

#javascript

javascript - Convert blob to base64 - Stack Overflow

var reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onloadend = function() {
  var base64data = reader.result;                
  console.log(base64data);
}

#javascript #react.js

Axios with useEffect

// create services folder and api file
import axios from "axios";

export const api = axios.create({
  baseURL: " http://localhost:3333",
});

// on the page where the useEffect is located
import { api } from "./services/api";

 useEffect(() => {
    async function getData() {
      const response = await api.get("/episodes");
      setData(response.data);
    }
    getData();
  }, []);

#javascript #react.js

Button Component - React + Typescript

import React from "react";

interface Props {
  style?: string;
  type: "button" | "submit" | "reset";
  title?: string;
  icon?: React.ReactNode;
  onClick: () => void;
}

// Button component could accept text, icons and/or styles as props
// style and onClick props are mandatory
export const Button = ({ style, type, title, icon, onClick }: Props) => {
  return (
    <button className={style} type={type} onClick={onClick}>
      <span>{icon}</span>
      {title}
    </button>
  );
};

#javascript #react.js

Simple Carousel React

import React, { useState } from "react";
import { Button } from "./Button";

// data is an array of objects const data = [{id:1, url: "https://..."}, ...]
import { data } from "../data/carouselData";

export const Carrousel = () => {
  const [index, setIndex] = useState(0);

  // when buttons are clicked, the state (index) would increased or decreased
  // to avoid the code crash when index reachs its min and max values, conditios are set on click 	events 
  function handlePreviousBtn() {
    index > 0 ? setIndex(index - 1) : setIndex(data.length - 1);
  }

  function handleNextBtn() {
    index < data.length - 1 ? setIndex(index + 1) : setIndex(0);
  }

  return (
    // carousel has width 100% and specif height
    <div className="carousel">
      {/* Button is a custom component */}
      <Button
        style="carousel--btn left-4"
        type="button"
        title="left"
        onClick={() => handlePreviousBtn()}
      />
      <Button
        style="carousel--btn right-4"
        type="button"
        title="right"
        onClick={() => handleNextBtn()}
      />
		{/* carousel--item and carousel--item-img has widht and heigth 100% */}
      <div className="carousel--item">
        {/* also carousel--item-img has object-contain style prop */}
        <img
          className="carousel--item-img"
          src={data[index].url}
          alt="Random Image"
        />
      </div>
    </div>
  );
};

#javascript

archive 14/06/2022

function renderIndexStudentAbsence2(data, total_non_daily) {
            html = "";
            totalData = 0;
            statusPresence = "";
            studentGroupOrCounselor = "";
            studentGroupName = "";
            totalDataGroup = Object.keys(data).length;
            if (totalDataGroup === 1) {
                studentGroupName = '|' + Object.keys(data).pop();
            }
            html += `
                <div class="table-responsive table-report-period mt-4">
                    <table class="table">
                        <thead class="no-cell-hover">
                            <tr class="text-left">
                                ${totalDataGroup === 1 ? `` : `<th class="text-left" rowspan="2">${isWikrama === "1" ? `Rayon` : `Rombel`}</th>`}
                                <th class="text-left" rowspan="2">No.</th>
                                <th class="text-left" rowspan="2">Nama</th>
                                <th class="text-center" colspan="2">Absensi Hari Ini</th>
                                ${total_non_daily === 0 ? `` : `<th class="text-center" colspan="4">JP yang Tidak Dihadiri</th>`}
                            </tr>
                            <tr>
                                <th class="text-left">Status</th>
                                <th class="text-left">Keterangan</th>
                                ${total_non_daily === 0 ? `` : `
                                                                <th class="text-left">JP ke-</th>
                                                                <th class="text-left">Status</th>
                                                                <th class="text-left">Pelajaran</th>
                                                                <th class="text-left">Guru Mapel</th>    
                                                                `}
                            </tr>
                        </thead>
                        <tbody class="index-absence-student-loading-destop">`

            $.each(data, function(key, value) {
                totalJp = 0;
                totalNumber = 1;
                totalDaily = value.length;

                let total = value.reduce((val, element) => {
                    return val + element.non_daily.length
                }, 0);

                var rowspanGroup = value.length + total;

                // console.log({
                //     total,
                //     rowspanGroup,
                //     totalDaily
                // });

                $.each(value, function(key, value) {
                    if (value.non_daily.length !== 0) {
                        totalJp = value.non_daily.length;
                    }
                })

                totalDataStudent = value.length;

                if (totalDataStudent > 1) {
                    totalJpFinal = totalJp * totalDataStudent + totalDataStudent;
                } else {
                    totalJpFinal = totalJp * totalDataStudent;
                }

                totalRowGroup = 0;

                if (totalJpFinal === 0) {
                    totalRowGroup = totalDataStudent;
                } else {
                    totalRowGroup = totalJpFinal + 1;
                }

                if (totalDaily === 1) {
                    totalJpValue = 0;
                    $.each(value, function(index, value) {
                        if (value.daily.status === "SICK") {
                            statusPresence = "Sakit";
                        } else if (value.daily.status === "UNKNOWN") {
                            statusPresence = "Alpha";
                        } else {
                            statusPresence = "Izin";
                        }

                        if (isWikrama === "1") {
                            studentGroupOrCounselor =
                                `${value.name} ${value.nis} | ${value.student_group.name}`;
                        } else {
                            studentGroupOrCounselor = `${value.name} ${value.nis}`;
                        }
                        no = index + 1;
                        var lengthMonDaily = value.non_daily.length;
                        var rowspanStudent = lengthMonDaily + 1;
                        html += `
                            <tr>
                            ${totalDataGroup === 1 ? `` : `<td class="text-left align-top" width="90px" rowspan="${rowspanGroup}">${key}</td>`}
                        `
                        html += `
                            <td class="text-right align-top" width="60px" rowspan="${totalJp + 1}">${no++}.</td>
                            <td class="text-left align-top" width="240px" rowspan="${totalJp + 1}">${studentGroupOrCounselor}</td>
                            <td class="text-left align-top" width="75px" rowspan="${totalJp + 1}">${statusPresence}</td>
                            <td class="text-left align-top" width="200px" rowspan="${totalJp + 1}">${value.daily.note === null || value.daily.note === "null" ? `<span class="font-w400 font-13 grey-6">Tidak ada keterangan.</span>` : `<span class="font-w400 font-13 black-1">${value.daily.note}</span>`}</td>
                    `
                        if (total_non_daily !== 0) {
                            if (value.non_daily.length === 0) {
                                html += `
                                    <td class="text-left grey-6" width="60px" colspan="4">Jam pelajaran belum diatur. Hubungi Waka. Kurikulum untuk melakukan pengaturan sehingga guru dapat menginput absen per JP dan laporannya tampil pada halaman ini.</td>
                                `
                            } else {
                                value.non_daily.sort(function(a, b) {
                                    var dateA = parseInt(a.school_hour.order),
                                        dateB = parseInt(b.school_hour.order);
                                    return dateA - dateB;
                                });
                                $.each(value.non_daily, function(key, value) {
                                    statusJp = "";
                                    if (value.status === "SICK") {
                                        statusJp = "Sakit";
                                    } else if (value.status === "UNKNOWN") {
                                        statusJp = "Alpha";
                                    } else {
                                        statusJp = "Izin";
                                    }
                                    html += `
                                    <tr>
                                        <td class="text-left" width="60px">${value.school_hour.order}</td>
                                        <td class="text-left cursor-pointer btn-edit-status-absence" width="75px">${statusJp}</td>
                                        <td class="text-left" width="240px">${value.subject_name}</td>
                                        <td class="text-left" width="240px">${value.teacher}</td>
                                    </tr>
                                `
                                })
                            }
                        }
                        html += `</tr>`
                    })
                } else {
                    html += `<tr>
                            ${totalDataGroup === 1 ? `` : `<td class="text-left align-top" width="90px" rowspan="${rowspanGroup}">${key}</td>`}
                        </tr>`

                    totalJpValue = 0;
                    $.each(value, function(index, value) {
                        if (value.daily.status === "SICK") {
                            statusPresence = "Sakit";
                        } else if (value.daily.status === "UNKNOWN") {
                            statusPresence = "Alpha";
                        } else {
                            statusPresence = "Izin";
                        }

                        if (isWikrama === "1") {
                            studentGroupOrCounselor =
                                `${value.name} ${value.nis} | ${value.student_group.name}`;
                        } else {
                            studentGroupOrCounselor = `${value.name} ${value.nis}`;
                        }
                        no = index + 1;

                        var lengthMonDaily = value.non_daily.length;
                        var rowspanStudent = lengthMonDaily + 1;

                        if (value.non_daily.length === 0) {
                            html += `
                                <tr>
                                    <td class="text-right align-top" width="60px">${no++}.</td>
                                    <td class="text-left align-top" width="240px">${studentGroupOrCounselor}</td>
                                    <td class="text-left align-top" width="75px">${statusPresence}</td>
                                    <td class="text-left align-top" width="200px">${value.daily.note === null || value.daily.note === "null" ? `<span class="font-w400 font-13 grey-6">Tidak ada keterangan.</span>` : `<span class="font-w400 font-13 black-1">${value.daily.note}</span>`}</td>
                            `
                            if (total_non_daily !== 0) {
                                html += `
                                    <td class="text-left grey-6" width="60px" colspan="4">Jam pelajaran belum diatur. Hubungi Waka. Kurikulum untuk melakukan pengaturan sehingga guru dapat menginput absen per JP dan laporannya tampil pada halaman ini.</td>
                                </tr>
                                `
                            }
                        } else {
                            html += `
                                <tr>
                                    <td class="text-right align-top" width="60px" rowspan="${totalJp + 1}">${no++}.</td>
                                    <td class="text-left align-top" width="240px" rowspan="${totalJp + 1}">${studentGroupOrCounselor}</td>
                                    <td class="text-left align-top" width="75px" rowspan="${totalJp + 1}">${statusPresence}</td>
                                    <td class="text-left align-top" width="200px" rowspan="${totalJp + 1}">${value.daily.note === null || value.daily.note === "null" ? `<span class="font-w400 font-13 grey-6">Tidak ada keterangan.</span>` : `<span class="font-w400 font-13 black-1">${value.daily.note}</span>`}</td>
                                </tr>
                            `
                            if (total_non_daily !== 0) {
                                if (value.non_daily.length === 0) {
                                    html += `
                                <tr>
                                    <td class="text-left grey-6" width="60px" colspan="4">Jam pelajaran belum diatur. Hubungi Waka. Kurikulum untuk melakukan pengaturan sehingga guru dapat menginput absen per JP dan laporannya tampil pada halaman ini.</td>
                                </tr>
                                `
                                } else {
                                    value.non_daily.sort(function(a, b) {
                                        var dateA = parseInt(a.school_hour.order),
                                            dateB = parseInt(b.school_hour.order);
                                        return dateA - dateB;
                                    });
                                    $.each(value.non_daily, function(key, value) {
                                        statusJp = "";
                                        if (value.status === "SICK") {
                                            statusJp = "Sakit";
                                        } else if (value.status === "UNKNOWN") {
                                            statusJp = "Alpha";
                                        } else {
                                            statusJp = "Izin";
                                        }
                                        html += `
                                            <tr>
                                                <td class="text-left" width="60px">${value.school_hour.order}</td>
                                                <td class="text-left cursor-pointer btn-edit-status-absence" width="75px">${statusJp}</td>
                                                <td class="text-left" width="240px">${value.subject_name}</td>
                                                <td class="text-left" width="240px">${value.teacher}</td>
                                            </tr>
                                        `
                                    })
                                }
                            }
                        }

                    })
                }
            })

            html += `
                    </tbody>
                </table>
            </div>
            `


            $('#name-student-group').html(studentGroupName);
            return html;
        }

#javascript

javascript - Unable to preventDefault inside passive event listener - Stack Overflow

I am getting this issue when using owl carousal and scrolling the images.

So get solved just adding below CSS in your page.






.owl-carousel {
-ms-touch-action: pan-y;
touch-action: pan-y;
}


or 

.owl-carousel {
-ms-touch-action: none;
touch-action: none;
}

#javascript

Solving a code challenge

// Write your code here   
let x1Position = x1
let x2Position = x2
const x1BiggerAndFaster = x1 >= x2 && v1 >= v2
const x2BiggerAndFaster = x2 >= x1 && v2 >= v1
do {
  const positionMatch = x1Position === x2Position;
  if (positionMatch) {
    return 'YES';
  }
  const x1PositionPassedx2Positon = (x1 >= x2) && (x1Position < x2Position)
  const x2PositionPassedx1Positon = (x2 >= x1) && (x2Position < x1Position)
  const cannotMatch = x1BiggerAndFaster || x2BiggerAndFaster || x1PositionPassedx2Positon || x2PositionPassedx1Positon
  if (cannotMatch) {
    return 'NO';
  }
  x1Position += v1
  x2Position += v2
} while (true)

#javascript

Create a file inside a folder using MimeType inside Google Drive using AppScript - Stack Overflow

const createFile = (filename, folderId, mimeType, content) => {
  const docs = () => {
    const d = DocumentApp.create(filename);
    d.getBody().editAsText().setText(content);
    d.saveAndClose();
    return d.getId();
  }
  const slides = () => {
    const s = SlidesApp.create(filename);
    s.getSlides()[0].insertTextBox(content);
    s.saveAndClose();
    return s.getId();
  }
  const sheets = () => {
    const s = SpreadsheetApp.create(filename);
    s.getSheets()[0].getRange("A1").setValue(content);
    SpreadsheetApp.flush();
    return s.getId();
  }
  const convert = {
    [MimeType.GOOGLE_DOCS]: docs,
    [MimeType.GOOGLE_SLIDES]: slides,
    [MimeType.GOOGLE_SHEETS]: sheets,
    [MimeType.MICROSOFT_WORD]: docs,
    [MimeType.MICROSOFT_POWERPOINT]: slides,
    [MimeType.MICROSOFT_EXCEL]: sheets,
    [MimeType.OPENDOCUMENT_TEXT]: docs,
    [MimeType.OPENDOCUMENT_PRESENTATION]: slides,
    [MimeType.OPENDOCUMENT_SPREADSHEET]: sheets,
  };
  const fileId = convert[mimeType]();
  if (mimeType.includes("google")) {
    Drive.Files.patch({parents: [{id: folderId}]}, fileId);
    return fileId;
  }
  const url = `https://www.googleapis.com/drive/v3/files/${fileId}/export?mimeType=${mimeType}`;
  const blob = UrlFetchApp.fetch(url, {headers: {authorization: `Bearer ${ScriptApp.getOAuthToken()}`}}).getBlob();
  const id = Drive.Files.insert({title: filename, parents: [{id: folderId}]}, blob);
  DriveApp.getFileById(fileId).setTrashed(true);
  return id;
}

// Please run this function.
function main() {
  var ss = SpreadsheetApp.openById('1MUwH0Cm1cwHcTWSCGPp2SePbzs_4QQmtjwOEWOrOkMw');
  var sheetName = ss.getSheetByName("Sheet2");
  var get = sheetName.getRange(2,3).getValue();

  const filename = "sample";
  const folderId = "1rsicZccurujGp5Ye5HUecBIAPf3_h5Pc";
  const mimeType = MimeType.GOOGLE_SLIDES;
  const fileId = createFile(filename, folderId, mimeType, get);
  console.log(fileId);
}

#javascript

How do you pass back a custom error message from google apps scripts? - Stack Overflow

var onErrObj = {}
function myFunction(){

 try{
  // function code goes here;
  // add more elements to onErrObj as desired;
 }catch(e){
      onErrObj['data1'] = 'someData';
      onErrObj['data'] = 'some Other Data';
      errHandler(e,'myFunction');
 }

 function errHandler(e,strFunc){
      var message = e.message+'\n in file: '+e.fileName+' on line: '+e.lineNumber;
      var sendto = 'yourname@youremail.com';
      var subject = 'My App encountered an error occured in '+strFunc;
      var errProps = JSON.stringify(this.onError);
      message = subject+'\n'+message+'\n onError: '+errProps;
      GmailApp.sendEmail(sendto, subject, message); 
}

#javascript

javascript - Grouping JSON by values - Stack Overflow

outJSON = [{
  team: "TeamA",
  name: "Ahmed",
  field3: "val3"
}, {
  team: "TeamB",
  name: "Ahmed",
  field3: "val43"
}, {
  team: "TeamA",
  name: "Ahmed",
  field3: "val55"
}]

var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};
var groubedByTeam = groupBy(outJSON, 'team')
console.log(groubedByTeam);

#javascript

General Note

1.rec.save() is not needed after var rec=record.load({}) when we just want to read data from rec.

#javascript

How to change the <input> type? - GeeksforGeeks

document.getElementById("id_of_tag_to_be_changed").type="text";

#javascript #nodemailer #aws

Use nodemailer to send email using AWS SMTP Host using environmental variables

import * as nodemailer from "nodemailer";

//config nodemailer transporter using environment variables
const transporter = nodemailer.createTransport({
	host: `${process.env.AWS_SMTP_HOST}` ,
	auth: {
		user: `${process.env.AWS_ACCESS_KEY_ID}`,
		pass: `${process.env.AWS_SECRET_ACCESS_KEY}`
	}
});

export const emailSender = async (data) => {
  try {
    const response = await transporter.sendMail({
      from: process.env.EMAIL_FROM,
      to: process.env.EMAIL_TO || data.email,
      subject: process.env.EMAIL_SUBJECT || data.subject,
      html: `<DOCTYPE html>
            <html>
            <body>
			  ${data.message}
			</body>
			</html>
		`
    });
    return response?.messageId
      	? { success: true }
  		: { success: false, error: "Failed to send email" };
  } catch ( error ){
    console.log("ERROR", error.message);
    return { success: false, error: error.message };
  }
}

#javascript

Navigations In Netsuite || Records || etc

1.Credit Memo
Transactions > Customers > Issue Credit Memos

2.Invoices
Transactions > sales > Create Invoices

#javascript

netsuite Tutorial => Restrict execution based on the context that...

// 2.0
/**
 * @NScriptType UserEventScript
 * @NApiVersion 2.x
 */
define(["N/ui/serverWidget", "N/runtime"], function (ui, runtime) {
    var exports = {};
    
    function beforeLoad(scriptContext) {
        showBonusEligibility(scriptContext.form);
    }
    
    function showBonusEligibility(form) {
        // Doesn't make sense to modify the form if the 
        if (!wasTriggeredFromUi(runtime.executionContext)) {
            return;
        }
        
        // Continue with form modification...
    }

    function wasTriggeredFromUi(context) {
        // Context can be compared to enumeration from runtime module
        return (context === runtime.ContextType.USER_INTERFACE);
    }
    
    exports.beforeLoad = beforeLoad;
    return exports;
});

#javascript

React v. 17

"dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
},

#javascript

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - Stack Overflow

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
    
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    var infowindow = new google.maps.InfoWindow();

    var marker, i;
    
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
      
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

#javascript #react.js

Group and reduce data

// helpers
import { getDataWithNonDuplicatedEntries } from "./getSetDataList";
import { filterData } from "./filterData";
import { reduceData } from "./reduceData";

type DataListType = {
  idade: string;
  quantidade: string;
};

export const groupData = (
  data: any[],
  filterProperty: string,
  reduceProperty: string,
  property: any
) => {
  // declare and empty array to save the results
  let dataList: any = [];

  // set a new list with no duplicated entries
  const list: number[] = getDataWithNonDuplicatedEntries(data, property);
  console.log(list);

  // then, for each item of the list...
  list.forEach((item) => {
    // filter elements
    const filteredData = filterData(data, filterProperty, item);
    console.log(filteredData);

    // get the total by age on the filtered data
    const age = reduceData(filteredData, reduceProperty);

    // finally, pass the results into an object
    const obj = {
      idade: item,
      quantidade: age,
    };
    dataList.push(obj);
  });

  return dataList;
};

#javascript #react.js

Class component with states

import React from 'react';
import Card from './components/Card'
import './index.css'; 

class App extends React.Component{
    state = {
      image_id:51
    }
    
    changeAvatar=()=>{
     this.setState({
        image_id:65
      })
    }
    
    render(){
     return(
            <div className="container">
            <div className="row">
                <Card name="James Smith" job="Pilot" image_id={this.state.image_id}/>
                <Card name="Jessica Jones" job="Nurse" image_id={28}/>
                <Card name="Tom Hanks" job="Lawyer" image_id={68}/>
            </div>
            <div className="row">
                <div className="col-md-3">
                <a onClick={this.changeAvatar} className="changeAvatar" href="#"> Change Avatar </a>
                </div>
            </div>
            </div>
        );
    }
}

export default App;

#javascript #react.js

React basic class component

import React from'react';

class App extends React.Component {
  render() {
    return(
        <div className="container">
          <div className="row">
            <div className="col-md-4">
              <div className="card">
                <img className="card-img-top"src="https://i.pravatar.cc/150?img=52"alt="Card image cap"/>
                  <div className="card-body">
                    <h5 className="card-title">Card title</h5>
                    <p className="card-text">Some quick example text to build on the card title and make up the</p>
                    <a href="#" className="btn btn-primary"> Go somewhere </a>
                  </div>
              </div>
            </div>
          </div>
        </div>
      );
    }
}

export default App;

#javascript #length #number

Number length

function lenOfNum(num) {
  num = Math.abs(num)
  if(num < 10 && num >= 0){
    return 1
  }
  let len = 0
  while(num > 1){
    num = num / 10
    len++
    }
  return len
}

#javascript #react.js

Passing isActive to NavLink - React Router Dom

<Router>
	<NavLink 
	to='users' 
	className={({ isActive }) => isActive ? "navlink--active" : "navlink"} 
	style={({ isActive }) => ({color: isActive ? "#ffffff" : undefined})}>
	Users
	</NavLink>	
</Router>

#javascript

Debounce – How to Delay a Function in JavaScript (JS ES6 Example)

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
function saveInput(){
  console.log('Saving data');
}
const processChange = debounce(() => saveInput());

#javascript

netsuite - Performing a Sum or Grouped Query in SuiteScript 2.0 - Stack Overflow

// Assuming N/search is imported as `s`
var mySalesOrderSearch = s.create({
    type: 'salesorder'
    // Use the summary property of a Column to perform grouping/summarizing
    columns: [{
        name: 'salesrep',
        summary: s.Summary.GROUP
    },{
        name: 'internalid',
        summary: s.Summary.COUNT
    }],
    filters: [{
        name: 'mainline',
        operator: 'is',
        values: ['T']
    }]
});

mySalesOrderSearch.run().each(function (result) {
    var repId = result.getValue({
        "name": "salesrep",
        "summary": s.Summary.GROUP
    });
    var repName = result.getText({
        "name": "salesrep",
        "summary": s.Summary.GROUP
    });
    var orderCount = parseInt(result.getValue({
            "name": "internalid",
            "summary": s.Summary.COUNT
    }), 10);

    log.debug({
        "title": "Order Count by Sales Rep",
        "details": repName + " has sold " + orderCount + " orders."
    });
    return true;
});

#javascript #fibonacci #recursion #algorithm

flatten array recursively

function flatten(arr) {
  let flat = []
  
  for(let prop of arr){
    if(Array.isArray(prop)){
      flat.push(...flattan(prop))
    } else {
      flat.push(prop)
    }
  }
  return flat
}

#javascript

Set up handlebars

const exphbs = require('express-handlebars');
const hbs = exphbs.create({});

app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');

#javascript

function - Pass only the second argument in javascript - Stack Overflow

function test(a = "ay", b = "bee") {
  console.log(`a = ${a}, b = ${b}`);
}
test();             // "a = ay, b = bee"
test(1);            // "a = 1, b = bee"
test(undefined, 2); // "a = ay, b = 2"
test(1, 2);         // "a = 1, b = 2"

#typescript #javascript

The observer pattern in TypeScript

interface Observer{
   update:() => void;
}

class ConcreteObserverA implements Observer {
   update() {
        console.log(this.constructor.name,"has been updated");
   }
}

class ConcreteObserverB implements Observer {
   update () {
        console.log(this.constructor.name,"has been updated");
   }
}
class Subject {
    private _name = "";

    private observerCollection:Observer[] = [];

    get name() {
        return this._name;
    }

    set name(val:string) {
        this._name=val;
        this.notifyObservers();
    }

    registerObserver(...o:Observer[]) {
            this.observerCollection.push(...o);
    }

    unregisterObserver(o:Observer) { 
        this.observerCollection = this.observerCollection.filter (e => e! == o);
    }

    notifyObservers() {
        this.observerCollection.forEach(o => o.update() );
    }
}

const subject = new Subject();
const oA = new ConcreteObserverA();
const oB = new ConcreteObserverB();
subject.registerObserver(oA, oB);

subject.name = "Jau, jau!";

#javascript

POST mysql

// Create a candidate
app.post('/api/candidate', ({ body }, res) => {
  const errors = inputCheck(body, 'first_name', 'last_name', 'industry_connected');
  if (errors) {
    res.status(400).json({ error: errors });
    return;
  }

const sql = `INSERT INTO candidates (first_name, last_name, industry_connected)
  VALUES (?,?,?)`;
const params = [body.first_name, body.last_name, body.industry_connected];

db.query(sql, params, (err, result) => {
  if (err) {
    res.status(400).json({ error: err.message });
    return;
  }
  res.json({
    message: 'success',
    data: body
  });
});
});

#javascript

Delete mysql

// Delete a candidate
app.delete('/api/candidate/:id', (req, res) => {
  const sql = `DELETE FROM candidates WHERE id = ?`;
  const params = [req.params.id];

  db.query(sql, params, (err, result) => {
    if (err) {
      res.statusMessage(400).json({ error: res.message });
    } else if (!result.affectedRows) {
      res.json({
        message: 'Candidate not found'
      });
    } else {
      res.json({
        message: 'deleted',
        changes: result.affectedRows,
        id: req.params.id
      });
    }
  });
});

#javascript

Get single item mysql

// Get a single candidate
app.get('/api/candidate/:id', (req, res) => {
  const sql = `SELECT * FROM candidates WHERE id = ?`;
  const params = [req.params.id];

  db.query(sql, params, (err, row) => {
    if (err) {
      res.status(400).json({ error: err.message });
      return;
    }
    res.json({
      message: 'success',
      data: row
    });
  });
});

#javascript

Get all mysql

// Get all candidates
app.get('/api/candidates', (req, res) => {
  const sql = `SELECT * FROM candidates`;

  db.query(sql, (err, rows) => {
    if (err) {
      res.status(500).json({ error: err.message });
      return;
    }
    res.json({
      message: 'success',
      data: rows
    });
  });
});

#javascript #sass #gulp #css

Reduce data value by object property

const reduceData = (data: any[], property: string) => {
  const result = data.reduce((acc, amount) => {
    return acc + Number(amount[property]);
  }, 0);
  return result;
};

#javascript

IF inline javascript

${pay.remark === null ? `-` : `${pay.remark}`}

#javascript

background image ease-in-out css

============html====================
  
  <div class="slide-bg"></div>
 
=============css==============
    
    .slide-bg{
        height: 100vh;
        width: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        backface-visibility: hidden;
        animation: slidbg 25s ease-in-out infinite ;
        background-image: url(../images/banner-1.png);
}
 
@keyframes slidbg {
 
    0% {
        background-image: url(../images/banner-1.png);
    }
 
    25% {
        background-image: url(../images/banner-2.png);
    }
 
    50% {
        background-image: url(../images/banner-1.png);
    }
 
    75% {
        background-image: url(../images/banner-2.png);
    }
 
    100% {
        background-image: url(../images/banner-1.png);
    }
}

#javascript #react.js

reactjs - Attempted import error: 'useHistory' is not exported from 'react-router-dom' - Stack Overflow

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');

#javascript

promises

const promise = new Promise((resolve, reject) => {  
    let condition;
    
    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

#javascript

A loop to create the alphabet using JavaScript - Stack Overflow || Alphabetic Loop Through

for (i = 0; i < 26; i++) {

  var li = document.createElement("li");
  li.innerHTML = "letter " + (i+10).toString(36) + " ";
  li.style.listStyle = "none";
  li.style.display = "inline";
  document.getElementById("letter-main").appendChild(li);

}

#javascript #fibonacci #recursion #algorithm

Count binary substring

function getSubstringCount(s) {
    // Write your code here
    let [current, prev, result] = [1, 0, 0]
    
    for(let i=1; i<s.length; i++){
        let left = s[i-1]
        let right = s[i]
        if(left == right){
            current++
        } else {
            prev = current
            current = 1
        }
        if(prev >= current){
            result++
        }
    }
    return result
}

#javascript

Charge Customer

app.post("/charge", (req, res) => {
  try {
    stripe.customers
      .create({
        name: req.body.name,
        email: req.body.email,
        source: req.body.stripeToken
      })
      .then(customer =>
        stripe.charges.create({
          amount: 199,
          currency: "usd",
          customer: customer.id
        })
      )
      .then(() => res.render("completed.html"))
      .then(() =>
        key.addKey(req.body.name, req.body.email)
          .catch(console.error)
      )
      .catch(err => console.log(err));
  } catch (err) {
    res.send(err);
  }
}

#javascript

In BeforeLoad Use This When Trying to Get Value In BeforeLoad

function beforeLoad(scriptContext) {

        log.audit('Line No.: 31','Before Load START');
        if (runtime.executionContext == 'USERINTERFACE') {

#javascript

EXECUTION CONTEXT || runtime.context

Action	Payment PostBack
Revenue Management	Platform Extension
Bank Connectivity	Portlet
Bank Statement Parser	Promotions
Bundle Installation	Custom Record Action
Client	RESTlet
Rate Adjustor	REST Web Services
CSV Import	Scheduled Script
Custom GL Lines	SDF Installation
Custom Mass Update	Shipping Partners
Dataset Builder Plug-in	Suitelet
Debugger	Tax Engine
Email Capture	User Event Script
Financial Institution Connectivity	User Interface
Financial Institution Parser	SOAP Web Services
Map/Reduce	Workbook Builder Plug-in
Other	Workflow
Payment Processing

From <https://7315200-sb1.app.netsuite.com/app/common/scripting/scriptrecord.nl?id=893>

#javascript

To read a text file that will work when 'npm test' is run as well as 'jest some.test.js'

const nReadlines = require('n-readlines');
const path = require("path");
const file = path.join(__dirname, "./", "nums-to-test.txt");
const lines = new nReadlines(file);

#javascript

Read file line by line in node.js

const nReadlines = require('n-readlines');
const broadbandLines = new nReadlines('nums-to-test.txt');

let line;
let lineNumber = 1;

while (line = broadbandLines.next()) {
    if(/^#.*$/.test(line.toString())) {
        continue;
    }
    //console.log(`Line ${lineNumber} has: ${line.toString('utf-8')}`);
    lineNumber++;
    let fields = line.toString().split("\t");
    console.log(fields[0]);
    console.log(fields[1]);
}

#django #js #javascript

python - Django : How to access current logged in user's id in javascript? - Stack Overflow

const user_id = JSON.parse(document.getElementById('user_id').textContent);

#javascript

arrays - Typescript - Sort strings descending - Stack Overflow

let values = ["Saab", "Volvo", "BMW"];
values.sort((a, b) => b.localeCompare(a))

#javascript #fibonacci #recursion #algorithm

fibonacci recursive solution

//find fibonacci numbers

function fib(n){
  if(n >=3 ){
    return fib(n-1) + fib(n-2)
  } else {
    return 1;
  }
}

console.log(fib(10))

#javascript #sort #bubble

bubble sort

function bubbleSort(arr){
  let len = arr.length;
  let cost = 0;
  
  for(let i=0; i<len; i++){
    for(let j=0; j<len-1; j++){
      if(arr[j] > arr[j+1]){
        swap(arr, j, j+1);
      }
    }
  }
  return arr
}

let unsortedArr = [0, 5, 6, 8, 2, 1, 3, 7, 4, 10, 12, 11]

console.log(bubbleSort(unsortedArr))

#javascript

Numbers in JavaScript on Exercism

const num = 325987e-6; // Equals to 0. 325987
// The notation essentially says, "Take 325987 and multiply it by 10^-6.

#javascript

Numbers in JavaScript on Exercism

const num = 3.125e7;
// => 31250000
// The notation essentially says, "Take 3.125 and multiply it by 10^7".

#javascript

React.js for Beginners — Props and State Explained

class ParentComponent extends Component {    
    render() {    
        return (        
            <ChildComponent name="First Child" />    
        );  
    }
}

const ChildComponent = (props) => {    
    return <p>{props.name}</p>; 
};

#javascript

Example of findByX -(Promise) & userEvent

// This library is imported to enable async/await keywords in the Codecademy Code Editor
import "regenerator-runtime/runtime";
import React from 'react';
import { Thought } from '../Thought.js';
import {AddThoughtForm} from '../AddThoughtForm.js';
import {App} from '../App.js'
import { waitFor, render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';

// This library is imported to mimic user interactions (which you'll learn about next!)
import userEvent from '@testing-library/user-event';

test('"Oreos are delicious" should not appear' , () => {
  render(<App/>);
  // Add testing logic here
  const emptyThought = screen.queryByText("Oreos are delicious")
  expect(emptyThought).toBeNull()

});

test('Should show new thought to be present' , async () => {
  render(<App/>);

  // The code below mimics a user posting a thought with text 'Oreos are delicious'
  const addThoughtInput = screen.getByRole('input');
  const addButton = screen.getByRole('submit')
  userEvent.type(addThoughtInput, 'Oreos are delicious');
  userEvent.click(addButton)

  // Modify testing logic here
  const thought = await screen.findByText('Oreos are delicious');
  expect(thought).toBeInTheDocument();
});

#javascript

used to query for asynchronous elements which will eventually appear in the DOM-(findByX)

import App from './components/App';
import { render, screen } from '@testing-library/react';
 
test('should show text content as Goodbye', async () => {
  // Render App
  render(<App />);
  // Extract button node 
  const button = screen.getByRole('button');
  // click button
  userEvent.click(button);
  // Wait for the text 'Goodbye!' to appear
  const header = await screen.findByText('Goodbye!');
  // Assert header to exist in the DOM
  expect(header).toBeInTheDocument();
});

#javascript

Mimic user clicking first checkbox

import { render, screen, cleanup } from '@testing-library/react';
import GroceryList from './components/GroceryList';
import userEvent from '@testing-library/user-event';
 
test('should mark the first checkbox as checked', () => {
  // render the grocery list
  render(<GroceryList />);
  // grab the apple item
  const appleItem = screen.getByLabelText('Apples');
  // simulate a "click" on the apple checkbox
  userEvent.click(appleItem);
  // assert that the apple checkbox was checked
  expect(appleItem).toBeChecked();
});

#javascript

How to import mocked function

// file: __tests__/recipes.js
 
import { findRecipe } from './recipes.js'; 
 
// import the actual module
import apiRequest from './api-request.js';
 
// then tell Jest to use the mocked version!
jest.mock('./api-request.js');
 
test("get the full recipe for a dish", async () => {
  // arrange  
  const dish = "Pesto";
  const expectedValue = { "Magical Deliciousness": "3 cups" };
 
  // set the resolved value for the next call to apiRequest  
  const mockResponse = {
    status: "mock",
    data: { "Magical Deliciousness": "3 cups" }
  }
  apiRequest.mockResolvedValueOnce(mockResponse);
 
  // act  
  const actualRecipe = await findRecipe(dish);
 
  // assertion
  expect(actualRecipe).toEqual(expectedValue);
});

#javascript

example of mocked function

const httpRequest = jest.fn(()=> {
  Promise.resolve({
    status: '',
    data: []
  })
});
export default httpRequest;

#javascript

example of mocking api request

// file: utils/__mocks__/api-request.js
const apiRequest = jest.fn(() => {
  return Promise.resolve({ 
    status: "", 
    data: {} 
  });
});
 
export default apiRequest;

#javascript

Test a false positive with done()

test("correctly fetches a list of countries", (done) => {
  //arrange
  const inputLanguageCode = "es" 
  const expectedValue ="Argentina"
  
  //act
  countryListLookup(inputLanguageCode, (result) =>{
    //assertions
    try{
      expect(result).toBeDefined();
    done();
    }
    catch(error){
      done(error)
    }
    
  });
});

#javascript

Mutating a new reference of a state array in order for React to register a change to said state has been made

function addVote() {
    const newVotes = [...votes];
    newVotes[selected] += 1;
    setSelected(selected);
    setVotes(newVotes);
  }

#javascript

Return small HTML page · Cloudflare Workers docs

const html = `<!DOCTYPE html>
<body>
  <h1>Hello World</h1>
  <p>This markup was generated by a Cloudflare Worker.</p>
</body>`;



async function handleRequest(request) {
  return new Response(html, {
    headers: {
      'content-type': 'text/html;charset=UTF-8',
    },
  });

}



addEventListener('fetch', event => {
  return event.respondWith(handleRequest(event.request));

});

#javascript

Getting items from URLSearchParams

let searchObj = {}
for(let [key, value] of searchParams.entries()) {
  searchObj[key] = value
}

#js #javascript #jquery

Change tab class and display content

    $('.tabs-nav a').on('click', function (event) {
        event.preventDefault();
        $('.tabs-nav li').removeClass('tab-active');
        $(this).parent().addClass('tab-active');
        $('.tabs-stage section').hide();
        $($(this).attr('href')).show();

        if ($('#tab-1').css('display') == 'none') {
            $('.box-filters').hide();
        } else {
            $('.box-filters').show();
        }
    });

#javascript

Find the prime number - GeeksforGeeks

// Function that returns true if n
// is prime else returns false
function isPrime(n)
{
    // Corner cases
    if (n <= 1) return false;
    if (n <= 3) return true;
     
    // This is checked so that we can skip
    // middle five numbers in below loop
    if (n%2 == 0 || n%3 == 0) return false;
     
    for (let i=5; i*i<=n; i=i+6)
        if (n%i == 0 || n%(i+2) == 0)
        return false;
     
    return true;
}

#javascript

Clear up the chaos behind these strings

// It seems like something happened to these strings
// Can you figure out how to clear up the chaos?
// Write a function that joins these strings together such that they form the following words:
// 'Javascript', 'Countryside', and 'Downtown'
// You might want to apply basic JS string methods such as replace(), split(), slice() etc

function myFunction (a, b) {

 	b = b.split('').reverse().join	('')
	return a.concat(b).replace(/[^a-zA-Z ]/g, '')

}

myFunction('java', 'tpi%rcs')   // returns 'javascript'
myFunction('c%ountry', 'edis')	// returns 'countryside'
myFunction('down', 'nw%ot')		// returns 'downtown'

#javascript

SEND MAIL WITH FILE ATTACHED

var senderId = -5;
var recipientEmail = 'notify@myCompany.com';
var timeStamp = new Date().getUTCMilliseconds();
var recipientId = 12;
var fileObj = file.load({
id: 88
});
email.send({
author: senderId,
recipients: recipientId,
subject: 'Test Sample Email Module',
body: 'email body',
attachments: [fileObj],
relatedRecords: {
entityId: recipientId,
customRecord:{
id:recordId,
recordType: recordTypeId //an integer value
}
}
});













//EMAIL BODY

var emailBody = 'Dear ' + nextApprName + ',';

                emailBody += '<br/><br/>There is Vendor Bill pending for your urgent action. Kindly review the transaction.';

                emailBody += '<br/>Transaction Number: ' + tranId;

                emailBody += '<br/>Vendor Name: ' + vendorName;

                emailBody += '<br/>Subsidiary: ' + subsidiary;

                emailBody += '<br/>Transaction Date: ' + tranDate;

                emailBody += '<br/>Currency: ' + currency;

                emailBody += '<br/>Amount: ' + amt;

                emailBody += '<br/>Vendor Bill #: <a href="' + billRecUrl + '">' + refNo + '</a>';




emailBody += '<br/>Vendor Bill #: <a href="' + billRecUrl + '">' + refNo + '</a>'; 
do this to give a name to that the link will be hidden in the name.

#javascript

Null Check Custom Check

 function NullCheck(variable) {
        try {
            if (variable != '' && variable != 0 && variable != -1 && variable != '[]' && variable != null && variable != 'null' && variable != 'NULL' && variable != undefined && variable != false && variable != 'false' && variable != 'F') {
                return true
            } else {
                return false
            }
        } catch (err) {
            console.log('Error in NullCheck', err)
        }
    }

#javascript

Take string and make a 2d array of it but starting from the right, needs array element size.

let number = "10145";


//put number into array of arrays like 10145 becomes [ [ '1', '0' ], [ '1', '4', '5' ] ]
let numArray = number.split("");
const chunkRight = (arr, size) => {
    const rm = arr.length % size;
    
    return rm ?
      [arr.slice(0, rm), ..._.chunk(arr.slice(rm), size)]
      :
      _.chunk(arr, size);
};
const result = chunkRight(numArray, 3);

#javascript

javascript - Adding Client Script to Record in View Mode with SuiteScript 2.0 - Stack Overflow

/Suitescripts/MyBundleDir/Part1/clientScript.js
/Suitescripts/MyBundleDir/Part1/ueScript.js

#javascript

Coding Style

if (n < 0) alert(`Power ${n} is not supported`);

#javascript

client script example

// a) on load:
import './override.css'
function onMount() {
  // this should be code that's safe to run eagerly (no danger of race conditions of any kind). Application codebase will call onMount() as soon as it can.
  ...
}

// b) on demand (UI events)
window.bonsaiCallback = function () {
  ...
  // any synchronous code can happen right away, but for any communication with our application codebase, there should be a way how to send a message (event):
  application.send(...)
}

// Listener for messages from application
application.receive((msg) => {...})

#javascript

Toggle Button React Button Examples | React.school

import React, { useState } from 'react';
import styled from 'styled-components';
const Button = styled.button`
  /* Same as above */
`;
const ButtonToggle = styled(Button)`
  opacity: 0.6;
  ${({ active }) =>
    active &&
    `
    opacity: 1;
  `}
`;
const ButtonGroup = styled.div`
  display: flex;
`;
const types = ['Cash', 'Credit Card', 'Bitcoin'];
function ToggleGroup() {
  const [active, setActive] = useState(types[0]);
  return (
    <ButtonGroup>
      {types.map(type => (
        <ButtonToggle
          key={type}
          active={active === type}
          onClick={() => setActive(type)}
        >
          {type}
        </ButtonToggle>
      ))}
    </ButtonGroup>
  );
}

#php #javascript #css

Checkout Field Based on Shipping Method - Working

<?php

add_filter( 'woocommerce_checkout_fields', 'xa_remove_billing_checkout_fields' );
function xa_remove_billing_checkout_fields( $fields ) {
    // change below for the method
    $shipping_method ='local_pickup:1'; 
    // change below for the list of fields
    $hide_fields = array( 'billing_address_1', 'billing_address_2', 'billing_city', 'billing_state', 'billing_postcode' );

    $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
    // uncomment below line and reload checkout page to check current $chosen_methods
     print_r($chosen_methods);
    $chosen_shipping = $chosen_methods[0];

    foreach($hide_fields as $field ) {
        if ($chosen_shipping == $shipping_method) {
            $fields['billing'][$field]['required'] = false;
            $fields['billing'][$field]['class'][] = 'hide';
        }
        $fields['billing'][$field]['class'][] = 'billing-dynamic';
    }

    return $fields;
}

add_action( 'wp_footer', 'cart_update_script', 999 );
function cart_update_script() {
    if (is_checkout()) :
    ?>
    <style>
        .hide {display: none!important;}
    </style>
    <script>
        jQuery( function( $ ) {

            // woocommerce_params is required to continue, ensure the object exists
            if ( typeof woocommerce_params === 'undefined' ) {
                return false;
            }

            $(document).on( 'change', '#shipping_method input[type="radio"]', function() {
                // change local_pickup:1 accordingly 
                $('.billing-dynamic').toggleClass('hide', this.value == 'local_pickup:1');
            });
        });
    </script>
    <?php
    endif;
}

#javascript

Back button – Code DPlugins

function goBack() {
  window.history.back();
}

#javascript

Live Reload with Scripts Organizer – Code DPlugins

setTimeout(function() {
    setTimeout("location.reload(true);");
}, 1500);

#javascript

splice mdn - Buscar con Google

let arr = ['foo', 'bar', 10, 'qux'];

// arr.splice(<index>, <steps>, [elements ...]);

arr.splice(1, 1);			// Removes 1 item at index 1
// => ['foo', 10, 'qux']

arr.splice(2, 1, 'tmp');	// Replaces 1 item at index 2 with 'tmp'
// => ['foo', 10, 'tmp']

arr.splice(0, 1, 'x', 'y');	// Inserts 'x' and 'y' replacing 1 item at index 0
// => ['x', 'y', 10, 'tmp']

#javascript

Regex form validation

//The regular expressions:
//emailRegex: To prevent matching multiple @ signs:
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
//nameRegex: between 2 and 255 characters, prevents symbols and numbers. Also prevents spaces
const nameRegex = /^[a-zA-Z]{2,255}$/;
//passwordRegex: Between 8 and 255 characters, atlest one uppercase, one lowercase, one symbol and one number
const passwordRegex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,255}$/;



/*
.matches(
  /^.*(?=.{8,})((?=.*[!@#$%^&*()\-_=+{};:,<.>]){1})(?=.*\d)((?=.*[a-z]){1})((?=.*[A-Z]){1}).*$/,
  "At least one upper case, number and symbol"
)

- Cyliric /^[аАбБвВгГдДеЕёЁжЖзЗиИйЙкКлЛмМнНоОпПрРсСтТуУфФхХцЦчЧшШщЩъЪыЫьЬэЭюЮяЯ]+$/
/^[a-zA-Z\-_ ’'‘ÆÐƎƏƐƔĲŊŒẞÞǷȜæðǝəɛɣĳŋœĸſßþƿȝĄƁÇĐƊĘĦĮƘŁØƠŞȘŢȚŦŲƯY̨Ƴąɓçđɗęħįƙłøơşșţțŧųưy̨ƴÁÀÂÄǍĂĀÃÅǺĄÆǼǢƁĆĊĈČÇĎḌĐƊÐÉÈĖÊËĚĔĒĘẸƎƏƐĠĜǦĞĢƔáàâäǎăāãåǻąæǽǣɓćċĉčçďḍđɗðéèėêëěĕēęẹǝəɛġĝǧğģɣĤḤĦIÍÌİÎÏǏĬĪĨĮỊĲĴĶƘĹĻŁĽĿʼNŃN̈ŇÑŅŊÓÒÔÖǑŎŌÕŐỌØǾƠŒĥḥħıíìiîïǐĭīĩįịĳĵķƙĸĺļłľŀŉńn̈ňñņŋóòôöǒŏōõőọøǿơœŔŘŖŚŜŠŞȘṢẞŤŢṬŦÞÚÙÛÜǓŬŪŨŰŮŲỤƯẂẀŴẄǷÝỲŶŸȲỸƳŹŻŽẒŕřŗſśŝšşșṣßťţṭŧþúùûüǔŭūũűůųụưẃẁŵẅƿýỳŷÿȳỹƴźżžẓ]$/.test(myString)

*/

//For testing
console.log(emailRegex.test('user@email.com'));
console.log(nameRegex.test('firstname'));
console.log(nameRegex.test('lastname'));
console.log(passwordRegex.test('password'));

#javascript

javascript - How do I disable right click on my web page? - Stack Overflow

document.addEventListener('contextmenu', event => event.preventDefault());

#javascript

Hashing the password for safe storage using 'bcrypt '

//First install required package:
npm i bcrypt

//import bcrypt
import * as bcrypt from 'bcrypt';

//hashing the password using the hash function
const recievedPassword = 'password';
const hashedPassword = await bcrypt.hash(recievedPassword, await bcrypt.genSalt());

//To compare/check a password, use the compare function:
const isMatch = await bcrypt.compare(recievedPassword, hashedPassword);
console.log('passwords: ', isMatch);

#javascript

Check If A Variable Is An Array

let fruit = 'apple';
let fruits = ["apple", "banana", "mango", "orange", "grapes"];

const isArray = (arr) => Array.isArray(arr);

console.log(isArray.(fruit)); //output - false
console.log(isArray.(fruits)), //output- true

#javascript

Redirecting User - you can redirect the user to any specific URL using JavaScript.

const redirect = url => location.href = url

/* call redirect (url) whenever you want to redirect the user to a specific url */

#javascript

Check If An Array Is Empty

let arr1 = [];
let arr2 = [2, 4, 6, 8, 10];

const arr1IsEmpty = !(Array.isArray(arr1) && arr1.length >0);
const arr2IsEmpty = !(Array.isArray(arr2) && arr2.length >0);

console.log(arr1IsEmpty); //output - true
console.log(arr2IsEmpty); // output - false

#javascript

Check if An Element is Focused

const elem = document.querySelector(' .text-input');

const isFocus = elem == document.activeElemnt;

/* isFocus will be true if elem will have focus, and isFocus will be false if elem will not have focus */

#javascript

Extract Domain Name From An Email

let email = 'xyz@gmail.com';
le getDomain = email.substring(email.indexOf('@') + 1);

console.log(getDomain); // output - gmail.com

#javascript

Generate random string

const randomString = Math.random().toString(36).slice(2);
console.log(randomString); //output- r0zf1xfqcr (the string will be random )

#javascript

JavaScript shorthand tips and tricks that will save your time | by Amitav Mishra | JavaScript in Plain English

//Longhand 
const power = Math.pow(4, 3); // 64 
// Shorthand 
const power = 4**3; // 64

#javascript

JavaScript shorthand tips and tricks that will save your time | by Amitav Mishra | JavaScript in Plain English

//Longhand 
if (value === 1 || value === 'one' || value === 2 || value === 'two') { 
    // Execute some code 
} 
// Shorthand 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) { 
   // Execute some code 
}
// Shorthand 2
if ([1, 'one', 2, 'two'].includes(value)) { 
   // Execute some code 
}

#javascript

Generates a token of specified length

//This function allows you to set the token length and allowed characters.
//tokenLength = 64
function generateToken(64) {
    var generatedToken = '';
    var allowedCharacters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    for(var i = 0; i < n; i++) {
        generatedToken += allowedCharacters[Math.floor(Math.random() * allowedCharacters.length)];
    }
	console.log(generatedToken);
    return generatedToken;
}

#javascript

Date and time manipulation

//Get current date and time
var currentDate = new Date();

//Get current date and time and add +n hours. Acts as an expiration date
var expirationDate = new Date();
expirationDate.setHours(expirationDate.getHours() + 2);

//Check if date has expired
if (currentDate > expirationDate) {
	return {
		message: 'Expired'
	}
}

//To get a 24 hour time
var date = new Date();
console.log(date.toLocaleString('en-GB'));

#javascript #sass #gulp #css

Gulp for Sass and JS

/* 
	https://www.youtube.com/watch?v=q0E1hbcj-NI
    Browsersync + Sass + Gulp in 15 minutes
    
	install as devDependencies:
	npm install browser-sync cssnano gulp gulp-cli gulp-postcss gulp-sass gulp-terser sass -D    
*/

// run gulp by typing on terminal : gulp
// error: gulp-sass no longer has a default Sass compiler; please set one yourself.

const { src, dest, watch, series } = require("gulp");
const sass = require("gulp-sass");
const postcss = require("gulp-postcss");
const cssnano = require("cssnano");
const terser = require("gulp-terser");
const browsersync = require("browser-sync").create();

// sass task
function sassTask() {
  return src("./sass/style.scss", { sourcemaps: true })
    .pipe(sass())
    .pipe(postcss([cssnano()]))
    .pipe(dest("dist/css", { sourcemaps: "." }));
}

// javascript task
function jsTask() {
  return src("./js/index.js", { sourcemaps: true })
    .pipe(terser())
    .pipe(dest("dist/js", { sourcemaps: "." }));
}

// browsersync
function browserSyncServer(callback) {
  browsersync.init({
    server: {
      baseDir: ".",
    },
  });
  callback();
}

function browserSyncReload(callback) {
  browsersync.reload();
  callback();
}

// watch task
function watchTask() {
  watch("*.html", browserSyncReload);
  watch(
    ["./sass/**/*.scss", ".js/**/*.js"],
    series(sassTask, jsTask, browserSyncReload)
  );
}

// gulp workflow
exports.default = series(sassTask, jsTask, browserSyncServer, watchTask);

#javascript

JS trim split float

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The split() Method</h2>

<p>split() splits a string into an array of substrings, and returns the array:</p>

<p id="demo"></p>

<script>
let text = " 0.00 ";
const myArray = text.trim().split(".");

document.getElementById("demo").innerHTML = myArray[1]; 
</script>

</body>
</html>

#javascript

Number , parsefloat , toLocaleString, minimumFractionDigits, maximumFractionDigits

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Global Methods</h1>
<h2>The parseFloat() Method</h2>

<p>parseFloat() parses a string and returns the first number:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
new Number(parseFloat(" 0.00 ")).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})
</script>

</body>
</html>

#javascript

Number.prototype.toLocaleString() - JavaScript | MDN

var number = 123456.789;

// request a currency format
console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
// → 123.456,79 €

// the Japanese yen doesn't use a minor unit
console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
// → ￥123,457

// limit to three significant digits
console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
// → 1,23,000

// Use the host default language with options for number formatting
var num = 30000.65;
console.log(num.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
// → "30,000.65" where English is the default language, or
// → "30.000,65" where German is the default language, or
// → "30 000,65" where French is the default language

#javascript

How to use toLocaleString() and tofixed(2) in JavaScript - Stack Overflow

var num = 2046430.123;
num.toLocaleString(undefined, {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
}) // 2,046,430.12

#javascript

Fetch data API + map()

// https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-fetch-api-to-get-data-pt

function createNode(element) {
    return document.createElement(element);
}

function append(parent, el) {
  return parent.appendChild(el);
}

const ul = document.getElementById('authors');
const url = 'https://randomuser.me/api/?results=10';

fetch(url)
.then((resp) => resp.json())
.then(function(data) {
  let authors = data.results;
  return authors.map(function(author) {
    let li = createNode('li');
    let img = createNode('img');
    let span = createNode('span');
    img.src = author.picture.medium;
    span.innerHTML = `${author.name.first} ${author.name.last}`;
    append(li, img);
    append(li, span);
    append(ul, li);
  })
})
.catch(function(error) {
  console.log(error);
});

#javascript

Function to create a HTML Element

function createNode(element) {
  return document.createElement(element);
}

function append(parent, el) {
  return parent.appendChild(el);
}

#javascript

Pagination using javascript (with functions)

https://www.youtube.com/watch?v=d2ve7xQNco8

#javascript

Find and replace an item on array

const id = itemToBeReplaced.id 
const updatedData = arr.map(item => (item.id === id ? { ...item, props: 'some value to be replaced' } : item));

#javascript

javascript - Issue with pulling JSON data in SuiteScript - NetSuite - Stack Overflow

function iter(rec, listName, cb){
    var lim = rec.getLineCount({sublistId:listName});
    var i = 0;
    var getV = function (fld){
        return rec.getSublistValue({sublistId:listName, fieldId:fld, line:i});
    };
    var setV = function(fld, val){
        rec.setSublistValue({sublistId:listName, fieldId:fld, line:i, value:val});
    };
    for(; i< lim; i++){
        cb(i, getV, setV);
    }
}

#javascript

Day 15: Linked List

process.stdin.resume();
process.stdin.setEncoding('ascii');

var input_stdin = "";
var input_stdin_array = "";
var input_currentline = 0;

process.stdin.on('data', function (data) {
    input_stdin += data;
});

process.stdin.on('end', function () {
    input_stdin_array = input_stdin.split("\n");
    main();    
});
function readLine() {
    return input_stdin_array[input_currentline++];
}
function Node(data){
    this.data=data;
    this.next=null;
}
function Solution(){

	this.insert=function(head,data){
          //complete this method
          var newNode = new Node(data);

        if (head === null || typeof head === 'undefined') {
            head = newNode;  
        } else if (head.next === null) {
            head.next = newNode;
        } else {
            var next = head.next;
            while(next.next) {
                next = next.next
            }
            next.next = newNode;
        }
        
        return head;
    };

	this.display=function(head){
        var start=head;
            while(start){
                process.stdout.write(start.data+" ");
                start=start.next;
            }
    };
}
function main(){
    var T=parseInt(readLine());
    var head=null;
    var mylist=new Solution();
    for(i=0;i<T;i++){
        var data=parseInt(readLine());
        head=mylist.insert(head,data);
    }
    mylist.display(head);
}

#javascript

Day 14: Scope

class Difference:
    def __init__(self, a):
        self.__elements = a
    def computeDifference(self):
        maximum = 0
        for i in range(len(self.__elements)):
            for j in range(len(self.__elements)):
                absolute = abs(self.__elements[i] - self.__elements[j])
                if absolute > maximum:
                    maximum = absolute
        self.maximumDifference = maximum

# End of Difference class

_ = input()
a = [int(e) for e in input().split(' ')]

d = Difference(a)
d.computeDifference()

print(d.maximumDifference)

#javascript

Day 17: More Exceptions

process.stdin.resume();
process.stdin.setEncoding('ascii');

var input_stdin = "";
var input_stdin_array = "";
var input_currentline = 0;

process.stdin.on('data', function (data) {
    input_stdin += data;
});

process.stdin.on('end', function () {
    input_stdin_array = input_stdin.split("\n");
    main();    
});
function readLine() {
    return input_stdin_array[input_currentline++];
}

//Write your code here
class Calculator {
    constructor (n, p) {
        this.n = n;
        this.p = p;
    }
    
    power(n, p) {
        if (n<0 || p <0) return ("n and p should be non-negative")
        else return Math.pow(n,p)
    }
}
function main(){
    var myCalculator=new Calculator();
    var T=parseInt(readLine());
    while(T-->0){
        var num = (readLine().split(" "));
        try{
            var n=parseInt(num[0]);
            var p=parseInt(num[1]);
            var ans=myCalculator.power(n,p);
            console.log(ans);
        }
        catch(e){
            console.log(e);
        }

    }
}

#javascript

Fullstack React: Introduction to Promises

function getCurrentTime() {
  // Get the current 'global' time from an API using Promise
  return new Promise((resolve, reject) => {
    setTimeout(function() {
      var didSucceed = Math.random() >= 0.5;
      didSucceed ? resolve(new Date()) : reject('Error');
    }, 2000);
  })
}
getCurrentTime()
  .then(currentTime => getCurrentTime())
  .then(currentTime => {
    console.log('The current time is: ' + currentTime);
    return true;
  })
  .catch(err => console.log('There was an error:' + err))

#javascript

jQuery input:radio checked - Google 검색

$('input[name="name_of_your_radiobutton"]:checked').val();

#javascript

jQuery input:radio checked - Google 검색

!$("input:radio[value='7'][name='employee-type']").prop('checked')

#javascript

Day 10: Binary Numbers

'use strict';

process.stdin.resume();
process.stdin.setEncoding('utf-8');

let inputString = '';
let currentLine = 0;

process.stdin.on('data', function(inputStdin) {
    inputString += inputStdin;
});

process.stdin.on('end', function() {
    inputString = inputString.split('\n');

    main();
});

function readLine() {
    return inputString[currentLine++];
}

function reverseString(str) {
  return (str === '') ? '' : reverseString(str.substr(1)) + str.charAt(0);
}

function main() {
    var n = parseInt(readLine());
    var arr = [];
    
    while(n != 0){
        if (n%2 == 0)
            arr.push(0);
        if (n%2 == 1)
            arr.push(1);
        n = Math.floor(n/2);
    }
    
    var max = 0;
    var cur = 0;

    
    for (var i = 0, len = arr.length; i < len; i++) {
        if (arr[i] == 1)
            cur++;
        else if (arr[i] == 0){
            if (cur > max)
                max = cur;
            cur = 0;
        }
    }
    
    if (cur > max)
        max = cur;
    
    console.log(max); 
}

#javascript

Day 20: Sorting

'use strict';

process.stdin.resume();
process.stdin.setEncoding('utf-8');

let inputString = '';
let currentLine = 0;

process.stdin.on('data', function(inputStdin) {
    inputString += inputStdin;
});

process.stdin.on('end', function() {
    inputString = inputString.split('\n');

    main();
});

function readLine() {
    return inputString[currentLine++];
}


function main() {
    const n = parseInt(readLine().trim(), 10);

    const a = readLine().replace(/\s+$/g, '').split(' ').map(aTemp => parseInt(aTemp, 10));

    var numberOfSwaps = 0;
    for (var i = 0; i < n; i++) {
    
    var item;
    for (var j = 0; j < n - 1; j++) {
    
        if (a[j] > a[j + 1]) {
            item = a[j];
            a[j]= a[j + 1];
            a[j + 1] = item;
            numberOfSwaps++;
        }
    }
   
   
    if (numberOfSwaps == 0) {
        break;
    }
   
}
    
   console.log("Array is sorted in", numberOfSwaps,"swaps.");
   console.log("First Element:", a[0]);
   console.log("Last Element:", a[a.length-1]);
    
}

#javascript

Day 19: Interfaces

import java.io.*;
import java.util.*;

interface AdvancedArithmetic{
   int divisorSum(int n);
}
class Calculator implements AdvancedArithmetic {
    public int divisorSum(int n) {
         
        int sum = 0;
        for (int i = 1; i <= n; i++)
            if (n % i == 0) sum += i;
        return sum;
        
    }
}

class Solution {

    public static void main(String[] args) {
        Scanner scan = new Scanner(System.in);
        int n = scan.nextInt();
        scan.close();
        
      	AdvancedArithmetic myCalculator = new Calculator(); 
        int sum = myCalculator.divisorSum(n);
        System.out.println("I implemented: " + myCalculator.getClass().getInterfaces()[0].getName() );
        System.out.println(sum);
    }
}

#javascript

Pitayan | 8 Javascript quiz that may confuse you

function Animal(){ 
  this.type = "animal"
}
   
function Dog(){ 
  this.name = "dog"
}
 
Dog.prototype = new Animal()
 
var PavlovPet = new Dog(); 
 
console.log(PavlovPet.__proto__ === Dog.prototype)
console.log(Dog.prototype.__proto__ === Animal.prototype)

#javascript

Attachment Insert in Apex class

Blob b = Blob.valueOf('Test Data');
    	
Attachment attachment = new Attachment();
attachment.ParentId = parentId;
attachment.Name = 'Test Attachment for Parent';
attachment.Body = b;

insert(attachment);

#javascript

return-youtube-dislike/Return Youtube Dislike.user.js at main · function isInViewPort(element) {....}

function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  const height = innerHeight || document.documentElement.clientHeight;
  const width = innerWidth || document.documentElement.clientWidth;
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= height &&
    rect.right <= width
  );
}

#html #javascript

Hotkey Shortcut

<!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>Document</title>
</head>
<body>

    <form action="/action_page.php">
        <label for="fname">First name:</label>
        <input type="text" id="fname" name="fname"><br><br>
        <label for="lname">Last name:</label>
        <input type="text" id="lname" name="lname"><br><br>
        <input type="submit" value="Submit">
      </form>

<script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>

<script type="text/javascript">
hotkeys('alt+z,alt+x,alt+c,alt+v,alt+b,alt+n,alt+m,alt+1', function (event, handler){
  switch (handler.key) {
    case 'alt+z': document.getElementById("fname").value = "alt+z";
      break;
    case 'alt+x': document.getElementById("fname").value = "alt+x";
      break;
    case 'alt+c': document.getElementById("fname").value = "alt+c";
      break;
    case 'alt+v': document.getElementById("fname").value = "alt+v";
      break;
    case 'alt+b': document.getElementById("fname").value = "alt+b";
      break;
    case 'alt+n': document.getElementById("fname").value = "alt+n";
      break;
    case 'alt+m': document.getElementById("fname").value = "alt+m";
      break;
    case 'alt+1': document.getElementById("fname").value = "alt+1";
      break;
    default: alert(event);
  }
});
</script>
</body>
</html>

#javascript

JS - Object prototype assignment

function Student() {
}

Student.prototype.sayName = function() {
  console.log(this.name)
}

function EighthGrader(name) {
  this.name = name
  this.grade = 8
}

EighthGrader.prototype = Object.create(Student.prototype)

const carl = new EighthGrader("carl")
carl.sayName() // console.logs "carl"
carl.grade // 8

#javascript

JavaScript replace/regex - Stack Overflow

function reEscape(s) {
    return s.replace(/([.*+?^$|(){}\[\]])/mg, "\\$1");
}

// ...

var re = new RegExp(reEscape(pattern), "mg");
this.markup = this.markup.replace(re, value);

#javascript

Animated Number Counter using JS

var counter = setInterval(updatedCount, 100);
var upto=0;

function updatedCount() {
  var count = document.getElementById('counter');
  count.innerHTML= ++upto;
  if(upto === 50) {
    clearInterval(counter);
  }
}

#javascript

Activity: Submit your choice of portfolio project prompt

It's a project that has been close to my heart for years and I haven't found the time to create it, especially since my wife and two daughters are in this field.

#javascript

Day 16: Exceptions - String to Integer

'use strict';

process.stdin.resume();
process.stdin.setEncoding('utf-8');

let inputString = '';
let currentLine = 0;

process.stdin.on('data', function(inputStdin) {
    inputString += inputStdin;
});

process.stdin.on('end', function() {
    inputString = inputString.split('\n');

    main();
});

function readLine() {
    return inputString[currentLine++];
}



function main() {
    const S = readLine();
    
    try {
        
        console.log(parseInt(S).toString().replace('NaN', 'Bad String'));
    } catch (err) {
        console.log("Bad String");
    }
}

#javascript

javascript - Iterate through HTML DOM and get depth - Stack Overflow

function element_list(el,depth) {
    console.log(el+' '+depth);
    for(var i=0; i<el.children.length; i++) {
        element_list(el.children[i],depth+1);
    }
}
element_list(document,0);

#javascript

prevent browser back button disabled

history.pushState(null, null, location.href);
        window.onpopstate = function (){
          history.go(1);
        };

#javascript

Count Divisor

//Count Divisors
// Sample code to perform I/O:

process.stdin.resume();
process.stdin.setEncoding("utf-8");
var stdin_input = "";

process.stdin.on("data", function (input) {
    stdin_input += input;                               // Reading input from STDIN
});

process.stdin.on("end", function () {
   main(stdin_input);
});

function main(input) {
    const data= input.toString().split("\n");
    
    console.log(divisors(data[0]));       // Writing output to STDOUT
}

// Warning: Printing unwanted or ill-formatted data to output will cause the test cases to fail



// Write your code here
// Sample code to perform I/O:
//Enter your code here

function divisors(s) {
    
    var arr = s.split(" ").map(item => Number(item));
    
    
    const l = arr[0];
    const r = arr[1];

    const k = arr[2];

    
    var count =0;

    for (var i=l; i<=r; i++) {
        if ((i % k)==0) count++
        
    }
    
    return count; 
    
}

#javascript

Palindromic String

//Palindromic String
// Sample code to perform I/O:

process.stdin.resume();
process.stdin.setEncoding("utf-8");
var stdin_input = "";

process.stdin.on("data", function (input) {
    stdin_input += input;                               // Reading input from STDIN
});

process.stdin.on("end", function () {
   main(stdin_input);
});

function main(input) {
  
  var data= input.toString().split("\n");
    process.stdout.write(palindrome(data[0]));       // Writing output to STDOUT
}

// Warning: Printing unwanted or ill-formatted data to output will cause the test cases to fail



// Write your code here
// Sample code to perform I/O:
//Enter your code here
function palindrome(s) {
    
    var len = s.length;
    var midle = Math.floor(len/2);

    for (var i= 0; i<midle; i++) {
        if (s[i] !== s[len-1-i]) return "NO"
    }    
    return "YES";    
}

#javascript

Toggle String

//Toggle String
// Sample code to perform I/O:

process.stdin.resume();
process.stdin.setEncoding("utf-8");
var stdin_input = "";

process.stdin.on("data", function (input) {
    stdin_input += input;                               // Reading input from STDIN
});

process.stdin.on("end", function () {
   main(stdin_input);
});

function main(input) {
    var data= input.toString().split("\n");

    process.stdout.write(toggle(data[0]));       // Writing output to STDOUT
}

// Warning: Printing unwanted or ill-formatted data to output will cause the test cases to fail



// Write your code here
// Sample code to perform I/O:
//Enter your code here


function toggle(s) {
    var ss="";
    for (var i= 0; i<s.length; i++) {
        
        if (s[i] >= 'a' && s[i] <= 'z') {
           ss= ss+String.fromCharCode(s.charCodeAt(i) - 32);
        } else if (s[i] >= 'A' && s[i] <= 'Z') {
            ss= ss+String.fromCharCode(s.charCodeAt(i) + 32);
         
        }
            
    }    
    return ss;    
}

#javascript

Roy and Profile Picture

// Roy and Profile Picture
// Sample code to perform I/O:

process.stdin.resume();
process.stdin.setEncoding("utf-8");
var stdin_input = "";

process.stdin.on("data", function (input) {
    stdin_input += input;                               // Reading input from STDIN
});

process.stdin.on("end", function () {
   main(stdin_input);
});

function main(input) {
    //process.stdout.write("Hi, " + input + ".\n");       // Writing output to STDOUT
var data= input.toString().split("\n");

const L= parseInt(data[0],10);
const N= parseInt(data[1],10);
var W = 0;
var H = 0;
var ligne = "";
for (var WH=0; WH<N; WH++) {
    ligne = data[2+WH].split(" ");
    
    W = ligne[0,0];
    H = ligne[0,1];

   if (W < L || H < L)
               console.log("UPLOAD ANOTHER")
    else if (W == H && W >= L && H >= L) console.log("ACCEPTED")
    else console.log("CROP IT");
   
}

}

// Warning: Printing unwanted or ill-formatted data to output will cause the test cases to fail



// Write your code here
// Sample code to perform I/O:
//Enter your code here

#javascript

Life, the Universe, and Everything

// Life, the Universe, and Everything
// Sample code to perform I/O:

process.stdin.resume();
process.stdin.setEncoding("utf-8");
var stdin_input = "";

process.stdin.on("data", function (input) {
    stdin_input += input;                               // Reading input from STDIN
});

process.stdin.on("end", function () {
   main(stdin_input);
});

function main(input) {
    //process.stdout.write("Hi, " + input + ".\n");       // Writing output to STDOUT
var data= input.toString().split("\n");
var arr = data.map(item => Number(item));

const flag = true;
var i = 0;
while (flag)  {
    
    if (arr[i]==42) {
        break;
    } else console.log(arr[i]);
    i++; 
}   

}

// Warning: Printing unwanted or ill-formatted data to output will cause the test cases to fail



// Write your code here
// Sample code to perform I/O:
//Enter your code here

#javascript

Day 13: Abstract Classes

'use strict';

var _input = '';
var _index = 0;
process.stdin.on('data', (data) => { _input += data; });
process.stdin.on('end', () => {
    _input = _input.split(new RegExp('\n'));
    main();    
});
function readLine() { return _input[_index++]; }

/**** Ignore above this line. ****/

class Book {
    constructor(title, author) {
        if (this.constructor === Book) {
            throw new TypeError('Do not attempt to directly instantiate an abstract class.'); 
        }
        else {
            this.title = title;
            this.author = author;
        }
    }
    
    display() {
        console.log('Implement the \'display\' method!')
    }
}

// Declare your class here.
    /**   
    *   Class Constructor
    *   
    *   @param title The book's title.
    *   @param author The book's author.
    *   @param price The book's price.
    **/
    // Write your constructor here
    
    /**   
    *   Method Name: display
    *   
    *   Print the title, author, and price in the specified format.
    **/
    // Write your method here
    
// End class

class MyBook extends Book{

    /**   
    *   Class Constructor
    *   
    *   @param title The book's title.
    *   @param author The book's author.
    *   @param price The book's price.
    **/
    // Write your constructor here
    constructor(title, author, price) {
        super(title, author);
        this.price = price;
    }
    /**   
    *   Method Name: display
    *   
    *   Print the title, author, and price in the specified format.
    **/
    // Write your method here
    display() {
        console.log('Title: ' + this.title);
        console.log('Author: ' + this.author);
        console.log('Price: ' + this.price);
    }
    
// End class
}



function main() {
    let title = readLine()
    let author = readLine()
    let price = +readLine()

    let book = new MyBook(title, author, price)
    book.display()
}

#javascript

Day 12: Inheritance

'use strict';

var _input = '';
var _index = 0;
process.stdin.on('data', (data) => { _input += data; });
process.stdin.on('end', () => {
    _input = _input.split(new RegExp('[ \n]+'));
    main();    
});
function read() { return _input[_index++]; }

/**** Ignore above this line. ****/

class Person {
    constructor(firstName, lastName, identification) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.idNumber = identification;
    }
    
    printPerson() {
        console.log(
            "Name: " + this.lastName + ", " + this.firstName 
            + "\nID: " + this.idNumber
        )
    }
}

class Student extends Person {
    /*	
    *   Class Constructor
    *   
    *   @param firstName - A string denoting the Person's first name.
    *   @param lastName - A string denoting the Person's last name.
    *   @param id - An integer denoting the Person's ID number.
    *   @param scores - An array of integers denoting the Person's test scores.
    */
    // Write your constructor here

    /*	
    *   Method Name: calculate
    *   @return A character denoting the grade.
    */
    // Write your method here
     constructor(firstName, lastName, id, scores) {
        super(firstName, lastName, id, scores);

        this.scores = scores;
    }

    calculate() {
        const average = this.scores.reduce((target, score) => { return target + score }) / this.scores.length;

        const range = (average < 70)
            ? Math.ceil((100 - average) / 15)
            : Math.floor((100 - average - 1) / 10);
        let letter = '';

        switch (range) {
            case -1:
            case 0:
                letter = 'O';
                break;

            case 1:
                letter = 'E';
                break;

            case 2:
                letter = 'A';
                break;

            case 3:
                letter = 'P';
                break;

            case 4:
                letter = 'D';
                break;

            default:
                letter = 'T';
                break;
        }

        return letter;
    }
    
}

function main() {
    let firstName = read()
    let lastName = read()
    let id = +read()
    let numScores = +read()
    let testScores = new Array(numScores)
    
    for (var i = 0; i < numScores; i++) {
        testScores[i] = +read()  
    }

    let s = new Student(firstName, lastName, id, testScores)
    s.printPerson()
    s.calculate()
    console.log('Grade: ' + s.calculate())
}

#javascript

Day 11: 2D Arrays

'use strict';

process.stdin.resume();
process.stdin.setEncoding('utf-8');

let inputString = '';
let currentLine = 0;

process.stdin.on('data', function(inputStdin) {
    inputString += inputStdin;
});

process.stdin.on('end', function() {
    inputString = inputString.split('\n');

    main();
});

function readLine() {
    return inputString[currentLine++];
}



function main() {

    let arr = Array(6);

    for (let i = 0; i < 6; i++) {
        arr[i] = readLine().replace(/\s+$/g, '').split(' ').map(arrTemp => parseInt(arrTemp, 10));
    }
    
    //
    
    var sumarr = [];
    
    var h = 0;
    for (var i = 0; i < 4; i++) {
        for (var j = 0; j < 4; j++) {
            sumarr[h] = arr[i][j] + arr[i][j+1] + arr[i][j+2]
                    + arr[i+1][j+1] + arr[i+2][j] + arr[i+2][j+1]
                    + arr[i+2][j+2];
            h++;
        }
    }

    sumarr.sort();
    
    var max = -99999;
    for (var x = 0; x < 16; x++){
        if (sumarr[x] > max)
            max = sumarr[x];
    }
    
    console.log(max);
}

#javascript

Day 8: Dictionaries and Maps

function processData(input) {
    //Enter your code here
    const lines = input.split("\n");
    const n = parseInt(lines[0]);
    const phoneBook = new Map();
    
    for (var i =1; i<=n; i++ ) {
        const arr = lines[i].split(" ");
        const name = arr[0];
        const phone = arr[1];
        phoneBook.set(name, phone);
    }
    
    
    for (var j=n+1; j<=lines.length-1; j++ ) {
      
        if (phoneBook.has(lines[j])) {
           console.log(lines[j]+"="+phoneBook.get(lines[j])); 
        } else {
            console.log("Not found");
        }
    }
    
    
   
}

process.stdin.resume();
process.stdin.setEncoding("ascii");
_input = "";
process.stdin.on("data", function (input) {
    _input += input;
});

process.stdin.on("end", function () {
   processData(_input);
});

#javascript

Cost of balloons

// Cost of balloons
// Sample code to perform I/O:

process.stdin.resume();
process.stdin.setEncoding("utf-8");
var stdin_input = "";

process.stdin.on("data", function (input) {
    stdin_input += input;                               // Reading input from STDIN
});

process.stdin.on("end", function () {
   main(stdin_input);
});

function main(input) {
    process.stdout.write(costBallons(input));       // Writing output to STDOUT
}

// Warning: Printing unwanted or ill-formatted data to output will cause the test cases to fail



// Write your code here
// Sample code to perform I/O:
//Enter your code here
function costBallons(data) {
    
    data= data.toString().split("\n");
    let answer =[];

    let ligne = 0;
    // Number of test    
    let tests = Number(data[ligne]);
    //console.log("Number of tests ", tests);
    ligne = 1;
    for (let t=1; t<=tests; t++ ) {
      //  console.log("Num test : ", t);
        
       // console.log(" ----- Cost ------ ");
        
        let costs = data[ligne].split(" ").map((item)=> Number(item));
        //for (let costX = 0; costX<costs.length; costX++) {
        //    console.log(costs[costX]);
            
        //}

        //console.log(" ----- Participants ------ ");
        ligne = ligne + 1;
        let participants =  Number(data[ligne]);
        ligne = ligne +1;
        //console.log(participants);
        let sumColone1=0;
        let sumColone2 = 0;
        //console.log(" ----- Status ------ ");
        for (let status=0; status<participants; status++) {
            let stat  = data[ligne+status].split(" ").map((item)=> Number(item));
          //  console.log(stat);
            // Calcul somme colonne 
            sumColone1 = sumColone1 + stat[status,0];
            sumColone2 = sumColone2 + stat[status,1];
            
        }
        //console.log(sumColone1);
        //console.log(sumColone2);

        // Cost green and cost purple
        costGreen = costs[0];
        costPurple = costs[1];

        // Case 1 
        sum1 = costGreen*sumColone1 + costPurple*sumColone2;
        //console.log(sum1);
        // Case 2 
        sum2 = costPurple*sumColone1 + costGreen*sumColone2; 
        //console.log(sum2);
        // 
        answer.push(Math.min(sum1,sum2));

        ligne = ligne +participants;
        

    }
    
    //let participants = Number(data[2]);
    //let status = 

    
    return answer.join("\n").toString();

}

#javascript

Best Index

// Best Index
// Sample code to perform I/O:

process.stdin.resume();
process.stdin.setEncoding("utf-8");
var stdin_input = "";

process.stdin.on("data", function (input) {
    stdin_input += input;                               // Reading input from STDIN
});

process.stdin.on("end", function () {
   main(stdin_input);
});

function main(input) {
    var data= input.toString().split("\n");

    //process.stdout.write(bestIndex(data[1], parseInt(data[0])));
    console.log(bestIndex(data[1], parseInt(data[0])));
           // Writing output to STDOUT
}

// Warning: Printing unwanted or ill-formatted data to output will cause the test cases to fail



// Write your code here
// Sample code to perform I/O:
//Enter your code here
function bestIndex(input,n) {
   

    let arr = input.split(" ").map((item)=>Number(item));

    let max = -Infinity;

    for (let i = 0; i<n; i++) {
        if (i>0) arr[i] = arr[i]+arr[i-1];
    }    
        
    
    for (let j = 0; j<n; j++) {
        let left = n- j;

        let sum =0;
        let k =Math.trunc(((-1+Math.sqrt((8*left+1)))/2));

        sum=arr[Math.trunc((k*(k+1))/2+j-1)];

        if (j!=0) {sum-=arr[j-1];}
        if (max<sum) {max=sum;}
        


        
    }    

    
    return max.toString();

}

#javascript

Convert a Boolean to a String - 2

//Implement a function which convert the given boolean value into its string representation.

//Note: Only valid inputs will be given.

function booleanToString(b){
  return b.toString();
}

#javascript

Convert a Boolean to a String - 1

//mplement a function which convert the given boolean value into its string representation.

//Note: Only valid inputs will be given.

function booleanToString(b){
  if(b){
    //just return a string
    return "true";
  }else{
    //just return a string
    return "false";
  }
}

#javascript

Divisible

// Divisible
// Sample code to perform I/O:

process.stdin.resume();
process.stdin.setEncoding("utf-8");
var stdin_input = "";

process.stdin.on("data", function (input) {
    stdin_input += input;                               // Reading input from STDIN
});

process.stdin.on("end", function () {
   main(stdin_input);
});

function main(input) {
    var data= input.toString().split("\n");

    process.stdout.write(divisible(data[1], parseInt(data[0])));
           // Writing output to STDOUT
}

// Warning: Printing unwanted or ill-formatted data to output will cause the test cases to fail



// Write your code here
// Sample code to perform I/O:
//Enter your code here

function divisible(input,n) {
   
    const arr = input.split(" ");
    let firstHalf = arr.slice(0,n/2);
    let secondHalf = arr.slice(n/2, n);

   
    let sumOdd = 0;
    let sumEven =0;

    let number= "";
    for (let i=0; i<n/2; i++) {
        number = number + firstHalf[i].substr(0,1);
        
    }

    for (let i=0; i<n/2; i++) {
        number = number + secondHalf[i].substr(secondHalf[i].length-1,1);
        
    }

    for (let i=0; i<n; i++) {
        let digit = parseInt(number.substr(i,1),10);
   
        if (i % 2 == 0) {
            sumOdd = sumOdd + digit;
        } else {
            sumEven = sumEven + digit;
        }
    } 

   
    if ((sumOdd - sumEven) % 11 == 0) {
        return 'OUI'
    } else { return "NON"};
    

    

}

#json #javascript

JSON Verify & Format

https://jsonformatter.curiousconcept.com/?

#javascript

Divisibility

// Divisibility
// Sample code to perform I/O:

process.stdin.resume();
process.stdin.setEncoding("utf-8");
var stdin_input = "";

process.stdin.on("data", function (input) {
    stdin_input += input;                               // Reading input from STDIN
});

process.stdin.on("end", function () {
   main(stdin_input);
});

function main(input) {
    var data= input.toString().split("\n");

    process.stdout.write(divisible(data[1], parseInt(data[0])));
           // Writing output to STDOUT
}

// Warning: Printing unwanted or ill-formatted data to output will cause the test cases to fail



// Write your code here
// Sample code to perform I/O:
//Enter your code here

function divisible(input,n) {
   

    const arr = input.split(" ");
    
    let number="";
    for (let i=0; i<n; i++) {
       
        number=number+arr[i].substr(arr[i].length-1,1);

    } 

    
    if (parseInt(number.substr(number.length-1,1))!=0) {
        return "No";
    } else { return "Yes";}
    
 

}

#javascript

Zoos

//Zoos

// Sample code to perform I/O:

process.stdin.resume();
process.stdin.setEncoding("utf-8");
var stdin_input = "";

process.stdin.on("data", function (input) {
    stdin_input += input;                               // Reading input from STDIN
});

process.stdin.on("end", function () {
   main(stdin_input);
});

function main(input) {
    var data= input.toString().split("\n");
    process.stdout.write(check(data[0]));       // Writing output to STDOUT
}

// Warning: Printing unwanted or ill-formatted data to output will cause the test cases to fail



// Write your code here
// Sample code to perform I/O:
//Enter your code here
function check(data) {

    const n=data.length;
    let x = 0;
    let y = 0;

    for (let i=0; i<n; i++) {
        if (data[i]=="z") {
            x++ ;
        } else {
            if (data[i]=="o") {
                y++;
            } 
        }
    }

    if (2 * x == y) {
        return "Yes";
    } else { return "No";}


}

#javascript

algorithm - How to compute minimum number of operation required to make all the elements of sequence equal to each other - Stack Overflow

//Number of steps in Hackerearth
// Sample code to perform I/O:

process.stdin.resume();
process.stdin.setEncoding("utf-8");
var stdin_input = "";

process.stdin.on("data", function (input) {
    stdin_input += input;                               // Reading input from STDIN
});

process.stdin.on("end", function () {
   main(stdin_input);
});

function main(input) {

    var data = input.split('\n');
    var num = parseInt(data[0],10); 

    var aa = data[1].split(' ').map(function(item) { return parseInt(item, 10);});

var bb = data[2].split(' ').map(function(item) { return parseInt(item, 10);});

   process.stdout.write(f(aa,bb));
   //console.log(f(aa,bb));
   
   // Writing output to STDOUT
 
}

// Warning: Printing unwanted or ill-formatted data to output will cause the test cases to fail



// Write your code here
// Sample code to perform I/O:
//Enter your code here

function f(A, B){
  const n = A.length;
  const m = Math.min(...A);
  let result;
  
  for (let t=m; t>=0; t--){
    result = 0;
    
    for (let i=0; i<n; i++){
      if ((A[i] - t) % B[i] == 0){
        result = result + (A[i] - t) / B[i];
        
      } else {
        result = -1;
        break;
      }
    }
    
    if (result > -1)
      return result.toString();
  }
  
  return result.toString();
}

#javascript

javascript - react-router: How to disable a <Link>, if its active? - Stack Overflow

class Foo extends React.Component {
  render() {
    return (
      <Link to='/bar' className='disabled-link'>Bar</Link>
    );
  }
}
AND CSS 
.disabled-link {
  pointer-events: none;
}

#javascript

CHANGE CLASS IN ELEMENT USING FUNCTION

document.addEventListener("DOMContentLoaded", function () {

    let bgSlideShows = document.querySelectorAll('#bgslideshow01 > .slideshow');
    let myIndex = 1;
    
    function slideShow() {
        bgSlideShows.forEach(slide => {
            slide.style.display = 'none';
        });
        bgSlideShows[myIndex - 1].style.display = 'block';
        if (myIndex === bgSlideShows.length) {
            myIndex = 1;
        }
        myIndex++;
        setTimeout(slideShow, 7000);
    }
    slideShow();
   
});

#javascript #react.js #useeffect

reactjs - How to compare oldValues and newValues on React Hooks useEffect? - Stack Overflow

const Component = ({ receiveAmount, sendAmount }) => {
  const prevAmount = useRef({ receiveAmount, sendAmount }).current;
  useEffect(() => {
    if (prevAmount.receiveAmount !== receiveAmount) {
     // process here
    }
    if (prevAmount.sendAmount !== sendAmount) {
     // process here
    }
    return () => { 
      prevAmount.receiveAmount = receiveAmount;
      prevAmount.sendAmount = sendAmount;
    };
  }, [receiveAmount, sendAmount]);
};

#javascript

Control Flow and Iteration

//Iterate through the array and multiply a number by 10 if it is greater than or equal to 5.
const timesTenIfOverFive = [23, 9, 11, 2, 10, 6];
// ADD CODE HERE
for(let i = 0; i < timesTenIfOverFive.length; i++){
  if(timesTenIfOverFive[i] >= 5){
    timesTenIfOverFive[i] *= 10;
  } 
  
}

// Uncomment the line below to check your work!
console.log(timesTenIfOverFive); // -> should print [230, 90, 110, 2, 100, 60]

#javascript

handlebars.js - How to check for empty-string, null or white-spaces in handlebar? - Stack Overflow

Handlebars.registerHelper('check', function(value, comparator) {
    return (value === comparator) ? 'No content' : value;
});

#javascript

Using reduce() to eliminate duplicate keys os an array of objects and get its total values

// considering this array of objects
const orders = [
  {
    id: 101,
    server: "Mindy Kaling",
    subtotal: 473,
    tax: 24,
  },
  {
    id: 102,
    server: "Nina Totenberg",
    subtotal: 1053,
    tax: 52,
  },
  {
    id: 103,
    server: "Serena Williams",
    subtotal: 1497,
    tax: 75,
  },
  {
    id: 104,
    server: "Mindy Kaling",
    subtotal: 251,
    tax: 12,
  },
  {
    id: 105,
    server: "Malala Yousafzai",
    subtotal: 1715,
    tax: 85,
  },
  {
    id: 106,
    server: "Nina Totenberg",
    subtotal: 320,
    tax: 16,
  },
];

// we have to check if there is any duplicate entry on the list
// create an objet to hold all the servers
// use reduce by passing two params: the new object and orders
function renderByServers(orders) {
    const servers = {};

    const result = orders.reduce((servers, order) => {
      const { server, subtotal, tax } = order;

      // first, check if the server is undefined: if yes, set it to 0
      // if(servers[server] === undefined){}
      if (!servers[server]) {
        servers[server] = 0;
      }
      // otherwise, calculate the reduce by adding to the server the sum of subtotal + tax
      servers[server] += subtotal + tax;
      return servers;
    }, {});

    return result;
  }
  // this function returns an object - that is not possible to use .map() once map is for arrays
  // also, an object cannot be passed by as children
  console.log(renderByServers(orders));

  // but is possible to get the keys or values of the object converted in array, and from there, map() if is necessary
  console.log(Object.keys(renderByServers(orders)));
  console.log(Object.values(renderByServers(orders)));

#javascript

Combine two arrays into a combined key-value pairs object

// if using a forEach() to associate each key-value pairs into an array of objects
  function combiningArraysIntoKeyPairValues() {
    var arr1 = 'declare your first array here';
    var arr2 = 'declare your second array here';
    // ps: you must consider that both array has same length?
    
    var combinedObj = {};
    let arr = [];

    arr1.forEach((item, index) => {
       combinedObj = { name: item, amount: arr2[index] };
      arr.push(combinedObj);
    });

    return arr;
  }
  console.log(combiningArraysIntoKeyPairValues());

#javascript

Initial Setup for API

const express = require('express');
const cors = require('cors');
const { MongoClient, ServerApiVersion } = require('mongodb');
const { config } = require('dotenv');
const app = express();
const port = process.env.PORT || 5000;

require('dotenv').config();
// middleware

app.use(cors());
app.use(express.json());

app.get('/', (req, res) => {
    res.send('Volunteer Server is running');

})
app.listen(port, () => {
    console.log('listening port',port);
})

#javascript

Track scroll position

// ADD EVENTLISTENER ON WINDOW
window.addEventListener("scroll", (event) => {
  let scroll = this.scrollY;
  logoDown(scroll); // INITIATE(CALL) THE DESIRED FUNCTION FIRING OFF IMMEDIATELY AFTER WINDOW LOAD
});

function logoDown(scroll) {
  const element = document.querySelector("element-id/class");
  // WITHOUT THE CALLING THE FUNCTION, IT JUST SITS THERE
  if (scroll >= 22) {
    element.style.top = "0rem";
  } else {
    element.style.top = "-0.6rem";
  }
}

#javascript

Track viewport width

// I ACTUALLY DONT FULLY UNDESTAND WHY IT DOESNT WORK WITHOUT THIS FIRST HALF, IT SHOULD THOUGH
let windowWidth = window.innerWidth;
const offer = document.querySelector("#offer");

window.onload = (e) => {
  if (windowWidth >= 1200) {
    offer.src = "UTILITIES/IMGS/offer-banner.jpg";
  } else if (windowWidth < 1200) {
    offer.src = "UTILITIES/IMGS/offer-banner1.jpg";
  }
};

// EXAMPLE FROM SISTERS WEBSITE; CHANGING THE OFFER BANNER ACCORRDING TO VIEWPORT WIDTH
window.onresize = (e) => {
  windowWidth = window.innerWidth;
  console.log(windowWidth);
  if (windowWidth >= 1200) {
    offer.src = "UTILITIES/IMGS/offer-banner.jpg";
  } else if (windowWidth < 1200) {
    offer.src = "UTILITIES/IMGS/offer-banner1.jpg";
  }
}

#html #javascript #ss

Projects: Fundraising Features Toggle

<!-- Remove Fundrasing Features OFF from SS -->
<script type="text/javascript">
    // <![CDATA[
    var collection = document.getElementsByClassName("tpl-main-content-side");
    collection[0].style.display = "none";
    // ]]>
</script>


<!-- Toggle Fundrasing Thermometer ON from SS -->
<!-- Paste this code into the WYSIWYG HTML area for a project -->
<script type="text/javascript">
    // <![CDATA[
    var container = document.getElementsByClassName("tpl-main-content-side");
    var button = document.getElementsByClassName("tpl-start-a-campaign");
    container[0].style.display = "block";
    button[0].style.display = "none";
    // ]]>
</script>

#javascript

jQuery

https://code.jquery.com/jquery-1.7.2.min.js

#javascript

BuildaFriend JS

(function ($) {

    $.fn.flexipage = function (options) {

        // build main options before element iteration
        var opts = $.extend({}, $.fn.flexipage.defaults, options);
        $.fn.flexipage.options = opts;


        //builds pager 
        function buildPager($target, HTML) {
            if (opts.pager_selector == false) {
                $target.after('<div id="scrollable"><ul class="pager">' + HTML + '</ul></div>')
                opts.pager_selector = ".pager"
            } else {
                $(opts.pager_selector, $.fn.flexipage.options.parent_cont).html(HTML)
            }
        }

        // iterate and reformat each matched element

        return this.each(function () {
            if (opts.pager == true) opts.navigation == false;
            if (opts.navigation == true) opts.pager == false;

            var $target = $(this);
            $target.data("opts", opts)

            opts.wrapper = $target.closest('div')
            opts.actual = opts.firstpage;
            opts.total_pages = Math.ceil(($(opts.element, $target).length) / opts.perpage);

            if (opts.pager == true) opts.navigation == false;
            if (opts.navigation == true) opts.pager == false;

            // if pager is set to true
            if (opts.pager == true) {
                (opts.showcounter == true) ? opts.showcounter = '<li><span class="actual"></span>/<span class="total">' + opts.total_pages + '</span></li>' : opts.showcounter = ' ';
                var pagerHTML = '<li class="prev"><a href="#">' + opts.prev_txt + '</a></li>' + opts.showcounter +
                    '<li class="next"><a href="#">' + opts.next_txt + '</a></li>';

                buildPager($target, pagerHTML)

                //click event for next page 
                $(opts.pager_selector + ' li.next a', opts.wrapper).click(function (e) {
                    e.preventDefault();

                    if (opts.actual <= (opts.total_pages - 1)) {
                        $target.selectPage(opts.actual + 1);
                    };
                });

                //click event for prev page 
                $(opts.pager_selector + ' li.prev a', opts.wrapper).click(function (e) {
                    e.preventDefault();

                    if (opts.actual <= (opts.total_pages + 1)) {
                        $target.selectPage(opts.actual - 1);
                    };
                })
            };

            //if navigation is set to true
            if (opts.navigation == true) {
                var navigationHTML = "";
                var actual;

                for (var i = 1; i <= opts.total_pages; i++) {
                    (opts.firstpage == i) ? actual = ' class="active" ' : actual = '';
                    navigationHTML += '<li' + actual + '><a rel="' + i + '" href="#">' + i + '</a></li>';
                };

                buildPager($target, navigationHTML)

                // CLICK EVENTS
                $(opts.pager_selector + ' li a', opts.wrapper).click(function (e) {
                    e.preventDefault();
                    var topage = $(this).attr('rel');
                    if (topage <= opts.total_pages && topage > 0) {
                        $target.selectPage(topage);
                    };
                })
            };

            //if carousel set to true
            if (opts.carousel == true) {
                opts.elements = $(opts.element, $target);
                $target.wrap('<div class="flexiwrap"></div>')
                $target.parent().css({
                    overflow: 'hidden',
                    position: 'relative'
                })
                $target.css({
                    overflow: 'hidden',
                    position: 'absolute',
                    top: '0px',
                    left: '0px'
                })
                opts.distances = [];

                for (var i = 0; i <= opts.total_pages; i++) {
                    opts.distances[i] = (i * opts.perpage) * $($(opts.elements[i]), $target).width();
                };
            };

            //show first page, first time
            $target.selectPage(opts.firstpage);

        });
    };


    //show pages function
    $.fn.selectPage = function (n) {
        var parent = $(this)
        var opts = parent.data('opts')


        if (n == "next") {
            (opts.actual < opts.total_pages) ? n = opts.actual + 1 : n = opts.total_pages;
        }

        if (n == "prev") {
            if (opts.actual > 0) n = opts.actual - 1;
        }

        if (n == 0 || n == undefined) n = 1;

        if (n > 1) var $selected_items = $(opts.element + ':lt(' + (n * opts.perpage) + '):gt(' + (((n - 1) * opts.perpage) - 1) + ')', parent);
        else var $selected_items = $(opts.element + ':lt(' + (n * opts.perpage) + ')', parent);

        if (opts.carousel == true) {
            parent.animate({
                left: '-' + opts.distances[n - 1] + 'px'
            }, opts.speed, opts.animation)
        } else {
            $selected_items.css(opts.visible_css)
            $(opts.element, parent).not($selected_items).css(opts.hidden_css)
        }

        if (opts.navigation == true) {
            $(opts.pager_selector + ' li', opts.wrapper).removeClass('active')
            $(opts.pager_selector + ' li:eq(' + (n - 1) + ')', opts.wrapper).addClass('active')
        };

        if (opts.pager == true) {
            $(opts.pager_selector + ' .actual', opts.wrapper).html(n);
            $(opts.pager_selector + ' .disabled', opts.wrapper).removeClass('disabled');
            if (n == opts.total_pages) $(opts.pager_selector + ' .next', opts.wrapper).addClass('disabled');
            if (n == 1) $(opts.pager_selector + ' .prev', opts.wrapper).addClass('disabled');
        };
        opts.actual = parseInt(n);
    };


    // plugin defaults
    $.fn.flexipage.defaults = {
        element: "li",
        pager: true,
        next_txt: "Next &raquo;",
        prev_txt: "&laquo; Prev",
        pager_selector: false,
        perpage: 5,
        showcounter: true,
        hidden_css: {
            display: 'none'
        },
        visible_css: {
            display: 'block'
        },
        firstpage: 1,
        navigation: false,
        carousel: false,
        speed: 300,
        animation: 'linear'
    };


})(jQuery);

#javascript

javascript - Property '...' has no initializer and is not definitely assigned in the constructor - Stack Overflow

"strictPropertyInitialization": false

#javascript #reactjs

get coordinates reactjs

 	
	const fetchData = async () => {
        navigator.geolocation.getCurrentPosition(function(position) {
            /**
             * update in usestate array 
             */
            setLat(position.coords.latitude);
            setLong(position.coords.longitude);
        });

#javascript

How to get query parameters from a URL in JavaScript | Reactgo

// window.location.search = ?name=sai

const params = new URLSearchParams(window.location.search);

const name = params.get("name");

console.log(name); // "sai"

#javascript #js #array #object #some

Check if array contains a matching object with array.some()

// Supported in IE 9-11
const people = [
  {id: 1, name: 'John'},
  {id: 2, name: 'Adam'},
];

const isFound = people.some(element => {
  if (element.id === 1) {
    return true;
  }

  return false;
});

console.log(isFound); // 👉️ true

if (isFound) {
  // object is contained in array
}

#javascript

Remove all Event Listeners from an Element using JavaScript | bobbyhadz

const box = document.getElementById('box');

// 👇️ add 2 event listeners
box.addEventListener('click', function handleClick() {
  console.log('box clicked first');
});

box.addEventListener('click', function handleClick() {
  console.log('box clicked second');
});

// ✅ Remove event listeners from Element
box.replaceWith(box.cloneNode(true));

#javascript

mac kill port

kill -9 <PID>

#javascript

Mac kill port

sudo lsof -i :3000

#javascript

google apps script - setBackground() or setFontColor not working in GAS - Stack Overflow

/* CODE FOR DEMONSTRATION PURPOSES */
function setFontAndBackgroundColorCell() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  var cell = sheet.getRange('B2');
  cell.setFontColor('yellow');
  cell.setBackground('red');
  cell.setValue('TEST');
}
/* CODE FOR DEMONSTRATION PURPOSES */

#javascript #dates #24h #js

Check if there are 24hrs between two dates in Javscript (js)

const then = new Date('2022-01-24T09:30:20');
const now = new Date();

const msBetweenDates = Math.abs(then.getTime() - now.getTime());

// 👇️ convert ms to hours                  min  sec   ms
const hoursBetweenDates = msBetweenDates / (60 * 60 * 1000);

console.log(hoursBetweenDates);

if (hoursBetweenDates < 24) {
  console.log('date is within 24 hours');
} else {
  console.log('date is NOT within 24 hours');
}

#javascript

reactjs - How to use `setState` callback on react hooks - Stack Overflow

import React, { useEffect, useRef } from 'react';

const [counter, setCounter] = useState(0);
const didMount = useRef(false);

const doSomething = () => {
  setCounter(123);
}

useEffect(() => {
  // Return early, if this is the first render:
  if ( !didMount.current ) {
    return didMount.current = true;
  }
  // Paste code to be executed on subsequent renders:
  console.log('Do something after counter has changed', counter);
}, [counter]);

#javascript

Валидация пароля (6 символов)

Содержиь хотя бы 1 цифру и хотя бы одну заглавную букву

function validate(password) {
  return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,}$/.test(password);
}

#javascript

Convertir variables fechas (TDMobile) en string dd/mm

dsDate2DDMM = function (date) {
    date = date instanceof Date ? date : date.Value;
    let year = date.getFullYear();
    if (year <= 1900) {
        return null;
    }
    let month = date.getMonth() + 1;
    let day = date.getDate();
    return ((day < 10 ? '0' + day : day) + '/' + (month < 10 ? '0' + month : month));
}

#javascript

Convertir variables fechas (TDMobile) en string dd/mm/yyyy

dsDate2String = function (date) {
    date = date instanceof Date ? date : date.Value;
    let year = date.getFullYear();
    if (year <= 1900) {
        return null;
    }
    let month = date.getMonth() + 1;
    let day = date.getDate();
    if (sLang == 'en-US') {
        return ((month < 10 ? '0' + month : month) + '/' + (day < 10 ? '0' + day : day) + '/' + year.toString());
    } else {
        return ((day < 10 ? '0' + day : day) + '/' + (month < 10 ? '0' + month : month) + '/' + year.toString());
    }
}

#javascript #reac

Going backwards in React-router v6

const navigate = useNavigate()
navigate(-1)

#javascript

Recursive reduce to flat array

const arr = [1, [2, [3, 4, [5, [6, 7, 8]]]]];

const flatArr = (arr) =>
  arr.reduce(
    (acc, curr) =>
      Array.isArray(curr) ? [...acc, ...flatArr(curr)] : [...acc, curr],
    []
  );

#html #css #javascript

mini DOM projact

https://codepen.io/amirgnm/pen/WNdLNmb

#javascript

How to Write Your Own Browser Extension [Example Project Included]

{
  "manifest_version":2,
  "version":"1.0",
  "name":"Test",
  "content_scripts":[
   {
    "matches":["<all_urls>"],
    "js":["main.js"]
   }
  ],
  "web_accessible_resources": [
        "pp.jpg"
  ]
}

#javascript

var, let, and const in JavaScript: a cheatsheet.

https://www.valentinog.com/blog/var/?utm_source

#javascript

Rumbaexplosion – 24 Hours of Rumba And Salsa

Shows RecientesGettyImages-1146482973

#javascript

Rumbaexplosion – 24 Hours of Rumba And Salsa

Shows RecientesGettyImages-1146482973

#javascript

Whatsapp Live Chat + Share Buttons without module - Free Modules & Themes - PrestaShop Forums

protected static $networks = ['Facebook', 'Twitter', 'Pinterest'

#javascript

how to uncheck checkbox javascript - Google 검색

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;

#javascript #jsonwebtoken

Get token jsonwebtoken

const getToken = (request) => {
  const authorizationHeader = request.get("authorization");
  if (
    authorizationHeader &&
    authorizationHeader.toLowerCase().startsWith("bearer ")
  ) {
    return authorizationHeader.substring(7);
  }
  return null;
};

#javascript

Добавление стилей функцией

<div class='frame-modal' id='frame-modal'>
      <span class='frame-text'>Sign in with liquid access</span>
      <button class='frame-button'>Connect wallet</button>
</div>

export const frameStyles = {
  'frame-modal': {
    backgroundColor: '#f0f0f0',
    borderRadius: '5px',
    margin: '0 auto',
    padding: '20px',
    width: '70%'
  },
}

export const setStyles = (stylesObject: object) => {
  const range = document.createRange();
  let res = "";
  let arr: string[] = []
  Object.entries(stylesObject).forEach(([key]) => {
    // @ts-ignore
    const obj = JSON.stringify(stylesObject[key], null, "\t")
      .replace(/([A-Z])/g, "-$1").toLowerCase()
      .replace(/"/g, "")
      .replace(/,\n/g, ";")
      .replace(/\}/g, ";}");
    // @ts-ignore
    arr.push(`.${key}${obj}`)
  });

  res = `<style>${arr.join(' ')}</style>`;
  const frag = range.createContextualFragment(res);
  // @ts-ignore
  document.querySelector("head").append(frag);
};

#javascript

Добавление стилей к элементу через функцию

export const frameStyles = {
  'frame-modal': {
    'background-color': '#fff',
    'border-radius': '5px',
    margin: '0 auto',
    padding: '20px',
    width: '70%'
  },
  'frame-button': {
    'background-color': '#ff4343',
    padding: '4px 16px',
    'border-radius': '5px',
    color: '#fff',
    cursor: 'pointer',
    'text-align': 'center',
    border: 'none'
  },
  'frame-button:hover': {
    'background-color': '#de3838'
  },
}



export const setStyles = (stylesObject: object) => {
  const range = document.createRange();
  let res = "";
  let arr: string[] = []
  Object.entries(stylesObject).forEach(([key]) => {
    // @ts-ignore
    const obj = JSON.stringify(stylesObject[key], null, "\t")
      .replace(/"/g, "")
      .replace(/,\n/g, ";")
      .replace(/\}/g, ";}");
    arr.push(`.${key}${obj}`)
  });

  res = `<style>${arr.join(' ')}</style>`;
  const frag = range.createContextualFragment(res);
  // @ts-ignore
  document.querySelector("head").append(frag);
};

#javascript

ThreeDES postman script

   function encryptByDES(message, key){
	    	var keyHex = CryptoJS.enc.Utf8.parse(key);
	    	//var keyHex = CryptoJS.enc.Base64.parse(key);
	    	var encryptd = CryptoJS.TripleDES.encrypt(message, keyHex, {
	    		iv: keyHex,
	    		mode: CryptoJS.mode.ECB
	    	});
	    	return encryptd;
	    }

#javascript

Rumbaexplosion – 24 Hours of Rumba And Salsa

#javascript

Rumbaexplosion – 24 Hours of Rumba And Salsa

#javascript

Rumbaexplosion – 24 Hours of Rumba And Salsa

#javascript

Rumbaexplosion – 24 Hours of Rumba And Salsa

#javascript

Rumbaexplosion – 24 Hours of Rumba And Salsa

<iframe loading="lazy" width="100%" height="355" border="0" style="border: 0;" src="https://fastcast4u.com/player/george2772/" allow="autoplay"></iframe>

#javascript

Columnas en Tailwind

      <div class="block md:flex overflow-hidden w-full">

      <div class=" md:w-1/2  bg-white rounded shadow-lg p-5 m-5">
        Test
      </div>

      <div class="md:w-1/2 bg-white rounded shadow-lg p-5 m-5">
        Test
      </div>

      </div>

#express #javascript #nodejs

express-validator

//import this
const { check, validationResult } = require("express-validator/check");

//validate this
router.post(
  "/",
  [check("name", "Please add name").not().isEmpty(),
  check("email", "Please include a valid email").isEmail(),
  check("password", "Please enter a password with 6 or more characters").isLength({ min: 6 })
],
  (req, res) => {
       const errors = validationResult(req);
           if (!errors.isEmpty()) {
               return res.status(400).json({ errors: errors.array() });
           }
         res.send("passed");
  }
);

#javascript

reactjs - tailwind css responsive grid issue - Stack Overflow

<div class="row-start-1 row-span-1 col-start-1 col-span-12">

#javascript

How to use media queries with styled components

import { device } from './device';

const CardWrapper = styled.div`
  display: flex;
  // Mobile friendly by default
  flex-direction: column;

  border: 1px solid gray;
  box-shadow: 5px 5px #ccc;
  padding: 10px;
  margin: 10px;

  // Switch to rows on large devices
  @media ${device.laptop} {
    flex-direction: row;
  }
`;

#javascript

Your Career in Web Development Starts Here | The Odin Project

https://www.theodinproject.com/

#javascript

node.js - How can I make passportjs google login oauth work with JWT instead of creating session through serialize/deserialize method? - Stack Overflow

const Login = () => {
    const setToken = function(e) {
    if (
      e.origin === origin &&
      e.data &&
      e.data.command === 'token-ready' &&
      e.data.info &&
      e.data.info.token
    ) {
      localStorage.setItem('jwt', e.data.info.token);

      e.source.postMessage(
        {
          command: 'info',
          info: {
            complete: true,
          },
        },
        e.origin
      );
    }
  };

  
  window.addEventListener('message', setToken, false);

  const login = () => {
    window.open(loginUri);
  };

  return (<button onClick={login}>Login</button>
}

#javascript

Decorator with (@) symbol in JS

// decorator lights is a function which receives the class as an argument
let lights = function(tree) {
  // The behaviour of the class is modified here
  tree.treeLights = 'Christmas lights'
}

@lights  // the decorator is applied here
class ChristmasTree {}

console.log(ChristmasTree.treeLights);  // logs Christmas lights

#javascript

Decorators - JavaScript - Snipit

function log(fn) {
  return function(actualValue) {
    const modifiedActualValue = `Logged value: ${actualValue}`;
    fn(modifiedActualValue);
  }
}

const logger = log(console.log);

logger('Pera');
//Logged value: Pera

#javascript #jquery

jQuery Event : Detect changes to the html/text of a div - Stack Overflow

$('mydiv').on('DOMSubtreeModified', function(){
  console.log('changed');
});

#javascript #supertest

Supertest GET request to server

const mongoose = require('mongoose')
const supertest = require('supertest')
const app = require('../app')

const api = supertest(app)

test('notes are returned as json', async () => {
  await api
    .get('/api/notes')
    .expect(200)
    .expect('Content-Type', /application\/json/)
})

afterAll(() => {
  mongoose.connection.close()
})

#javascript #lodash

Group array by value of "author" and saves sum of "likes" as value

const mostLikes = (array) => {
  const authorsAndLikesArray = _(array)
    .groupBy("author")
    .map((objs, key) => ({
      author: key,
      totalLikes: _.sumBy(objs, "likes"),
    }))
    .value();
  const sorted = _.sortBy(authorsAndLikesArray, "totalLikes").reverse();
  return sorted
};

#javascript

How to create tooltip on ag-grid row? - Stack Overflow

{
    field: 'fullAddress',
    headerName: 'Address',
    tooltip: (params) => 'Address: ' + params.value
}

#javascript

Fade in on scroll

//HTML
<div class="container">
      <div class="box box-1"></div>
      <div class="box box-2"></div>
      <div class="box box-3"></div>
      <div class="box box-4"></div>
      <div class="box box-5"></div>
</div>

//CSS
.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: calc(50% - 2rem);
  height: 100px;
  border-radius: 20px;
  margin: 1rem;
  transform: translateY(50px);
  opacity: 0;
  transition: all 0.5s;
}

.box-1 {
  background-color: coral;
}
.box-2 {
  background-color: cornflowerblue;
}
.box-3 {
  background-color: palegoldenrod;
}
.box-4 {
  background-color: violet;
}
.box-5 {
  background-color: palegreen;
}

.inView {
  opacity: 1;
  transform: translateY(0px);
}

//Javascript
const boxes = document.querySelectorAll('.box');

window.addEventListener('scroll', fadeIn);

function fadeIn() {
  boxes.forEach((box) => {
    //get viewport-point where the transition should happen
    let distanceInView =
      box.getBoundingClientRect().top - window.innerHeight + 20;

    if (distanceInView < 0) {
      box.classList.add('inView');
    } else {
      box.classList.remove('inView');
    }
  });
}

//call function if elements are already on screen when pafge loads
fadeIn();

#javascript

javascript - How to sort an array of integers correctly - Stack Overflow

var numArray = [140000, 104, 99];
numArray.sort(function(a, b) {
  return a - b;
});

console.log(numArray);

#javascript

Smooth Scrolling | CSS-Tricks - CSS-Tricks

// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth'
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

#javascript #api

fetch api

fetch('http://example.com/songs')
	.then(response => response.json())
	.then(data => console.log(data))
	.catch(err => console.error(err));

#javascript #jquery

Nested DataTable jquery

$(document).ready(function () {

    var intervaltime = $('#intervaltime').val();
    //LoadData();
    var table = $('#tbl_1').DataTable({
        "ajax": {
            method: 'POST',
            url: '/Home/GetDataPrevious',
            contentType: "application/json; charset=utf-8",
            dataSrc: ''
        },
        "columnDefs": [
            { className: "Title", "targets": [0] }
        ],
        "columns": [
            { "data": "timeZone"}
        ],
        "filter": true,
        "paging": false,
        "info": false,
        "searching": false,
        "ordering": true,

        "createdRow": function (row, data, index) {
            var tr = $(row).closest('tr');
            var thisrow = table.row(tr);
            let list = data.dashboarddetails;
            let html = '<table class="display">';
            html += '<thead>';
            html += '<tr>';
            html += '<th style="background-color: #009879;color: #ffffff;">Branch</th>';
            html += '<th style="background-color: #009879;color: #ffffff;">Total No of Orders</th>';
            html += '<th style="background-color: #009879;color: #ffffff;"># In Kitchen (Ordered)</th>';
            html += '<th style="background-color: #009879;color: #ffffff;"># with Kitchen Delay</th>';
            html += '<th style="background-color: #009879;color: #ffffff;"># Kitchen Ready</th>';
            html += '<th style="background-color: #009879;color: #ffffff;"># with window time</th>';
            html += '<th style="background-color: #009879;color: #ffffff;"># Driver Assigned</th>';
            html += '<th style="background-color: #009879;color: #ffffff;"># Delivered</th>';
            html += '<th style="background-color: #009879;color: #ffffff;">Expected Delivery Time</th>';
            html += '<th style="background-color: #009879;color: #ffffff;"># with Delivery Delay</th>';
            html += '<th style="background-color: #009879;color: #ffffff;">Dispatcher Notifications (Updated from Dispatcher Screen)</th>';

            html += '</tr>';
            html += '</thead>';
            html += '<tbody>';
            for (let i = 0; i < list.length; i++){
                html += '<tr>';
                html += '<td>';
                html += list[i].branch;
                html += '</td>';
                html += '<td>';
                html += list[i].totalOrders;
                html += '</td>';
                html += '<td>';
                html += list[i].ordersInKitchen;
                html += '</td>';
                html += '<td>';
                html += list[i].ordersKitchenDelay;
                html += '</td>';
                html += '<td>';
                html += list[i].ordersKitchenReady;
                html += '</td>';
                html += '<td>';
                html += list[i].ordersWaitingDelay;
                html += '</td>';
                html += '<td>';
                html += list[i].ordersAssigned;
                html += '</td>';
                html += '<td>';
                html += list[i].ordersDelivered;
                html += '</td>';
                html += '<td>';
                html += list[i].expectedDeliveryTime;
                html += '</td>';
                html += '<td>';
                html += list[i].ordersDeliveryDelay;
                html += '</td>';
                html += '<td>';
                html += list[i].memo;
                html += '</td>';
                html += '</tr>';
            }
            html += '</tbody>';
            html += '</table>';

            thisrow.child(html).show();
            tr.addClass('shown');
        }
    });


    var intervalsec = intervaltime * 1000;

    setInterval(function () { table.ajax.reload(); }, intervalsec);
});

#javascript

javascript - `export const` vs. `export default` in ES6 - Stack Overflow

// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";

// use MyClass, MyOtherClass, and MyClass2Alias here

#javascript

cursor mouse

//HTML
 <div class="cursors">
    <div></div>
 </div>

//CSS style the element
/* Style the cursor */
.cursors div {
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  background: url('imgs/home/bub.svg') no-repeat center/ cover;
  border-radius: 50%;
  z-index: 10000;
  /* Prevent from getting in the way when links are clicked */
  pointer-events: none;
  /* Move the ball to the center of the cursor */
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 0.3s;
}

//Javascript

// CURSOR
const cursor = document.querySelector('.cursors');
const circle = cursor.querySelector('div');
const elementsWitoutCursor = document.querySelectorAll('.hide-cursor');

//Animate cursor
let aimX = 0;
let aimY = 0;

let currentX = 0;
let currentY = 0;
let speed = 0.2;
const animate = () => {
  currentX += (aimX - currentX) * speed;
  currentY += (aimY - currentY) * speed;
  circle.style.left = currentX + 'px';
  circle.style.top = currentY + 'px';

  requestAnimationFrame(animate);
};

animate();

document.addEventListener('mousemove', (event) => {
  aimX = event.pageX;
  aimY = event.pageY;
});

//hide the cursor when hovering over elements with a specific class
elementsWitoutCursor.forEach((element) => {
  element.addEventListener('mouseover', () => {
    circle.classList.add('invisible');
  });
  element.addEventListener('mouseout', () => {
    circle.classList.remove('invisible');
  });
});

#javascript #html

Prevent Type 0 at first of input

preventZeroFirst($event)

	preventZeroFirst(e) {
		if (/^0/.test(e.target.value)) {
			e.target.value = e.target.value.replace(/^0/, "")
		}
    },

#javascript

Sidebar UL React

<ul>
                            <li className='group'>
                                <div 
                                className='flex items-center px-5 py-3 text-gray-600 text-lg 
                                                hover:text-blue-700 hover:bg-slate-200 cursor-pointer'
                                onClick={ () => setShowDropdown(showDropdown === "Submenu 1" ? undefined : "Submenu 1") }
                                >
                                    <FiHome
                                        className='h-85 w-5 text-gray-500 mr-2'
                                    />
                                    Inicio
                                </div>

                                { showDropdown === "Submenu 1" &&  (

                                    <div /* className='
                                        opacity-0 h-0 group-hover:opacity-100 group-hover:h-auto 
                                        transition linear duration-500 delay-150' */
                            /*             className= {`opacity-0 h-0 ${ showDropdown ? 
                                        "group-hover:opacity-100 group-hover:h-auto transition linear duration-500 delay-150" 
                                        : "" } ` // AQUI SIRVE BIEN PERO AL SALIR DEL BOTÖN SE OCULTA POR EL HOVER } */

                                    /*  className= {`opacity-0 h-0 ${ showDropdown ? 
                                        "opacity-100 h-auto transition linear duration-500 delay-150" 
                                        : "" } `
                                    }  */
                                        >
                                    
                                        <ul className='bg-white'>
                                            <li className="py-3 px-6 hover:bg-slate-200">Test</li>
                                            <li className="py-3 px-6 hover:bg-slate-200">Test</li>
                                        </ul>

                                    </div>
                                )
                                
                                
                                
                                }
                            </li>
                        </ul>

#javascript

HTML to make fields mandatory

//The below is HTML from the Widget: Vendor Validation
//It was modifed per DMND0063775 Make ACH fields mandatory
//This is the HTML around the field: Financial Institution Name

 <div ng-if="data.terms == 'ach'" class ="row">
           <div class="col-md-6">
              <div class="form-group">
                <label for="cs_email">Financial Institution Name*</label>
                <input ng-model="data.financial_name" id="rNumber" placeholder="" type="text" name="Financial Institution Name" class="form-control" required="required">
                <div class="help-block with-errors"></div>
              </div>
            </div>
            </div>

#html #css #javascript

Preloader of webpage in html

 var preloader = document.getElementById("loading");
    var body = document.querySelector("body");
    var html = document.querySelector("html");
    document.addEventListener("DOMContentLoaded", function () {
      setTimeout(function loader() {
        preloader.style.display = "none";
        body.classList.remove("no-scroll-y");
        body.classList.add("no-scroll-x");
        html.classList.add("no-scroll-x");
      }, 1500);
    });

#javascript

Google Script: "Your input contains more than the maximum of 50000 characters in a single cell" - Stack Overflow

var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");

var data = "some really long string greater than 50k characters";
// write content to a new row created, no 50k error!
sheet.appendRow([data]);

var lastRowRange = sheet.getRange(sheet.getLastRow(), 1);

// copy newly created content to desired range
var outputRange = sheet.getRange("A1");
lastRowRange.copyTo(outputRange);

// clear newly created row
lastRowRange.clearContent();

#javascript

typescript - Union type as key in interface? - Stack Overflow

export type Language = 'EN' | 'DE' | 'IT';

export interface Document {
  generic: string;
  languages: {
    [key in Language]: string[];
  }
}

#javascript

typescript - Union type as key in interface? - Stack Overflow

enum possibleTypes { 'foo', 'bar' };
type Types {
    [key in keyof typeof possibleTypes]: boolean
}

#javascript

javascript - BatchUpdate Google Apps Script is clearing sheet automatically - Stack Overflow

function myFunction(){
  var spreadsheetId = 'some Id'
  var csvFileId = 'some Id'
  var sheet = SpreadsheetApp.openById(spreadsheetId).getSheetByName('Sheet1');
  sheet.clear();
  
  getCSVData(csvFileId, spreadsheetId);
}

function getCSVData(csvFileId, spreadsheetId){
  var data = DriveApp.getFileById(csvFileId)
  .getBlob()
  .getDataAsString();
  var sheetId = SpreadsheetApp.openById(spreadsheetId)
  .getSheets()[0]
  .getSheetId();
    
  var resource = {
    requests: [
      {
        pasteData: {
          data: data,
          coordinate: { sheetId: sheetId,
                       rowIndex: 0,
                       columnIndex: 0 },
          type: 'PASTE_VALUES',
          delimiter: ","
        },
      }
    ],
    includeSpreadsheetInResponse: true,
  };
  Sheets.Spreadsheets.batchUpdate(resource, spreadsheetId);
}

#javascript

google apps script - How to import multiple uniquely named CSV attachments from GMAIL to GOOGLESHEETS - Stack Overflow

function SLSalesImportFromGmail() {
  var ss = SpreadsheetApp.getActive(); // Get the spreadsheet file once

  //gets first(latest) message with set label
  var threads = GmailApp.getUserLabelByName('South Loop').getThreads(0,1);
  if (threads && threads.length > 0) {
    var message = threads[0].getMessages()[0];

    // Get all of the attachments and loop through them.
    var attachments = message.getAttachments(); 
    for (var i = 0; i < attachments.length; i++) {
      var attachment = attachments[i];
      var title = attachment.getName();

      // Is the attachment a CSV file
      attachment.setContentTypeFromExtension();
      var table = Utilities.parseCsv(attachment.getDataAsString());
      if (attachment.getContentType() === "text/csv") {
        // Update the specified sheets
        // Clears the sheet of values & formatting and inserts the new table
        // using the Apps Script built-in CSV parser.
        switch (title) { 
          case "Sales.csv":
            ss.getSheetByName("South Loop Sales").getRange("A:M").clear();
            ss.getSheetByName("South Loop Sales").getRange(1, 1, table.length, table[0].length).setValues(table);
            break;
          case "Labor.csv":
            ss.getSheetByName("South Loop Labor").getRange("A:M").clear();
            ss.getSheetByName("South Loop Labor").getRange(1, 1, table.length, table[0].length).setValues(table);
            break;
          case "ServerPerformance.csv":
            ss.getSheetByName("South Loop Servers").getRange("A:M").clear();
            ss.getSheetByName("South Loop Servers").getRange(1, 1, table.length, table[0].length).setValues(table);            
            break;
        }
      }      
    }
    if (message.getSubject().indexOf('END OF DAY') !== -1) {
      SLlogTodaysSales();
      SLlogTodaysServers();
    }
    if (message.getSubject().indexOf('END OF WEEK') !== -1) {
      SLlogTodaysSales();
      SLlogTodaysServers();
      SLlogWeeksLabor();
    }
    // Marks the Gmail message as read, unstars it and deletes it using Gmail API (Filter sets a star)
  message.markRead();
  message.unstar();
  Gmail.Users.Messages.remove("me", message.getId()); // Added
  }
}

#javascript

javascript - SuiteScript - removeLine not removing last line - Stack Overflow

**
 * @NApiVersion 2.x
 * @NScriptType ClientScript
 * @NModuleScope SameAccount
 * 
 */
define(['N/record'],function(record){
  function pageInit(context){
    var objRec=context.currentRecord;
    var itemsLength=objRec.getLineCount({
      sublistId:'item'
    });
    log.debug('itemsLength',itemsLength);
    for(var i=itemsLength-1;i>=0;i--){
      log.debug('running line ',i+' of '+itemsLength);
      /*
      var loss=objRec.getSublistValue({
        sublistId:'item',
        fieldId:'custcol_linelossreason',
        line: i
      });
      */
      //if(loss){
      objRec.removeLine({
        sublistId:'item',
        line:i,
        ignoreRecalc:true
      });
      log.debug('removed','Line '+i+' has been removed.');
     /*
      }else{
        log.debug('no removal','Line '+i+' will remain.');
      }
      */
    }
  }

  return{
    pageInit:pageInit
  }
});

#javascript

Get Uniqe (specific prop) by array of objects

    getDrawingCategoryTypes() {
      const vue = this;
      const buldingFiles = [];
      this?.request?.details?.buildings?.forEach((building, index) => {
        const types = new Set();
        building.buildingFiles?.forEach(category => types.add(category?.typeID));
        const data = Array.from(types).map(typeId => {
          const filterdData = building.buildingFiles?.filter(i => i?.typeID === typeId);
          return {
            typeId: typeId,
            typeName: filterdData[0]?.typeName,
            obj:filterdData[0],
          };
        });
        buldingFiles.push({ data: data, index: index });
      });
      console.log('bFiles',buldingFiles);
      return buldingFiles;
    },

#javascript

Example of a transformation script for declaring a moment module import:

const parser = 'babel'

function transformer (file, api) {
   const j = api.jscodeshift;
   const root = j(file.source);

   // find declaration for "moment" import
   return root.find(j.ImportDeclaration, { source: { value: 'moment'}}).forEach(path => {
	   path.value.source.value = 'dayjs'
   }).toSource();
}

module.exports = transformer
module.exports.parser = parser

#javascript

simple.output.js

import React from 'react'
import dayjs from 'moment'

const page = () => {
   return <div className={'subtitle'}>{dayjs(publishedAt).format(t('dateFormat'))}</div>;
}

#javascript

testCases.js

jest.autoMockOff();
const defineTest = require('jscodeshift/dist/testUtils').defineTest;

defineTest(__dirname, 'transform', null, 'simple');

#javascript

Jscodeshift installation step-by step

const parser = 'babel'

function transformer (file, api) {
	const j = api.jscodeshift;
	const root = j(file.source);

	return root.find(j.Identifier)
		.forEach(path => {
			// find declaration for "moment" identifier
			if (path.node.name === 'moment') {
				j(path).replaceWith(
					j.identifier('dayjs')
				);
			}
		})
		.toSource();
}

module.exports = transformer
module.exports.parser = parser

#javascript

How to Count Objects in an Array

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

const count = storage.filter(function(item){
  if (item.status === 0) {
    return true;
  } else {
    return false;
  }
}).length; // 6

#javascript

SuiteScript Example – Read File Line by Line – Stoic Software

define(["N/file"], function (f) {

    /**
     * Custom module for executing N/file cookbook examples
     *
     * @NApiVersion 2.0
     * @NModuleScope SameAccount
     */
    var exports = {};

    function readFile(response) {
        var weatherFile = f.load({id: "SuiteScripts/weather.csv"});

        var weatherData = [];
        weatherFile.lines.iterator().each(function (line) {
            var w = line.value.split(",");
            weatherData.push({date: w[0], low: w[1], high: w[2]});
            return true;
        });

        response.write({output: JSON.stringify(weatherData)});
    }

    exports.readFile = readFile;
    return exports;
});

#javascript

Dynamically set or update property in object

const db = {}

const updateDB = (item) => {
    if (item in db) {
        db[item] = db[item] + 1;
    }
    else {
        db[item] = 1;
    }
    console.log(db);
}

#javascript

fetch js - Поиск в Google

fetch('/payment', {
    method: 'POST', 
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'url': '/payment',
        "X-CSRF-Token": document.querySelector('input[name=_token]').value
    },
})

#javascript

first

log()

#javascript

Truncate Text In JS

const truncate = (input) => `${input.substring(0, 25)}...`;

#javascript

scenario targets line and bar chart

import React from "react";
import { Bar } from "react-chartjs-2";
import { useParams } from "react-router-dom";
import useFetch from "../../hooks/useFetch";
import Spinner from "../../shared/Spinner";
import { optionsReportsComparison } from "../shared/options";
import ChartDataLabels from "chartjs-plugin-datalabels";

const data = {
  datasets: [
    {
      type: "line",
      label: "Dataset 1",
      borderColor: "rgb(255, 99, 132)",
      data: {
        2021: 3,
        2022: 2,
      },
      stack: "Scenario - Test analytics - Februaryy",
    },
    {
      type: "bar",
      label: "Dataset 2",
      backgroundColor: "rgb(75, 192, 192)",
      data: {
        2021: 1.25,
        2022: 1.25,
      },
      stack: "Scenario - Test analytics - February",
    },
  ],
};

const ScenarioTargets = () => {
  const { reportPk } = useParams();
  // const { data } = useFetch(`/api/analytics/get-scenario-target-chart/${reportPk}/?model-name=scope_fk&group-by=report`);

  if (!data) {
    return <Spinner />;
  } else {
    const tweakData = () =>
      data.datasets.map((d) => {
        d.barPercentage = 0.4;
        d.categoryPercentage = 0.5;
        d.borderRadius = 10;
        if (d.label === "Scope 3") {
          d.padding = { top: 20 };
          d.datalabels = {
            labels: {
              report: {
                backgroundColor: "white",
                borderRadius: 4,
                borderWidth: 1,
                borderColor: "#4a5568",
                padding: {
                  top: 2,
                  bottom: 2,
                  left: 4,
                  right: 4,
                },
                offset: 4,
                align: "end",
                anchor: "end",
                color: "#4a5568",
                font: { size: 10 },
                formatter: function (value, ctx) {
                  return ctx.dataset.info;
                },
              },
            },
          };
        }
      });
    tweakData();
    // const tweakData = () =>
    //   data.datasets.map((d) => {
    //     d.barThickness = 30;
    //     d.borderRadius = 10;
    //     delete d.stack;
    //   });
    // tweakData();

    return (
      <div className="p-10 bg-white shadow-lg rounded-box">
        <h3 className="text-xl uppercase font-bold mb-4 text-gray-700">Scenarios targets</h3>
        <p className="text-gray-500 mb-20">Evolution of carbon emissions over time to track improvement in your strategy.</p>
        <div className="flex items-center justify-center">
          <Bar options={optionsReportsComparison} data={data} plugins={[ChartDataLabels]} />
        </div>
      </div>
    );
  }
};

export default ScenarioTargets;

#javascript

reactjs - Changing font family of all MUI components - Stack Overflow

import { ThemeProvider, createTheme } from '@mui/styles'; ❌

import { ThemeProvider, createTheme } from '@mui/material/styles'; ✅

const theme = createTheme({
  typography: {
    allVariants: {
      fontFamily: 'serif',
      textTransform: 'none',
      fontSize: 16,
    },
  },
});

function App() {
  return (
      <ThemeProvider theme={theme}>
        ...
      </ThemeProvider>
  );
}

#javascript

call(), apply(), bind(), new(),

/*
- Implicit Binding
- Explicit Binding
- new Bindidng
- window Binding
*/
//----------------------------------------------
// where is this function invoked?
//----------------------------------------------
// var sayName = function(name) {
//   console.log('Hello, ' + name);
// };

// sayName('Vishnu!');
//----------------------------------------------
// Implicit Binding
// var me = {
//     name: 'Vishnu',
//     age: 25,
//     sayName: function() {
//         console.log(this.name);
//     }
// }

// me.sayName();   // According to implicit binding, `this` keyword is targetting the element left i.e. on the left side of the dot(.), in this case `me`
//----------------------------------------------

// var sayNameMixin = function(obj) {
//     obj.sayName = function() {
//         console.log(this.name);
//     }
// };
// var me = {
//     name: 'Vishnu',
//     age: 25
// };

// var you = {
//     name: 'unknown',
//     age: 21
// };

// sayNameMixin(me);
// sayNameMixin(you);

// me.sayName();
// you.sayName();

//----------------------------------------------

// var Person = function(name, age) {
//     return {
//         name: name,
//         age: age,
//         sayName: function() {
//             console.log(this.name);
//         },
//         mother: {
//             name: 'Mausi',
//             sayName: function() {
//                 console.log(this.name);
//             }
//         }
//     };
// };

// var jim = Person('Jim', 42);
// jim.sayName();
// jim.mother.sayName();

//----------------------------------------------
//----------------------------------------------

// Explicit Binding
// call, apply, bind

// var rand = {
//     name: 'rand',
//     age: 65,
//     // sayName: function() {
//     //     console.log('My name is ' + this.name);
//     // }
// };

// var sayName = function() {
//     console.log('My name is ' + this.name);
// };

// sayName.call(rand);

//----------------------------------------------



// var rand = {
//     name: 'rand',
//     age: 65,
//     // sayName: function() {
//     //     console.log('My name is ' + this.name);
//     // }
// };

// var sayName = function(lang1, lang2, lang3) {
//     console.log('My name is ' + this.name + ' and I know ' + lang1 + ', ' + lang2 + ', ' + lang3);
// };

// var languages = ['JS', 'C++', 'Python'];
// sayName.call(rand, languages[0], languages[1],languages[2]);

// // .apply is a similar thing as .call

// sayName.apply(rand, languages);     // .apply()


//----------------------------------------------


// var rand = {
//     name: 'rand',
//     age: 65,
//     // sayName: function() {
//     //     console.log('My name is ' + this.name);
//     // }
// };

// var sayName = function(lang1, lang2, lang3) {
//     console.log('My name is ' + this.name + ' and I know ' + lang1 + ', ' + lang2 + ', ' + lang3);
// };

// var languages = ['JS', 'C++', 'Python'];
// // sayName.call(rand, languages[0], languages[1],languages[2]);

// // .apply is a similar thing as .call

// // sayName.apply(rand, languages);     // .apply()



// var newFn = sayName.bind(rand, languages[0], languages[1],languages[2]);

// console.log('HERE');
// newFn();


//----------------------------------------------
//----------------------------------------------
//----------------------------------------------
//----------------------------------------------
//----------------------------------------------

// new Binding

// var Animal = function(color, name, type) {
//     this.color = color;
//     this.name = name;
//     this.type = type;
// }

// var Zebra = new Animal('black and white', 'Zorro', 'Zebra');

// console.log(Zebra);

//----------------------------------------------


// window Binding

var sayAge = function() {
    console.log(this.age);
};

var me = {
    age: 25
};

// sayAge.call(me);

sayAge();

window.age = 35;

sayAge();

#javascript

Here are the most popular ways to make an HTTP request in JavaScript

import axios from 'axios'

#javascript

javascript - Trying to use fetch and pass in mode: no-cors - Stack Overflow

fetch('http://catfacts-api.appspot.com/api/facts?number=99', { mode: 'no-cors'})
  .then(blob => blob.json())
  .then(data => {
    console.table(data);
    return data;
  })
  .catch(e => {
    console.log(e);
    return e;
  });

#javascript #date

Get One Month Ago Date

const today = new Date()
const oneMonthAgo = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate())

#javascript

HH Create Demand when Idea is accepted

//run before update
//condition  = current.state == 2 && current.demand.nil() && previous.state != 2

// gs.hasRole('demand_manager')  && current.state == 2 && current.demand.nil() && previous.state != 2
var demandTable = "dmn_demand";
if(GlidePluginManager.isActive('com.snc.project_management_v3')){
	demandTable = SNC.PPMConfig.getDemandTable(current.getTableName());
}

var demand = new GlideRecord(demandTable);
demand.initialize();
var fields = ['business_case', 'short_description', 'submitter', 'sys_domain', 'business_unit', 'department', 'impacted_business_units', 'business_capabilities', 'business_applications'];
for(var i in fields){
	var field = fields[i];
	if(demand.isValidField(field)){
		demand.setValue(field, current.getValue(field));
	}
}
//carry over and_or set feilds from idea to demand
demand.setValue("category","strategic");
demand.setValue('u_domain',current.module);
demand.setValue("type", "enhancement");
demand.setValue("parent", current.sys_id);
demand.setValue("idea", current.sys_id);
demand.setValue('u_sub_domain',getSubDomain(current.sys_id));
demand.setValue('assignment_group', current.u_it_assignment_group);
demand.setValue('priority',current.priority);
demand.setValue('u_growth',current.u_growth2);
demand.setValue('u_quality_safety',current.u_quality_and_safety2);
demand.setValue('u_financial',current.u_financial2);
demand.setValue('u_ppl',current.u_people2);
demand.setValue('u_it_wrk_effort',current.u_analyst_work_effort);
demand.setValue('u_complexity',current.u_complexity_of_coordination);
demand.setValue('u_training',current.u_training_needs);
demand.setValue('u_cust_wrk_effort',current.u_r_d_focus);
demand.setValue('u_prj_advanatages',current.u_epic_advantages);
demand.setValue('u_targeted_date',current.u_target_date);
demand.setValue('u_add_justification',current.u_additional_justification);
demand.setValue('u_est_loe',current.u_est_loe);//NG added 1.20.22 NOAH separation requirements

//since impacted portfolio is a list field you need to convert the values to strings in order to carry them over to the new record
var impactedPort = current.u_impacted_portfolio.toString();
if(impactedPort != ''){
demand.setValue('u_impacted_portfolios',impactedPort);	
}


demand.work_notes = current.work_notes.getJournalEntry(-1);
demand.work_notes = current.comments.getJournalEntry(-1);

var desc = current.idea_description; 
var regX = /<\/?[^>]+(>|$)/g;
var regxFormatted = desc.replace(regX, " "); //format desc with above regex
var spaceFormatted = regxFormatted.replaceAll('&nbsp;', " "); //replace all nbsp html characters with a space
finalDesc = spaceFormatted.replaceAll('&ndash;', "-"); // replace all ndash encoded html w/ ascii dash
demand.setValue("description", finalDesc);

if(GlidePluginManager.isActive('com.snc.apm')){
	demand.setValue("size", current.effort);
	if(current.pm_program)
		demand.setValue("primary_program", current.pm_program);
	if(current.start_by_fiscal_year)
		demand.setValue("start_date", new GlideDateTime(current.start_by_fiscal_year.fiscal_start_date_time).date);
	if(current.implement_by_fiscal_year)
		demand.setValue("requested_by", new GlideDateTime(current.implement_by_fiscal_year.fiscal_end_date_time).date);
	
	var demandPrice = parseFloat(current.estimated_benefit.getReferenceValue());
	demand.setValue("financial_benefit",  current.estimated_benefit.getReferenceCurrencyCode() + ';' + demandPrice);
}

var dmnId = demand.insert();
demand.get(dmnId);
current.demand = dmnId;
current.stage = 'demand';
GlideSysAttachment.copy('idea', current.sys_id, 'dmn_demand', demand.sys_id); // second paramenter is the current record and new record you created
var link = ' <a href ="/' + demandTable + '.do?sysparm_query=number%3D' + demand.getValue('number') + '">'+ demand.getValue('number') +'</a>';
var message = gs.getMessage("Demand {0} has been created");
	message = message.replace("{0}", link);
		
		gs.addInfoMessage(message);


function getSubDomain(id){
var gr = new GlideRecord('im_m2m_idea_category');
	gr.addQuery('idea',id);
	gr.query();
	if(gr.next()){
		return gr.category_id;
	}
	
}

#javascript

Group Data by using reduce()

//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

export const groupData = (data: any[], property: string) => {
  return data.reduce(function (acc, obj) {
    let key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
};

// returns an object

#javascript

Which type do I return with AWS lambda responses in typescript to suite AWS APIGateway Method Response? - Stack Overflow

import { APIGatewayProxyEvent, Context, APIGatewayProxyResult } from "aws-lambda"

export async function hello (event: APIGatewayProxyEvent, context: Context): Promise<APIGatewayProxyResult> {
  return {
    statusCode: 200,
    body: JSON.stringify({
      message: 'Hello world',
      input: event,
    })
  }
}

#javascript

JavaScript object basics -simplified pair of person objects:

function Person(name) {
  this.name = name;
  this.introduceSelf = function() {
    console.log(`Hi! I'm ${this.name}.`);
  }
}


const salva = new Person('Salva');
salva.name;
salva.introduceSelf();

const frankie = new Person('Frankie');
frankie.name;
frankie.introduceSelf();

#html #javascript

Custom jQuery Events — Window Broadcast Event

$(window).trigger('broadcast.greatAddon', { maxVolume: 11 });
$(window).on('broadcast.greatAddon', function(msg) {
  console.log(msg.maxVolume);
});

#html #javascript

Avoid flash of invisible text ::Check-in # Your script should now look like this:

<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');

Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
  document.documentElement.className += " fonts-loaded";
});
</script>

#javascript

A Bunch of Options for Looping Over querySelectorAll NodeLists | CSS-Tricks - CSS-Tricks

for .. of
Browser support for for .. of loops looks pretty good and this seems like a super clean syntax to me:

for (const button of buttons) {
  button.addEventListener('click', () => {
    console.log("for .. of worked");
  });
}
 Save
Make an array right away
const buttons = Array.prototype.slice.apply(
  document.querySelectorAll(".js-do-thing")
);
 Save
Now you can use all the normal array functions.

buttons.forEach((button) => {
  console.log("apply worked");
});

#javascript

for .. of

for (const button of buttons) {
  button.addEventListener('click', () => {
    console.log("for .. of worked");
  });
}

#javascript

Track Window Resizes through Google Analytics | CSS-Tricks - CSS-Tricks

(function() {
  var resizeTimer;
  
  // Assuming we have jQuery present
  $( window ).on( "resize", function() {
    
    // Use resizeTimer to throttle the resize handler
    clearTimeout( resizeTimer );
    resizeTimer = setTimeout(function() {

     /* Send the event to Google Analytics
      *
      * https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiEventTracking
      * _trackEvent(category, action, opt_label, opt_value, opt_noninteraction)   
      */
      var $window = $( window );
      _gaq.push( [ "_trackEvent", "User Actions", "Browser Resize", $window.width() + " x " + $window.height() ] );
    }, 1000);
  });
})();

#javascript

filamentgroup/loadCSS: Load CSS asynchronously

loadCSS( 
  "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css",
  null,
  null,
  {
    "crossorigin": "anonymous",
    "integrity": "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
  }
);

#javascript

JS - Grab HTML elements function

// Grab elements
//declare function expression, arrow function
//this method helps grab elements very easily
const selectElement = selector => {
    const element = document.querySelector(selector)
    if(element) return element;
    throw new Error('Something went wrong, make sure that ${selector} exists or is typed correctly.');
};

//testing the function
//console.log(selectElement('.footer'));

#javascript

Axios POST

const dataToPost={ name:'Jenn', age: 40}

axios.post("url", dataToPost)
  .then((response) => {
  	console.log(response);
  	// do something with the response
    })
  .catch((error) => {
  	if (error.response) {
    	console.log(error.response);
        console.log("server responded");
    } else if (error.request) {
        console.log("network error");
    } else {
        console.log(error);
    }
});

#javascript

Fetching data - Fetch x Axios

// With Fetch
fetch(url)
 .then((response) => response.json())
 .then((data) => console.log(data))
 .catch((error) => console.log(error));

// With Axios
axios.get(url)
 .then((response) => console.log(response))
 .catch((error) => console.log(error));

#javascript

Shows images one after another

//HTML
 <img name="slide" />
    

//Javascript
let i = 0; // Start Point
let images = []; // Images Array
let time = 3000; // Time Between Switch

// Change Image
function changeImg() {
  // Image List
  images[i] = `img-${i}.jpg`;
  images.length = 4;

  document.slide.src = images[i];
  // Check If Index Is Under Max
  if (i < images.length - 1) {
    // Add 1 to Index
    i++;
  } else {
    // Reset Back To O
    i = 0;
  }

  // Run function every x seconds
  setTimeout('changeImg()', time);
}

// Run function when page loads
window.onload = changeImg;

#javascript

Toggle Password Visibility

//HTML
<div class="form__block">
     <label for="customer-password">Password</label>
     <div class="form__input">
        <input type="password"
               name="customer-password"
               id="customer-password"
               min="6"/>
      </div>
      <div class="customer-password-icon">
         <i aria-label="click to show password" class="fa-solid fa-eye"></i>
         <i aria-label="click to hide password" class="fa-solid fa-eye-slash"></i>
 	  </div>
</div>



//Show hide Password
const togglePassword = () => {
  const passwordInput = document.getElementById('customer-password');
  const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
  passwordInput.setAttribute('type', type);

  if (type === 'text') {
    eyeIcon.style.display = 'block';
    eyeHideIcon.style.display = 'none';
  } else {
    eyeIcon.style.display = 'none';
    eyeHideIcon.style.display = 'block';
  }
};

#javascript #jquery

Copy text from input to clipboard

$( document ).on( 'click', '.copy_registry_link', function(e) {
    e.preventDefault();
    this.select();
    this.setSelectionRange(0, 99999); /* For mobile devices */

    /* Copy the text inside the text field */
    navigator.clipboard.writeText(this.value);
    alert("Gift Registry link copied.");
} );

#javascript

CMDB Clean-up of duplicate CIs

//This script generates a list for de-duplication task (for CMDB_CI maintenance)
//Note, the code below will only look at those CIs where Class = Switchport
//and NOT include State = Retired (Retired CIs are by-passed.) 

gs.log(getDuplicates('dscy_switchport', 'name'));  // look for CIs with class = Switchport)

function getDuplicates(tablename, val) {
    var dupRecords = [];
    var rtnNameArry = [];
    var count = 0;

    var gaDupCheck = new GlideAggregate(tablename);
    gaDupCheck.addEncodedQuery('sys_class_name=dscy_switchport^install_status!=7^ORinstall_status=NULL'); //Class is Switchport and not Retired
    gaDupCheck.addAggregate('COUNT', val);
    gaDupCheck.addNotNullQuery(val);
    gaDupCheck.groupBy(val);
    gaDupCheck.addHaving('COUNT', '>', 1);
    gaDupCheck.query();
    while (gaDupCheck.next()) {
        var rtnName = gaDupCheck[val].toString();
        rtnNameArry.push(rtnName);
    }

    for (var i = 0; i < rtnNameArry.length; i++) {

        var gr = new GlideRecord("dscy_switchport");
        gr.addQuery('name', rtnNameArry[i]);

        gr.query();
        while (gr.next()) {
            count++;
            dupRecords.push("" + gr.sys_id);
            gs.log(gr.name + " - " + gr.sys_class_name.getDisplayValue() + " - " + gr.sys_id);
        }
        gs.log(dupRecords.toString());

        var taskSysId = new CMDBDuplicateTaskUtils().createDuplicateTask(dupRecords.toString());
        gs.log(taskSysId);

//*** Un-comment the block below, to create task records for De-duplication		
/*========================================================================
        var remTsk = new GlideRecord("reconcile_duplicate_task");
        remTsk.addEncodedQuery("sys_created_onONToday@javascript:gs.beginningOfToday()@javascript:gs.endOfToday()");
        remTsk.addQuery('sys_id', taskSysId);
        remTsk.query();
        if (remTsk.next()) {
            remTsk.assignment_group = "ddf02f53dbb83b806a4d591e5e96190e";
            remTsk.update();
            gs.log("De-Duplication Task: " + remTsk.number + " is now assigned to the Telus CMDB Team. ");
       }
===========================================================================*/
        dupRecords.length = 0;
    }

    gs.log("Number of duplicate CIs found: " + rtnNameArry.length);
    gs.log("Total number of Affected CIs found: " + count);
    return rtnNameArry;
}

#javascript

filter somthing by some value without repeat

    getMasterName(index) { 
      const types = new Set()
			this.request.details.buildings[index].details.usages?.forEach((usage) => types.add(usage?.masterUsageId))
      const data = Array.from(types).map((masterUsageId) => {
        debugger
				const filterdData = this?.masterUsages.filter((i) => i?.id == masterUsageId)
				return {
					masterUsageId: masterUsageId,
					name: filterdData[0]?.name,
					// items: filterdData,
				}
			})
			return data

    },

#javascript

Reset merge

git reset --merge

#javascript

Calculate Date(Year) difference using System Date-year

var CalAge = Class.create();
CalAge.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {
	generateAge: function() {
		var dob = this.getParameter('sysparam_id');
		var today = new GlideDateTime();
		var todayYear = today.getYearLocalTime();
		var bday = new GlideDateTime(dob.toString());
		var bdayYear = bday.getYearLocalTime();
		var age =todayYear - bdayYear;
		return age;
	},
	type: 'CalAge'
});

/** To run tyhe above code type the following code in Background script and run
var dob1 = new CalAge.generateAge('23-07-2017');
gs.print(dob1);
**/

#javascript

Gradle error on Android Studio startup - Stack Overflow

buildscript {
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:0.5.+'
    }
}
apply plugin: 'android'

dependencies {
    compile files('libs/commons-io-2.4.jar')
    compile project(':libraries:actionbarsherlock')
}

android {
    compileSdkVersion 17
    buildToolsVersion "17.0.0"

    defaultConfig {
        minSdkVersion 8
        targetSdkVersion 16
    }
}

#javascript

javascript - How to implement codepen jquery script in wordpress? - Stack Overflow

jQuery(document).ready(function( $ ) {

    // Your code goes here

});

#javascript

javascript - How to implement codepen jquery script in wordpress? - Stack Overflow

(function($) {

    // Your code goes here

})( jQuery );

#javascript

Create a hidden field in JavaScript - Stack Overflow

var input = document.createElement("input");

input.setAttribute("type", "hidden");

input.setAttribute("name", "name_you_want");

input.setAttribute("value", "value_you_want");

//append to form element that you want .
document.getElementById("chells").appendChild(input);

#javascript

Обрезает строку посередине

const stringTrim = (string, maxLength) => {
  if (!string) return string;
  if (maxLength < 1) return string;
  if (string.length <= maxLength) return string;
  if (maxLength === 1) return string.substring(0,1) + '...';

  const midpoint = Math.ceil(string.length / 2);
  const toRemove = string.length - maxLength;
  const leftStrip = Math.ceil(toRemove/2);
  const rightStrip = toRemove - leftStrip;
  return `${string.substring(0, midpoint - leftStrip)}...${string.substring(midpoint + rightStrip)}`
}

#javascript #wordpress

javascript - How to enqueue scripts in WordPress from CDN? - Stack Overflow

wp_register_script( 'jQuery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js', null, null, true );
wp_enqueue_script('jQuery');

#javascript #wordpress

javascript - How to enqueue CSS in WordPress from CDN? - Stack Overflow

wp_register_style( 'Font_Awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
wp_enqueue_style('Font_Awesome');

#javascript

Objects and Object Constructors | The Odin Project

const myObject = {
  property: 'Value!',
  otherProperty: 77,
  "obnoxious property": function() {
    // do stuff!
 }
}

#javascript #shoelace #css #front #human/data/nlp #nlp #nltk #graycloud

Drawer

<sl-drawer label="Drawer" class="drawer-scrolling">
  <div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
    <p>Scroll down and give it a try! 👇</p>
  </div>
  <sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>

<sl-button>Open Drawer</sl-button>

<script>
  const drawer = document.querySelector('.drawer-scrolling');
  const openButton = drawer.nextElementSibling;
  const closeButton = drawer.querySelector('sl-button[variant="primary"]');

  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());
</script>

#javascript

Centre a Div

.center-container{
position: absolute;
left: 50%;
top: 50%;
transform: translate (-50%, -50%);
}



center-container {
display: grid;
place-items: center;
}


.center-container {
display: flex;
justify-content: center;
align-items: center;
 
}

#javascript

node-red-contrib-alexa-local (node) - Node-RED

$ npm install node-red-contrib-alexa-local

#javascript

function - Make alias to document.getElementById in Javascript - Stack Overflow

const $ = id=> document.getElementById(id);

#javascript

jquery - in bootstrap table how to hide/exclude a column on export - Stack Overflow

$('table').bootstrapTable({     
  exportOptions: {
    columns: [0,1]
  }
})

#javascript

Print Hello to the console

console.log('Hello')

#javascript

String to SnackeCase Javascript

const toSnakeCase = str =>
  str &&
  str
    .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
    .map(x => x.toLowerCase())
    .join('_');

console.log(toSnakeCase('camelCase'));
console.log(toSnakeCase('some text'));
console.log(toSnakeCase('some-mixed_string With spaces_underscores-and-hyphens'));
console.log(toSnakeCase('AllThe-small Things'));
console.log(toSnakeCase('IAmListeningToFMWhileLoadingDifferentURLOnMyBrowserAndAlsoEditingSomeXMLAndHTML'));

#javascript

Type of Operator Example

var x = 12345; 
console.log(typeof x) // number
x = 'string'; 
console.log(typeof x) // string
x = { key: 'value' };
console.log(typeof x) // object

#javascript

Scroll Event Throttling

// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/

let lastKnownScrollPosition = 0;
let ticking = false;

function doSomething(scrollPos) {
  // Do something with the scroll position
}

document.addEventListener('scroll', function(e) {
  lastKnownScrollPosition = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(lastKnownScrollPosition);
      ticking = false;
    });

    ticking = true;
  }
});

#javascript

Given any element selector return computed css styles

var element = document.getElementById('image_1'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');
    console.log(top);

#javascript

Positive to Negative and Vice Versa

// Given any integer return the absolute value.
Math.abs(num) => Always positive

// Given any number return the inverse of its absolute value.
-Math.abs(num) => Always negative

#javascript #api #hashnode #vanilla

Fetch Blog Articles from HashNode From a Specific User

/* 
HTML
<h1>
 Recent Ramblings
</h1>
<div id="articles">
</div>
*/

const fetchArticles = async (query, variables = {}) => {
  const data = await fetch("https://api.hashnode.com/", {
    method: "POST",
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query,
      variables
    })
  });
  return data.json();
}

const articleQuery = `
query GetUserArticles($page: Int!) {
        user(username: "sarahcodes") {
            publication {
                posts(page: $page) {
                    title
                    brief
                    coverImage
                    slug
                }
            }
        }
    }
`;

fetchArticles(articleQuery, {
    page: 0
  })
  .then(result => {
    console.log(result.data.user)
    const articles = result.data.user.publication.posts;
    let container = document.createElement('div');
    container.classList.add("row");
    articles.forEach(article => {

      let link = document.createElement('a');
      link.href = `https://sarahdepalo.hashnode.dev/${article.slug}`;
      
      let articleContainer = document.createElement('div');
      articleContainer.classList.add("col")

      let title = document.createElement('h2');
      title.innerText = article.title;

      let image = document.createElement('img');
      image.src = article.coverImage;

      let brief = document.createElement('p');
      brief.innerText = article.brief;
			
      container.appendChild(link);
      link.appendChild(articleContainer);
      articleContainer.appendChild(title);
      articleContainer.appendChild(image);
      articleContainer.appendChild(brief);
    })
    document.querySelector('#articles').appendChild(container);
  })

#javascript

Auth0 Node (Express) API SDK Quickstarts: Authorization

// server.js

const express = require('express');
const app = express();
const { auth } = require('express-oauth2-jwt-bearer');

// Authorization middleware. When used, the Access Token must
// exist and be verified against the Auth0 JSON Web Key Set.
const checkJwt = auth({
  audience: 'undefined',
  issuerBaseURL: `https://YOUR_DOMAIN/`,
});

#javascript

Total reduce

var totalamountAlocation = filterAlocation.reduce(
    (a, b) => parseInt(a) + parseInt(b),
    0
);

#javascript

filter Value use Map

const filterAlocation = amountAlocation.map(item => {
    return parseInt(item.amount);
});

#javascript

PROMISE

const getTodos = (res) =>{
    return new Promise((resolve, reject) =>{
        const req = new XMLHttpRequest();

        req.addEventListener('readystatechange', ()=>{
            if(req.readyState === 4 && req.status === 200){
                const data = JSON.parse(req.responseText)
                resolve(data)
            }else if(req.readyState === 4){
                reject('could not fetch data')
            }
        })
        req.open('GET', res)
        req.send()
    })
}

getTodos('todos/astra.json').then(data=>{
    console.log(data)
    return getTodos('todos/breach.json')
}).then(data=>{
    console.log(data)
    return getTodos('todos/astra.json')
}).then(data=>{
    console.log(data)
}).catch(err=>{
    console.log(err)
})

#javascript

HTTP REQUEST

const getTodos = (callback) => { // FUNCTION TO MAKE REQUEST 
    const request = new XMLHttpRequest();

    request.addEventListener('readystatechange', () =>{
       if(request.readyState === 4 && request.status === 200){
           callback(undefined, request.responseText)
       }else if(request.readyState === 4){
           callback('could not fetch data', undefined)
       }
    });
    
    request.open('GET', 'https://jsonplaceholder.typicode.com/todos');
    request.send();
}

getTodos((err, data) => { // REUSABLE FUNCTION TO CHECK DATA
    console.log('callback')
    if(err){
        console.log(err)
    }else{
        console.log(data)
    }
})

#javascript

Any random number between min (included) and max (not included)

function randomNumber(min, max) {
  return Math.random() * (max - min) + min;
}

#javascript

Fibonacci

function* fibonacci() { // a generator function
  let [prev, curr] = [0, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (const n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

#javascript

reduce to group

var arr = [
  {
    id: 1,
    name: 'sadf'
  },
  {
    id: 2,
    name: 'cvb'
  },
  {
    id: 3,
    name: 'kl'
  }
]

const obj = arr.reduce( (prev,next) => {
  // grab the id from item
  const { id } = next
  
  // add the item to our object
  prev[id] = next
  
  // return the object so we can add more items
  return prev
}, {});

obj

var gg = arr.reduce( (prev, next) => {
  // grab the property from the item that we want to group by
  const {name} = next;
  
  // add a new array to the object if this is the first one with this value
  if (prev[name] === undefined) {
    prev[name] = [];
  }
  
  prev[name].push(next);
  
  return prev;
}, {})

gg

#javascript

status

{
  "status": "fail",
  "message": "ERROR MESSAGE",
  "query": "IP ADDRESS USED FOR QUERY"
}

#javascript

Function

function (){
  
}

#javascript

Javascript

// API for get requests
let fetchRes = fetch("https://jsonplaceholder.typicode.com/todos/1");
      
// fetchRes is the promise to resolve
// it by using.then() method
fetchRes.then(res =>
    res.json()).then(d => {
        console.log(d)
})

#javascript

Get last digits in a string

var member = "my name is Afia";

var last3 = member.slice(-3);

alert(last3); // "fia"

#javascript

messaging | React Native Firebase

const defaultAppMessaging = firebase.messaging();

#javascript

prevent typw more than max number

		checkMaxNumber(event) {
			if(event.target) {
				// document.querySelector('.maxNum').addEventListener('keydown',function (e) {
						if (event.target.value > 100 
						&& event.keyCode !== 46 // keycode for delete
						&& event.keyCode !== 8 // keycode for backspace
						) {
							event.preventDefault();
							event.target.value = 100;
					}
				// })
			}
		},

#javascript

Owl Trigger

<div class="custom-nav owl-nav">
<button class="btn" id="prevBtn"><i class="fa fa-chevron-left"></i></button>
<button class="btn" id="nextBtn"><i class="fa fa-chevron-right"></i></button>
</div>

<script>
jQuery(document).ready(function() {
    var owl = jQuery('.info-box-carousel');
    
    // Assuming that owl is initiated already. OR we initiate here below.
    // owl.owlCarousel();


    // Go to the next item
    jQuery('#nextBtn').click(function() {
        owl.trigger('next.owl.carousel');
    })
    // Go to the previous item
    jQuery('#prevBtn').click(function() {
        // With optional speed parameter
        // Parameters has to be in square bracket '[]'
        owl.trigger('prev.owl.carousel', [300]);
    })
})
</script>

#javascript

Add multiple products to cart- check if same item

function familyPack() {
  $('.btn-custom1').click(function(){
    jQuery.post('/cart/clear.js');
    var attr = $(this).attr('data-discount')
    console.log(attr)
    var prod1
    var prod2
    var prod3
    var prod4
    var newArr = []
    var items = []
    if (attr == 'family-pack') {
      prod1 = $('#familySelector1 option:selected').val()
      prod2 = $('#familySelector2 option:selected').val()
      prod3 = $('#familySelector3 option:selected').val()
      prod4 = $('#familySelector4 option:selected').val()
      newArr.push (prod1, prod2, prod3, prod4)
    }
    if (attr == 'couple-pack') {
      prod1 = $('#coupleSelector1 option:selected').val()
      prod2 = $('#coupleSelector2 option:selected').val()
      newArr.push (prod1, prod2)
    }
    if (attr == 'single-pack') {
      prod1 = $('#singleSelector1 option:selected').val()
      newArr.push (prod1)
    }

    
    var counter = 0
    for (let i = 0; i < newArr.length; i++) {
      var prod = newArr[i]
      var qty = 1
      if (i == 0 ) {
        items.push({id:prod, quantity: qty})
      }
      var itemlength = items.length
      if (i >= 1) {
        counter 
        if (items[counter].id == newArr[i]) {
          items[counter].quantity = items[counter].quantity+1
        }
        else {
          items.push({id:prod, quantity: qty})
          counter++
        }
      }
    }
    console.log(items)
    setTimeout(() => {
		jQuery.post('/cart/add.js', {items});
    }, 400)
  	var getDiscount = $(this).attr('data-discount')
    var discount 
    if (getDiscount == 'family-pack') {
    	discount = "FAMILY"
    }
    if (getDiscount == 'couple-pack') {
    	discount = "COUPLE"
    }
    if (getDiscount == 'couple-pack' || getDiscount == 'family-pack') {
      setTimeout(() => {
          window.location = '/checkout?discount='+discount
      }, 1300)
    }
    if (getDiscount == 'single-pack' ) {
      setTimeout(() => {
          window.location = '/checkout'
      }, 1300)
    }
  })

}
familyPack()

#localstorage #javascript

Web Storage API

localStorage.setItem("name", "John Doe");

#javascript

GET request with Callback

<script>
let s = document.createElement("script");
s.src = "demo_jsonp2.php?callback=myDisplayFunction";
document.body.appendChild(s);

function myDisplayFunction(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
</script>

#https #server #javascript #serverup #snippet

serverUp - Python

const http = require('http');  
// Create an instance of the http server 
// to handle HTTP requests
let app = http.createServer((req, res) => {
    // Set a response type of plain text 
//     for the response
...    res.writeHead(200, {'Content-Type': 'text/plain'});
    // Send back a response and end the connection
...    res.end('Hello World!\n');
});
// Start the server on port 3000
app.listen(3000, '127.0.0.1');
console.log('Node server running on port 3000');

#javascript #typescript

Generating a Yup Validation Object with a Map Function

export const validationSchema = (): FormValidationSchema => {
  const validationObject: { [key: string]: StringSchema } = {}

  // validation schema keys based on the name prop of the radio buttons in the form
  HOBBIES.forEach((hobby) => {
    validationObject[hobby.stateName] = Yup.string().required()
  })

  return Yup.object(validationObject)
}

#javascript

Create dynamic Yup validation schema.

import * as yup from "yup";

export function createYupSchema(schema, config) {
  const { id, validationType, validations = [] } = config;
  if (!yup[validationType]) {
    return schema;
  }
  let validator = yup[validationType]();
  validations.forEach(validation => {
    const { params, type } = validation;
    if (!validator[type]) {
      return;
    }
    console.log(type, params);
    validator = validator[type](...params);
  });
  schema[id] = validator;
  return schema;
}

#javascript #array #groupby

Group by key an array

const refunds = [
  {
    request_amount_to_refund: "3000",
    entity_id: "1850231228424",
    is_zni: false
  },
  {
    request_amount_to_refund: "2000",
    entity_id: "1850231228422",
    is_zni: false
  },
  {
    request_amount_to_refund: "1000",
    entity_id: "1850231228422",
    is_zni: true
  },
  {
    request_amount_to_refund: "500",
    entity_id: "1850231228422",
    is_zni: true
  }
]
    
const refundsFormatted = Object.values(refunds.reduce((acc, curr) => {
  const valueId = `${curr.entity_id}-${curr.is_zni}`

  // Does value already exist ?
  const existingValue = acc[valueId]

  // Values to add
  const existingRequestAmount = parseInt(existingValue?.request_amount_to_refund ?? 0)
  const newRequestAmount = parseInt(curr?.request_amount_to_refund ?? 0)
  const quantity = existingValue?.quantity ? existingValue?.quantity + 1 : 1

  const newValue = {
    ...curr,
    request_amount_to_refund: existingRequestAmount + newRequestAmount,
    quantity: quantity
  }
  return ({
    ...acc,
    [valueId]: newValue,
  })
}, {}))

console.log(refundsFormatted)

/**
Output expected 

[
  {
    request_amount_to_refund: "3000",
    entity_id: "1850231228424",
    is_zni: false,
    quantity: 1
  },
  {
    request_amount_to_refund: "2000",
    entity_id: "1850231228422",
    is_zni: false,
    quantity: 1
  },
  {
    request_amount_to_refund: "1500",
    entity_id: "1850231228422",
    is_zni: true,
    quantity: 2
  }
]
*/

#javascript

Check if a Value Is Object in JavaScript | Delft Stack

const test = {};
function isObject(val) {
    return val instanceof Object; 
}
console.log(isObject(test));

#javascript #promises

javascript - Simple Callback to Promise Conversion - Stack Overflow

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

const sumWithDelay = async (a, b) => {
  console.log("Delay started")
  await sleep(3000)
  console.log("Delay ended")
  return a + b;
}

const sum = async (a, b) => {
  return a + b;
}

const mul = async (a, b) => {
  return a * b;
}

let dne = async function() {
  return 'it does not exist';
};

let doCalculation = function(route) {
  switch (route) {
    case 'sum':
      return sum;
    case 'sumWithDelay':
      return sumWithDelay;
    case 'mul':
      return mul;
    default:
      return dne;
  }
};

doCalculation('sumWithDelay')(2, 2).then(res => console.log(res)); //4
doCalculation('sum')(3, 4).then(res => console.log(res)); // 7
doCalculation('mul')(3, 4).then(res => console.log(res)); // 12
doCalculation('dne')(3, 4).then(res => console.log(res)); // it does not exist

#javascript

javascript - Accessing VUE JS's data from Axios - Stack Overflow

send: function() {
  axios.post(this.api + "orders", this.order).then(function(response) {
    this.message = "Your payment was successful"
  }.bind(this))
}

#javascript

javascript - Accessing VUE JS's data from Axios - Stack Overflow

send: function() {
  axios.post(this.api + "orders", this.order).then(response => {
    this.message = "Your payment was successful"
  }
}

#javascript

javascript - Accessing VUE JS's data from Axios - Stack Overflow

send: function() {
  let self = this
  axios.post(this.api + "orders", this.order).then(function(response) {
    self.message = "Your payment was successful"
  }
}

#javascript

Table tr checkable

<tr class="checkable">

<script>
    $(document).on('click', 'tr.checkable', function () {
        var checkbox = $(this).closest('tr').find("input[type=checkbox]");

        checkbox.prop('checked', !checkbox.is(':checked'));
    });
</script>

#javascript #typescript

javascript - How to generate range of numbers from 0 to n in ES2015 only? - Stack Overflow

class _Array<T> extends Array<T> {
  static range(from: number, to: number, step: number): number[] {
    return [...Array(Math.floor((to - from) / step) + 1)].map(
      (v, k) => from + k * step
    );
  }
}
_Array.range(0, 9, 1);

#javascript #typescript

javascript - How to generate range of numbers from 0 to n in ES2015 only? - Stack Overflow

interface _Iterable extends Iterable<{}> {
  length: number;
}

class _Array<T> extends Array<T> {
  static range(from: number, to: number, step: number): number[] {
    return Array.from(
      <_Iterable>{ length: Math.floor((to - from) / step) + 1 },
      (v, k) => from + k * step
    );
  }
}
_Array.range(0, 9, 1);
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

#javascript #typescript

javascript - How to generate range of numbers from 0 to n in ES2015 only? - Stack Overflow

const Range2 = function* (to = 0, step = 1, from = 0) {
  let i = 0,
    length = Math.floor((to - from) / step) + 1;
  while (i < length) yield from + i++ * step;
};

[...Range2(5, -2, 10)]; // From 10 to 5 with step -2
//=> [10, 8, 6]

let even4to10 = Range2(10, 2, 4);
even4to10.next().value;
//=> 4
even4to10.next().value;
//=> 6
even4to10.next().value;
//=> 8
even4to10.next().value;
//=> 10
even4to10.next().value;
//=> undefined

#javascript #typescript

javascript - How to generate range of numbers from 0 to n in ES2015 only? - Stack Overflow

class Range2 {
  constructor(to = 0, step = 1, from = 0) {
    this[Symbol.iterator] = function* () {
      let i = 0,
        length = Math.floor((to - from) / step) + 1;
      while (i < length) yield from + i++ * step;
    };
  }
}
[...new Range2(5)]; // First 5 Whole Numbers
//=> [0, 1, 2, 3, 4, 5]

[...new Range2(5, 2)]; // From 0 to 5 with step 2
//=> [0, 2, 4]

[...new Range2(5, -2, 10)]; // From 10 to 5 with step -2
//=> [10, 8, 6]

#javascript #typescript

javascript - How to generate range of numbers from 0 to n in ES2015 only? - Stack Overflow

const Range = function* (total = 0, step = 1, from = 0) {
  for (let i = 0; i < total; yield from + i++ * step) {}
};

Array.from(Range(5, -2, -10));
//=> [-10, -12, -14, -16, -18]

[...Range(5, -2, -10)]; // Five Elements With Step -2 From -10
//=> [-10, -12, -14, -16, -18]

// Also works with for..of loop
for (i of Range(5, -2, 10)) console.log(i);
// 10 8 6 4 2

// Lazy loaded way
const number0toInf = Range(Infinity);
number0toInf.next().value;
//=> 0
number0toInf.next().value;
//=> 1
// ...

#javascript #typescript

javascript - How to generate range of numbers from 0 to n in ES2015 only? - Stack Overflow

class Range {
  constructor(total = 0, step = 1, from = 0) {
    this[Symbol.iterator] = function* () {
      for (let i = 0; i < total; yield from + i++ * step) {}
    };
  }
}

[...new Range(5)]; // Five Elements
//=> [0, 1, 2, 3, 4]
[...new Range(5, 2)]; // Five Elements With Step 2
//=> [0, 2, 4, 6, 8]
[...new Range(5, -2, 10)]; // Five Elements With Step -2 From 10
//=>[10, 8, 6, 4, 2]
[...new Range(5, -2, -10)]; // Five Elements With Step -2 From -10
//=> [-10, -12, -14, -16, -18]

// Also works with for..of loop
for (i of new Range(5, -2, 10)) console.log(i);
// 10 8 6 4 2

#javascript #typescript

javascript - How to generate range of numbers from 0 to n in ES2015 only? - Stack Overflow

const range = (from, to, step) =>
  [...Array(Math.floor((to - from) / step) + 1)].map((_, i) => from + i * step);

range(0, 9, 2);
//=> [0, 2, 4, 6, 8]

// can also assign range function as static method in Array class (but not recommended )
Array.range = (from, to, step) =>
  [...Array(Math.floor((to - from) / step) + 1)].map((_, i) => from + i * step);

Array.range(2, 10, 2);
//=> [2, 4, 6, 8, 10]

Array.range(0, 10, 1);
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.range(2, 10, -1);
//=> []

Array.range(3, 0, -1);
//=> [3, 2, 1, 0]

#javascript #typescript

javascript - How to generate range of numbers from 0 to n in ES2015 only? - Stack Overflow

[...Array(10)].map((_, i) => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

Array.from(Array(10)).map((_, i) => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

Array.from(Array(10).keys()).map(i => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

[...Array(10).keys()].map(i => 4 + i * -2);
//=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]

Array(10).fill(0).map((_, i) => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

Array(10).fill().map((_, i) => 4 + i * -2);
//=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]

#javascript #typescript

javascript - How to generate range of numbers from 0 to n in ES2015 only? - Stack Overflow

[...Array(N)].map((_, i) => from + i * step);

#javascript

hsl2rgb

const hsl2rgb = (H, S, L) => {
  const C = (1 - Math.abs(2*L - 1)) * S;
  const X = C * (1 - Math.abs(((H / 60) % 2)-1));
  const m = L - C/2;
    
  const [r1, g1, b1] = H >= 0 && H < 60 ? [C, X, 0] :
                       H >= 60 && H < 120 ? [X, C, 0] :
                       H >= 120 && H < 180 ? [0, C, X] :
                       H >= 180 && H < 240 ? [0, X, C] :    
                       H >= 240 && H < 300 ? [X, 0, C] :                         
                                             [C, 0, X];     
    
  return [(r1 + m) * 255, (g1 + m) * 255, (b1 + m) * 255];
};

#javascript

rgb2hsl

const rgb2hsl = (r,g,b) => {
  const [r1,g1,b1] = [r/255, g/255, b/255];
  const [cmax, cmin] = [Math.max(r1,g1,b1), Math.min(r1,g1,b1)];
    
  const d = (cmax - cmin);

  const L = (cmax + cmin) / 2;
  const S = d == 0 ? 0 : (d / ( 1 - Math.abs(2*L-1)));
  const H = d == 0 ? 0 : 
            cmax == r1 ? (60 * (((g1 - b1) / d) % 6)) : 
            cmax == g1 ? (60 * (((b1 - r1) / d) + 2)) : 
                         (60 * (((r1 - g1) / d) + 4));
  return [H, S, L];
};

#javascript

Script - Trenches - Roblox-Scripter

loadstring(game:HttpGet("https://raw.githubusercontent.com/AnomalyRBLX/Database/main/Scripts/Trenches.lua", true))()

#javascript

Usage with Vue | XState Docs

import { createMachine } from 'xstate';

// This machine is completely decoupled from Vue
export const toggleMachine = createMachine({
  id: 'toggle',
  context: {
    /* some data */
  },
  initial: 'inactive',
  states: {
    inactive: {
      on: { TOGGLE: 'active' }
    },
    active: {
      on: { TOGGLE: 'inactive' }
    }
  }
});

#javascript

Continuation Apex in LWC

public with sharing class ContinuationController {

    //Endpoint to which we will be making the callout
    private static final String LONG_RUNNING_SERVICE_URL = 'XX';
    
    //continuation and cacheale should be true!
    @AuraEnabled(continuation=true cacheable=true)
    public static Object startRequest() {
		
      //Instantiate the Continaution class
      //Also, pass the timeout when instantiation
      Continuation con = new Continuation(40);

	  //this is the callback method	
      con.continuationMethod='processResponse';
      
      //Data that you want to pass to the callback method
      con.state='Hello, World!';
	  
      //Create the request
      HttpRequest req = new HttpRequest();
      req.setMethod('GET');
      req.setEndpoint(LONG_RUNNING_SERVICE_URL);
	 
      //add the request to continuation instance
      //we can add upto 3 requests
      con.addHttpRequest(req);
      
	  //pass the continuation instance to the framework	
      return con;
    }
    
    // Callback method
    @AuraEnabled(cacheable=true)
    public static Object processResponse(List<String> labels, Object state) {
	  System.debug(' 🚀 ' +state);
      
      //labels[0] is the response of the first request
      HttpResponse response = Continuation.getResponse(labels[0]);

      String result = response.getBody();
      System.debug(' 🚀 ' +result);
      return result;
    }
}




==================================LWC===============================================
  
  
import { LightningElement, wire } from "lwc";

import startRequest from "@salesforce/apexContinuation/ContinuationController.startRequest";

export default class ContinuationComponent extends LightningElement {
  @wire(startRequest)
  records({ data, error }) {
    console.log(data);
    console.log(error);
  }
}

#javascript

Offset element

function offset(el) {
            var rect = el.getBoundingClientRect(),
                scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
                scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            return {top: rect.top + scrollTop, left: rect.left + scrollLeft}
        }

#javascript

Scroll to element

function smoothScrollTo(target, duration) {
            var timer, start, factor;
            var offset = window.pageYOffset, delta = target - window.pageYOffset;
            duration = duration || 1000;
            start = Date.now();
            factor = 0;

            if (timer) {
                clearInterval(timer);
            }

            function step() {
                var y;
                factor = (Date.now() - start) / duration;
                if (factor >= 1) {
                    clearInterval(timer);
                    factor = 1;
                }
                y = factor * delta + offset;
                window.scrollBy(0, y - window.pageYOffset);
            }

            timer = setInterval(step, 10);
            return timer;
        }

#undefined #javascript

Comma delimiter for numbers in thousands

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
console.log(numberWithCommas(8181968))

#javascript

Declaración ---> todo lo declarado sube(carga, se eleva, hosting) al inicio de su scope.

<!--
- variables se declaran con: let, var, const
- funciones se declaran con: function nombre(){}
                           nota: let x = () =>{} ; esto es una expresión de función

"Todo lo declarado es elevado a la parte inicial de su scope"
Esto también significa que una variable puede parecer usarse antes de ser declarada. Este comportamiento es llamado hoisting (del inglés "elevación")


**** elevación ****
  NOTA: la elevación existe para marcar el scope como declarada con tal variable aunque aun no fue         "inicializado" o "definido" en ese punto(inicio del escope),y dependiendo el tipo de                  variable que sea nesesitanra ser definido o inicializado...
  
  En todo lo declarado se eleva su deración(sube una copioa de su declaración); pero no su           inicializacón: lo que sube var x; tambien  let x;  o const x;

  var => queda su declaración con su inicialización; x = algo; su "valor":undefine en la cabezera;          no avisa error,sino un valor."lo malo de var"

  let y const => queda su inicialización. x = algo; su "error": no initial en la cabezera,
                 avisa el "error" por eso desde que existe let y const es mjor usarlo.

  var->undefine; let,const-> no initial; eso gracias al cambio ESC5 a ESC6 trajo let y const
  
  
  NOTA:  TEMPORAL DEAD ZONE(zona temporal muerta): esta detraz de la variable declarada e                    inicializada, asta el inicio del su scope.
  
-->

#javascript

"aclaración de las diferencias" => var,let,const

/*variables 
//varible no declarada:
  x => siempre son globales; supongo que se cargan antes de todo ;
       pero si estan para reasignar una x ya declarada entonces se limitan a su escope.
  NOTA: var: puede ser reasignada con "x = algo" p "var x = algo"  es como si redeclaramos y                                                                                      reasignamos 
       
// variables declaradas: se limitan al contexto de efecución.
  var x ,let x,=> no necesitan ser inicializadas(tener un valor inicial)=> sin inicio sera undefine
  -- su diferencia sera anivel del scope.
  
//
const x = algo; => deven ser inicializadas(no tendria sentido sin su inicio) =>si no lleva inicio su error es de sintaxis.
*/

// var => escope = a nivel de función
// let y const => scope = a nivel de block(un bloque puede ser una función,if,for, while, etc...)

// reasignas let  x = numero; el valor de x cambia a nivel de scope, entrando a bloques internos; pero si la variable x fue "redeclarada" en ese bloque entoces su valor es ese nuevo, y si lo reasignamos, solo sera al nuevo x readeclarado; que mantendra ese valor reasignado solo dentro del bloque.
// reasignas var x = numero; el valor de x cambia a nivel de scope(la función), si redeclaramos x dentro de un bloque y tambien reasignamos; entonces tanto afuera como dentro de ese blocque tendra el ultimo valor reasignado asta donde es llamado.


//IMPORTANTE:
-- La reasignación sucede dentro de su bloque, sino no es reasignación.
--let y const  "si se pueden redeclarar, pero en otro bloque no nesesariamente hijo"
-- const => "no se puede reasignar en su bloque ni en otro bloque "hijo" " si se le rasigna en otro              bloque eso ya no es reasignación... estarias poniendo otra variable sin declararla.

#javascript

visual studio code - Weird HTML formatting with prettier - Stack Overflow

"prettier.htmlWhitespaceSensitivity": "ignore"

#javascript

visual studio code - Weird HTML formatting with prettier - Stack Overflow

"beautify.language": {
    "html": ["html", "php", "erb"],
},

#javascript

visual studio code - Weird HTML formatting with prettier - Stack Overflow

"[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
}

#javascript

visual studio code - Weird HTML formatting with prettier - Stack Overflow

"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},

#javascript

visual studio code - Weird HTML formatting with prettier - Stack Overflow

"editor.defaultFormatter": "esbenp.prettier-vscode",

#javascript

Get Wordle word of the day

(new wordle.bundle.GameApp()).solution

#javascript

Objects - Beginner JavaScript - Wes Bos

We will go into why that is later but the short answer for now is that arrow functions do not scope this to the thing they are called against, and the parent scope will inherit that.

#javascript #json

Learn Javascript profound

https://wesbos.com/javascript/08-data-types/objects/

#html #css #javascript #svg

SVG, mask,feGaussianBlur,image,cx y cy ,CLIPPATH

// NOTAS 
 /*
 1) SVG , PNG ,JPG: 
 para una misma imagen, puede pasar que el peso de svg sea mayor que png o jpg; porque
 dependera de que grafica se lleva a svg, si son figuras simples -> svg pesa poco; pero si son
 muchas imagenes intrincadas entonces svg terminara pesando mas, ya que jpg y png cuardan bits y svg guarda codigo vectorias.
 */

/*
2) -webkit-mask-img "solo funciona para firefox" 
   por lo tanto para enmascarar es mejor usar SVG
   -donde se usara "<image> con width y height obligatorios" y no <img>  
   -aplicar stdDeviation="10" entre 1 y 10 se pasa como que va perdiendo espacio
*/

/*
3) es mejor mover la mascara modificando cx y cy , sera mas simple.

  NOTA: las forma de escalar para un mismo tamaño con  background-image  y <img src=""/>
        No son iguales. es mejor usar un mismo tipo si quiere sobreponer imagenes parecidas y dar           efecto collage
*/

/*
  ENMASCARAR CON 	clipPath esta muy bien, incluso para moverlo con el mousemove es simple; pero 
  "no tiene forma de difuminar los bordes de lamascara con la función gauss"
*/

#javascript

How to fix ESLint error: Do not access Object.prototype method 'hasOwnProperty' from target object no-prototype-builtins | Our Code World

let events = {"some-index": false};
let key = "some-index";

if(Object.prototype.hasOwnProperty.call(events, key)) {
    // This would compile without any issue !
    console.log("The object has the property");
}

#javascript

How To Use .map() to Iterate Through Array Items in JavaScript | DigitalOcean

const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2
})

console.log(sweeterArray)

#javascript

javascript - How to check if array is empty or does not exist? - Stack Overflow

if (!Array.isArray(array) || !array.length) {
  // array does not exist, is not an array, or is empty
  // ⇒ do not attempt to process array
}

or 

if (!array?.length) {
    // array or array.length are falsy
    // ⇒ do not attempt to process array
}

#html #css #javascript

Banner style css based logo

<div class="snip1306">
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <h1>Woodstone</h1>
  <h5>Neque porro quisquam</h5>
  <h6>Est. 1958</h6>
</div>
<div class="snip1306">
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <h1>Vanguard</h1>
  <h5>Cras ornare tristique elit</h5>
  <h6>Est. 1965</h6>
</div>
<div class="snip1306">
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <h1>Spartacus</h1>
  <h5>At vero eos et accusamus</h5>
  <h6>Est. 1977</h6>
</div>
_______________________________-
  
  @import url(https://fonts.googleapis.com/css?family=Raleway:500);
@import url(https://fonts.googleapis.com/css?family=Righteous);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1306 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  color: #bdbdbd;
  margin: 40px 25px;
  max-width: 285px;
  width: 100%;
  text-align: center;
  font-size: 16px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.snip1306 h1,
.snip1306 h5 {
  margin: 0;
  text-transform: uppercase;
}
.snip1306 h1 {
  font-family: 'Righteous', Arial, sans-serif;
  font-size: 1.8em;
  line-height: 50px;
  position: relative;
  background-color: #bdbdbd;
  color: #212121;
  text-align: center;
  margin: 0 30px 10px;
}
.snip1306 h1:before,
.snip1306 h1:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: -5px;
  border-width: 25px 10px;
  border-style: solid;
}
.snip1306 h1:before {
  left: -23px;
  border-color: #bdbdbd #bdbdbd #bdbdbd transparent;
}
.snip1306 h1:after {
  right: -23px;
  border-color: #bdbdbd transparent #bdbdbd #bdbdbd;
}
.snip1306 h5 {
  font-weight: 500;
}
.snip1306 h6 {
  margin: 0;
  display: inline-block;
  position: relative;
}
.snip1306 h6:before,
.snip1306 h6:after {
  position: absolute;
  height: 1px;
  content: '';
  background: #bdbdbd;
  width: 30px;
  top: 50%;
}
.snip1306 h6:before {
  left: -35px;
}
.snip1306 h6:after {
  right: -35px;
}
.snip1306 .diamond {
  width: 10px;
  height: 10px;
  margin: 15px 5px;
  display: inline-block;
  line-height: 80px;
  background: #bdbdbd;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}
.snip1306 .diamond:nth-of-type(2) {
  -webkit-transform: rotateZ(-45deg) scale(2) translate(2px, -2px);
  transform: rotateZ(-45deg) scale(2) translate(2px, -2px);
}
/* Demo purposes only */
body {
  background-color: #212121;
}

#html #css #javascript

profile card with borders, text, image

<figure class="snip1515">
  <div class="profile-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample47.jpg" alt="sample47" /></div>
  <figcaption>
    <h3>Fleece Marigold</h3>
    <h4>Founder</h4>
    <p>Which is worse, that everyone has his price, or that the price is always so low.</p>
    <div class="icons"><a href="#"><i class="ion-social-reddit"></i></a>
      <a href="#"> <i class="ion-social-twitter"></i></a>
      <a href="#"> <i class="ion-social-vimeo"></i></a>
    </div>
  </figcaption>
</figure>
<figure class="snip1515">
  <div class="profile-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample83.jpg" alt="sample83" /></div>
  <figcaption>
    <h3>Norman Gordon</h3>
    <h4>Web Designer</h4>
    <p>I'm killing time while I wait for life to shower me with meaning and happiness.</p>
    <div class="icons"><a href="#"><i class="ion-social-reddit"></i></a>
      <a href="#"> <i class="ion-social-twitter"></i></a>
      <a href="#"> <i class="ion-social-vimeo"></i></a>
    </div>
  </figcaption>
</figure>
<figure class="snip1515">
  <div class="profile-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" alt="sample70" /></div>
  <figcaption>
    <h3>Ruby Von Rails</h3>
    <h4>Public Relations</h4>
    <p>The only skills I have the patience to learn are those that have no real application in life. </p>
    <div class="icons"><a href="#"><i class="ion-social-reddit"></i></a>
      <a href="#"> <i class="ion-social-twitter"></i></a>
      <a href="#"> <i class="ion-social-vimeo"></i></a>
    </div>
  </figcaption>
</figure>


____________________________________________________________________________________-
  @import url(https://fonts.googleapis.com/css?family=Open+sans);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display);
.snip1515 {
  font-family: 'Open Sans', Arial, sans-serif;
  position: relative;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #000000;
  text-align: center;
  line-height: 1.4em;
  font-size: 14px;
  box-shadow: none !important;
}

.snip1515 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.snip1515 .profile-image {
  display: inline-block;
  width: 80%;
  z-index: 1;
  position: relative;
  padding: 10px;
  border: 2px solid #e8b563;
}

.snip1515 .profile-image img {
  max-width: 100%;
  vertical-align: top;
}

.snip1515 figcaption {
  width: 100%;
  background-color: #F2F2F2;
  color: #555;
  padding: 125px 25px 25px;
  margin-top: -100px;
  display: inline-block;
}

.snip1515 h3,
.snip1515 h4,
.snip1515 p {
  margin: 0 0 5px;
}

.snip1515 h3 {
  font-weight: 600;
  font-size: 1.3em;
  font-family: 'Playfair Display', Arial, sans-serif;
}

.snip1515 h4 {
  color: #8c8c8c;
  font-weight: 400;
  letter-spacing: 2px;
}

.snip1515 p {
  font-size: 0.9em;
  letter-spacing: 1px;
  opacity: 0.9;
}

.snip1515 .icons {
  text-align: center;
  width: 100%;
}

.snip1515 i {
  padding: 10px 2px;
  display: inline-block;
  font-size: 18px;
  font-weight: normal;
  color: #e8b563;
  opacity: 0.75;
}

.snip1515 i:hover {
  opacity: 1;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
+++++++++++++++++++++_________________________________________________

/* Demo purposes only */
$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);

#html #css #javascript

horizontal card

<div class="card-horizontal">
    <div class="card-horizontal-media">
        <img class="responsive-img" src="/src/img/backpack1.jpg" alt="no img">
    </div>
    <div class="d-flex flex-column p-1 gap-1 w-100-per">
        <div class="card-body-header">
            <h2 class="font-size-md m-0">Backpack</h2>
            <h class="font-size-sm color-gray-500">Grey & Black</h>
            <div class="d-flex flex-column font-weight-600">
                <div class="d-flex gap-1">
                    <span>₹ 699 </span>
                    <span class="text-decoration-linethrough"> ₹ 1398</span>
                </div>
                <div class="color-green-600">50% off</div>
            </div>
        </div>
        <button class="btn btn-add-cart btn-secondary w-100-per font-size-regular">Add to Cart</button>
        <button class="btn btn-add-cart btn-outline w-100-per font-size-regular">Remove From Wishlist</button>
    </div>
</div>

#html #css #javascript

menu with corner border effect css

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
.snip1241 {
  font-family: 'Raleway', Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
}
.snip1241 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1241 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0.5em 1em;
  padding: 0;
}
.snip1241 a {
  padding: 0.5em 0.8em;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  text-decoration: none;
}
.snip1241 a:before,
.snip1241 a:after {
  height: 14px;
  width: 14px;
  position: absolute;
  content: '';
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  opacity: 0;
}
.snip1241 a:before {
  right: 0;
  top: 0;
  border-right: 3px solid #9b59b6;
  border-top: 3px solid #9b59b6;
  -webkit-transform: translate(-100%, 50%);
  transform: translate(-100%, 50%);
}
.snip1241 a:after {
  left: 0;
  bottom: 0;
  border-left: 3px solid #9b59b6;
  border-bottom: 3px solid #9b59b6;
  -webkit-transform: translate(100%, -50%);
  transform: translate(100%, -50%);
}
.snip1241 a:hover,
.snip1241 .current a {
  color: #ffffff;
}
.snip1241 a:hover:before,
.snip1241 .current a:before,
.snip1241 a:hover:after,
.snip1241 .current a:after {
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  opacity: 1;
}
/* Demo purposes only */
body {
  background-color: #212121;
}
<ul class="snip1241">
  <li class="current"><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
</ul>

#html #css #javascript

menu with corner border hover effect html

<ul class="snip1241">
  <li class="current"><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
</ul>

#html #css #javascript

menu item 3D rotate on hover - JS

/* Demo purposes only */
$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);
@import url(https://fonts.googleapis.com/css?family=Work+Sans);
.snip1526 {
  font-family: 'Work Sans', Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}

.snip1526 *,
.snip1526 *:after {
  box-sizing: border-box;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.snip1526 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0.5em 0.6em;
  -webkit-perspective: 50em;
  perspective: 50em;
}

.snip1526 a {
  backface-visibility: hidden;
  color: #ffffff;
  display: block;
  line-height: 2.2em;
  padding: 0 1.4em;
  position: relative;
  text-decoration: none;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  background-color: #667273;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.snip1526 a:after {
  background-color: #5c122e;
  color: transparent;
  content: attr(data-hover);
  top: 0%;
  line-height: 2.2em;
  position: absolute;
  left: 100%;
  width: 100%;
  -webkit-transform: translateX(0%) rotateY(90deg);
  transform: translateX(0%) rotateY(90deg);
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

.snip1526 li:hover a,
.snip1526 li.current a {
  -webkit-transform: translate(-50%) rotateY(-90deg);
  transform: translate(-50%) rotateY(-90deg);
  background-color: #1e2222;
  color: transparent;
}

.snip1526 li:hover a:after,
.snip1526 li.current a:after {
  background-color: #b12358;
  color: #ffffff;
  cursor: pointer;
}
<ul class="snip1526">
  <li class="current"><a href="#" data-hover="Home">Home</a></li>
  <li><a href="#" data-hover="About Us">About Us</a></li>
  <li><a href="#" data-hover="Blog">Blog</a></li>
  <li><a href="#" data-hover="Services">Services</a></li>
  <li><a href="#" data-hover="Products">Products</a></li>
  <li><a href="#" data-hover="Contact">Contact</a></li>
</ul>

#html #css #javascript

menu items 3D rotate on hover =CSS

@import url(https://fonts.googleapis.com/css?family=Work+Sans);
.snip1526 {
  font-family: 'Work Sans', Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}

.snip1526 *,
.snip1526 *:after {
  box-sizing: border-box;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.snip1526 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0.5em 0.6em;
  -webkit-perspective: 50em;
  perspective: 50em;
}

.snip1526 a {
  backface-visibility: hidden;
  color: #ffffff;
  display: block;
  line-height: 2.2em;
  padding: 0 1.4em;
  position: relative;
  text-decoration: none;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  background-color: #667273;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.snip1526 a:after {
  background-color: #5c122e;
  color: transparent;
  content: attr(data-hover);
  top: 0%;
  line-height: 2.2em;
  position: absolute;
  left: 100%;
  width: 100%;
  -webkit-transform: translateX(0%) rotateY(90deg);
  transform: translateX(0%) rotateY(90deg);
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

.snip1526 li:hover a,
.snip1526 li.current a {
  -webkit-transform: translate(-50%) rotateY(-90deg);
  transform: translate(-50%) rotateY(-90deg);
  background-color: #1e2222;
  color: transparent;
}

.snip1526 li:hover a:after,
.snip1526 li.current a:after {
  background-color: #b12358;
  color: #ffffff;
  cursor: pointer;
}
<ul class="snip1526">
  <li class="current"><a href="#" data-hover="Home">Home</a></li>
  <li><a href="#" data-hover="About Us">About Us</a></li>
  <li><a href="#" data-hover="Blog">Blog</a></li>
  <li><a href="#" data-hover="Services">Services</a></li>
  <li><a href="#" data-hover="Products">Products</a></li>
  <li><a href="#" data-hover="Contact">Contact</a></li>
</ul>

#html #css #javascript

menu items 3D rotate on hover html

<ul class="snip1526">
  <li class="current"><a href="#" data-hover="Home">Home</a></li>
  <li><a href="#" data-hover="About Us">About Us</a></li>
  <li><a href="#" data-hover="Blog">Blog</a></li>
  <li><a href="#" data-hover="Services">Services</a></li>
  <li><a href="#" data-hover="Products">Products</a></li>
  <li><a href="#" data-hover="Contact">Contact</a></li>
</ul>

#html #css #javascript

image with title on hover js

/* Demo purposes only */
var snippet = [].slice.call(document.querySelectorAll('.hover'));
if (snippet.length) {
  snippet.forEach(function (snippet) {
    snippet.addEventListener('mouseout', function (event) {
      if (event.target.parentNode.tagName === 'figure') {
        event.target.parentNode.classList.remove('hover')
      } else {
        event.target.parentNode.classList.remove('hover')
      }
    });
  });
}
<figure class="snip1585">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" alt="sample70" />
  <figcaption>
    <h3>Ingredia <span>Nutrisha</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1585 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample106.jpg" alt="sample106" />
  <figcaption>
    <h3>Dianne <span>Ameter</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1585"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample109.jpg" alt="sample109" />
  <figcaption>
    <h3>Samuel <span>Serif</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>

#html #css #javascript

image with title on hover css

@import url(https://fonts.googleapis.com/css?family=Roboto:100,700;);
.snip1585 {
  background-color: rgb(41, 46, 57);
  color: #fff;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  margin: 10px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

.snip1585 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1585:before,
.snip1585:after {
  background-color: rgba(46, 52, 64,  0.5);
  border-top: 50px solid rgba(46, 52, 64, 0.5);
  border-bottom: 50px solid rgba(46, 52, 64, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1;
  opacity: 0;
}

.snip1585:before {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
}

.snip1585:after {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
}

.snip1585 img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.snip1585 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1em;
  opacity: 0;
  z-index: 2;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.snip1585 h3 {
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 1px;
  margin: 0;
  text-transform: uppercase;
}

.snip1585 h3 span {
  display: block;
  font-weight: 700;
}

.snip1585 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

.snip1585:hover > img,
.snip1585.hover > img {
  opacity: 0.7;
}

.snip1585:hover:before,
.snip1585.hover:before,
.snip1585:hover:after,
.snip1585.hover:after {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.snip1585:hover figcaption,
.snip1585.hover figcaption {
  opacity: 1;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
<figure class="snip1585">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" alt="sample70" />
  <figcaption>
    <h3>Ingredia <span>Nutrisha</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1585 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample106.jpg" alt="sample106" />
  <figcaption>
    <h3>Dianne <span>Ameter</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1585"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample109.jpg" alt="sample109" />
  <figcaption>
    <h3>Samuel <span>Serif</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>

#html #css #javascript #svg

Difuminación de borde, función de gauss (1)

let box = document.querySelector(".box");
let img1 = document.querySelector(".img1");
const t = img1.getBoundingClientRect();
let bg = img1.querySelector('image');

function moverCursor(e) {
  let x = e.pageX - t.left - (t.width / 2);
  let y = e.pageY - t.top - (t.height / 2);
  
  img1.style.setProperty(`top`, `${y}px`);
  img1.style.setProperty(`left`, `${x}px`);
  
  bg.style.setProperty(`x`, `${-x}px`);
  bg.style.setProperty(`y`, `${-y}px`);
}
box.addEventListener("mousemove", moverCursor);

/*CSS*/
.box {
  width: 500px;
  height: 250px;
  border: 2px solid red;
  position: relative;
  background-image: url(https://picsum.photos/600/250);
  overflow: hidden;
}

.img1 {
  position: absolute;
}



/*HTML*/
<div class="box">
  <svg class="img1"  width="150" height="150">
    <defs>
      <filter id="filter">
        <feGaussianBlur stdDeviation="10" />
      </filter>
      <mask id="mask">
        <ellipse cx="50%" cy="50%" rx="40%" ry="40%" fill="white" filter="url(#filter)"></ellipse>
      </mask>
    </defs>
    <image href="https://picsum.photos/500/250" width="500" height="250" mask="url(#mask)"></image>
  </svg>
</div>

#javascript #object #key

JavaScript set object key by variable - Stack Overflow

var key = "name";
var person = {[key]:"John"}; // same as var person = {"name" : "John"}
console.log(person); // should print  Object { name="John"}

#javascript #react.js

React.js - toggleList

import { useState, useEffect, useRef } from 'react';
import '../Styles/Hero.css';

function Hero() {
    // USE REF SETTINGS
    const activeItem = useRef([]);
    const toggleTarget = useRef(false);
    const targetObject = useRef({
        id: "",
        active: false,
    });
    const boxCustomRef = useRef(null);

    // BOXES AMOUNT 
    const boxesAmout = 160;
    const updatedItemArray = []

    // Create new Array based on boxesAmount
    const itemArr = new Array(boxesAmout).fill(0);

    // FOR LOOP => iterate over each item
    // => push item w/ index as id in updatedItemArray
    for (let i = 0; i < itemArr.length; i++) {
        updatedItemArray.push({
            id: itemArr[i] = i
        })
    };


    const toggleBoxHandler = (event) => {
        // id of clicked element
        let targetId = parseInt(event.target.id);

        // new Arr based on previous elements
        let prevArr = [...activeItem.current];

        // current Object to push in array
        targetObject.current = {
            id: targetId,
            active: toggleTarget.current,
        };

        // if Arr is empty => push first element
        if ((activeItem.current.length === 0) && (targetObject.current.active === false)) {
            targetObject.current = {
                id: targetId,
                active: true
            }
            activeItem.current = [...prevArr, targetObject.current];
            console.log("first item");
            console.log(activeItem.current);
            // add active class
            event.target.className = "hero__grid__box--overlay--default hero__grid__box--overlay--isActive"
        }
        //
        // IF ARR IS NOT EMPTY => logic goes here
        //
        // FIRST => check if target id is already included in previous Arr
        // -> if not: push new targetObject / toggle active state
        // -> if yes: remove item from Arr / edit new targetObject & toggle active state / push updated item back in Arr
        //
        else if (activeItem.current.length > 0) {
            console.log("arr includes at least one item");

            // loop over prevArr
            for (let i = 0; i < prevArr.length; i++) {

                // if prevArr doesn't include targetId
                if (prevArr[i].id !== targetId) {
                    console.log("it's not a match!");

                    //
                    // activeState default is false
                    // => set State to true
                    // => hydrate current Arr with current targetObject
                    // => toggle active class
                    //
                    targetObject.current = {
                        id: targetId,
                        active: true
                    }

                    activeItem.current = [...prevArr, targetObject.current];

                    // add active class
                    event.target.className = "hero__grid__box--overlay--default hero__grid__box--overlay--isActive";
                }
                // if prevArr includes targetId
                // Remove & replace item from prevArr => update its active State / push updated item back in Arr
                if (prevArr[i].id === targetId) {
                    console.log("arr already include this item");
                    // console.log(prevArr[i].id);
                    let updatedArr;
                    let updatedItem = {
                        id: "",
                        active: "",
                    };

                    // FILTER & CREATE new Array w/ item to update
                    const filteredItem = prevArr.filter((item) => item.id === targetId);

                    // FILTER & CREATE new Array without item to update
                    const filteredArr = prevArr.filter(item => item.id !== targetId);
                    console.log(filteredArr);

                    // Updates filtered item
                    updatedItem = {
                        id: filteredItem[0].id,
                        active: !filteredItem[0].active
                    }

                    // UPDATE prevArr w/ correct active value
                    prevArr = [...filteredArr, updatedItem];

                    // IF state is true => add class active
                    if (updatedItem.active === true) {
                        event.target.className = "hero__grid__box--overlay--default hero__grid__box--overlay--isActive"
                    }
                    // IF state is false => remove class active
                    if (updatedItem.active === false) {
                        event.target.className = "hero__grid__box--overlay--default hero__grid__box--overlay--notActive"
                    }

                    // HYDRATE current array w/ updated previous values
                    activeItem.current = [...prevArr];
                    return;
                }
            }
        }
    }


    return (
        <div className="section__container hero__container">
            <div className='hero__grid__container'>
                <div className='hero__grid__container__background'></div>
                {
                    updatedItemArray.map((item) => {
                        return (
                            <div key={item.id} id={item.id} ref={boxCustomRef} className='hero__grid__box'>
                                <div id={item.id} className='hero__grid__box--overlay--default hero__grid__box--overlay--notActive' onClick={toggleBoxHandler}></div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    );
}

export default Hero;

#javascript

JavaScript array: Get a random item from an array

function random_item(items)
{
  
return items[Math.floor(Math.random()*items.length)];
     
}

var items = [254, 45, 212, 365, 2543];
console.log(random_item(items));

#javascript #html #css

Nested Tabs with Vanilla JS (Top tabs and nested side tabs)

<!-- CSS -->
   <style>
      .tabbed-content {
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        width: 95%;
        margin: 0 auto;
        margin-left: 20px;
      }

      .tabs-wrapper {
        display: none;
      }

      .tabs-wrapper.current {
        display: inherit;
      }

      .tabs {
        margin: 0;
        padding: 0;
        margin-right: 30px;
        list-style: none;
        display: flex;
        line-height: normal;
      }
      .side.tabs {
        width: 200px;
        float: left;
        display: block;
        margin-top: 0px;
        height: 700px;
        overflow-y: auto;
        overflow-x: hidden;
        background: #f2f2f2;
      }

      /* Individual tab */
      .tab-link {
        color: #fff;
        display: block;
        padding: 15px 25px;
        margin-bottom: 0px;
        background: #c2c2c2;
        cursor: pointer;
        width: 150px;
        text-align: center;
        word-break: break-word;
        letter-spacing: 1.5px;
      }
      .side.tab-link {
        width: 225px;
        text-align: left;
        margin-top: 0px !important;
      }
      .tab-link:hover {
        background: #00693c;
      }
      .tab-link.current {
        background: #00693c;
        color: #fff;
      }
      .tab-content {
        display: none;
        border: 4px solid #cccccc;
        padding: 20px;
        margin: 0;
        float: left;
        min-height: 700px;
        width: 75%;
        box-sizing: border-box;
        position: relative;
      }
      .tab-content.current {
        display: inherit;
      }
    </style>


<!-- HTML FOR THE TABS -->
<div class="tabbed-content">
    <!-- Top Tab Navigation -->
    <ul class="tabs">
        <li class="top-nav tab-link current" data-tab="tides">TIDES</li>
        <li class="top-nav tab-link" data-tab="kentico">Kentico</li>
    </ul>

    <!-- Tabs Wrapper TIDES -->
    <div class="tabs-wrapper current" id="tides">
        <!-- Archive Video -->
        <div class="tab-content current" id="archive">
            <h3>How to Add to the TIDES Feature Archive</h3>
            <p>Small Description here</p>
            <div class="video-wrapper">
                <div class="video-container" id="video-container">
                    <video controls id="video" preload="metadata" width="600" height="400">
                        <source src="../video/2022/Kentico-Staging-Instructions.mp4" type="video/mp4" />
                    </video>
                </div>
            </div>
        </div>

        <!-- Marketing Email Calendar Video -->
        <div class="tab-content" id="calendar">
            <h3>How to Add to the Marketing Email Calendar</h3>
            <p>Small Description here</p>
            <p>Video Here</p>
        </div>

        <!-- TIDES SIDE TAB -->
        <ul class="side tabs">
            <li class="side tab-link current" data-tab="archive">
                How to Add to the TIDES Feature Archive
            </li>
            <li class="side tab-link" data-tab="calendar">
                How to Add to the Marketing Email Calendar
            </li>
        </ul>
    </div>

    <!-- Tabs Wrapper KENTICO -->
    <div class="tabs-wrapper" id="kentico">
        <!-- Kentico Staging Environment Video -->
        <div class="tab-content current" id="kenticoStaging">
            <h3>How to Use the Kentico Staging Environment</h3>
            <p>Small Description here</p>
            <p>Video Here</p>
        </div>

        <!-- Kentico SIDE TAB -->
        <ul class="side tabs">
            <li class="side tab-link current" data-tab="kenticoStaging">
                How to Use the Kentico Staging Environment
            </li>
        </ul>
    </div>
</div>
<!-- JAVASCRIPT FOR THE TABS -->
<script>
    const sideTabs = () => {
      let tabs = document.querySelectorAll(".side .tab-link");
    		let activeTopTab = document.getElementsByClassName("top-nav tab-link current")[0].getAttribute("data-tab");
    
    		tabs.forEach((btn) => {
    			btn.addEventListener("click", () => {
    				let closestTabWraper = btn.closest(".tabs-wrapper");
    		// only want to remove + add classes to sections that are currently visible or active 
    				if(closestTabWraper.id === activeTopTab) {
            //select only btns related to that top tab and remove the current class from all. Adding it back to only the one clicked. 
    					//this accounts for if a button is clicked on itself
    					let visibleTabs = closestTabWraper.querySelectorAll(".side .tab-link")
    					visibleTabs.forEach(b => b.classList.remove("current"));
    					btn.classList.add("current");
    					//Repeat the process for sections, but adding the class to the tabContent that matches the element id of the clicked tab
    					let relatedSections = closestTabWraper.querySelectorAll(".tab-content");
    					relatedSections.forEach(s =>s.classList.remove("current"));
    					let matchingTab = btn.getAttribute("data-tab");
                  document.getElementById(matchingTab).className += " current";
    				}
    			})
    		})
    };
    
    const topTabs = () => {
      const tabs = document.querySelectorAll(".top-nav");
      const tabWrappers = document.querySelectorAll(".tabs-wrapper");
    		tabs.forEach((btn) => {
    			btn.addEventListener("click", () => {
    				tabs.forEach(b => b.classList.remove("current"));
    				btn.classList.add("current");
    				tabWrappers.forEach(t => t.classList.remove("current"));
    				let matchingWrapper = btn.getAttribute("data-tab");
    				document.getElementById(matchingWrapper).classList.add("current");
    			});
    		})
    };
    
    topTabs();
    sideTabs();
</script>

#javascript

Custom canonicals IAI

$(document).ready(function() {
	if(window.location.href === "https://kronos-shop.pl/product-stocks.php?product=12453"){
		$('head').append('<link rel="canonical" href="https://kronos-shop.pl/product-pol-12453-METEOR-Regulowane-Wrotki-Rekreacyjne-ROCKET.html" />');
	}
});

$(document).ready(function() {
  if ((window.location.href.indexOf("utm_source") > -1) || (window.location.href.indexOf("utm_medium") > -1) || (window.location.href.indexOf("utm_campaign") > -1) || (window.location.href.indexOf("utm_term") > -1)) {
    var current_url = jQuery(location).attr('href');
		var url_without_param = current_url.split('?')[0];
		$('head').append('<link rel="canonical" href=" ' + url_without_param +'" />');
  }
});

#javascript

javascript - TypeError: nock(...).persist(...).log is not a function - Stack Overflow

user@local$ DEBUG=nock.* node my_test.js

#javascript

javascript - How to skip over an element in .map()? - Stack Overflow

var sources = images.map(function (img) {
    if(img.src.split('.').pop() === "json"){ // if extension is .json
        return null; // skip
    }
    else{
        return img.src;
    }
}).filter(Boolean);

#javascript

javascript - How to skip over an element in .map()? - Stack Overflow

images.flatMap(({src}) => src.endsWith('.json') ? [] : src);

#javascript

javascript - How to skip over an element in .map()? - Stack Overflow

var sources = images.filter(function(img) {
  if (img.src.split('.').pop() === "json") {
    return false; // skip
  }
  return true;
}).map(function(img) { return img.src; });

#python #javascript

game

<html>

<canvas id="gameCanvas" width="800"height="600"></canvas>

<script>
var canvas;
var canvasContext;
var ballX = 50;
var ballY = 50;
var ballSpeedX = 10;
var ballSpeedY = 4;

var player1Score = 0;
var player2Score = 0;
const WINNING_SCORE = 10;

var showingWinScreen = false;

var paddle1Y = 250;
var paddle2Y = 250;
const PADDLE_THICKNESS = 10;
const PADDLE_HEIGHT = 100;

function calculateMousePos(evt) {
        var rect = canvas.getBoundingClientRect();
        var root = document.documentElement;
        var mouseX = evt.clientX - rect.left - root.scrollLeft;
        var mouseY = evt.clientY - rect.top - root.scrollTop;
        return {
                x:mouseX,
                y:mouseY
          };
}

window.onload = function() {
        canvas = document.getElementById('gameCanvas');
        canvasContext = canvas.getContext('2d');

        var framesPerSecond = 30;
        setInterval(function() {
                moveEverything();
                drawEverything();
         }, 1000/framesPerSecond );

         canvas.addEventListener('mousemove',
                 function(evt) {
                         var mousePos = calculateMousePos(evt);
                         paddle1Y = mousePos.y-(PADDLE_HEIGHT/2);
                 });       
}

function ballReset() {
        if(player1Score >= WINNING_SCORE ||
           player2Score >= WINNING_SCORE) {
                player1Score = 0;
                player2Score = 0;
                showingWinScore = true;
}

        ballSpeedX = -ballSpeedX;
        ballX = canvas.width/2;
        ballY = canvas.height/2;
}

function computerMovement() {
        var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2); 
        if(paddle2YCenter < ballY- 35) {
                paddle2Y += 6;
        } else  if(paddle2YCenter > ballY + 35) {
                paddle2Y -= 6;
        }
}

function moveEverything() {
        if(showingWinScreen) {
                return;
        }
        computerMovement();

        ballX = ballX + ballSpeedX;
        ballY = ballY + ballSpeedY;

        if(ballX < 0) {
                if(ballY > paddle1Y &&
                   ballY < paddle1Y+PADDLE_HEIGHT) {
                        ballSpeedX = -ballSpeedX;
                        
                        var deltaY = ballY
                                -(paddle1Y+PADDLE_HEIGHT/2);
                        ballSpeedY = deltaY * 0.35; 
                } else {
                        player2Score += 1; // must be BEFORE ballReset()
                        ballReset();
                }
        }
        if(ballX > canvas .width) {
                if(ballY > paddle2Y &&
                   ballY < paddle2Y+PADDLE_HEIGHT) {
                        ballSpeedX = -ballSpeedX;
                        var deltaY = ballY
                                -(paddle2Y+PADDLE_HEIGHT/2);
                        ballSpeedY = deltaY * 0.35; 
                } else {
                       player1Score += 1; // must be BEFORE ballReset()
                        ballReset();
                }
        }
        if(ballY < 0) {
                ballSpeedY = -ballSpeedY;
        }
        if(ballY > canvas.height) {
                ballSpeedY = -ballSpeedY;
        }            
}
 
function drawEverything() {
        // next line blanks out the screen with black
        colorRect(0,0,canvas.width,canvas.height,'black');

        if(showingWinScreen) {
                canvasContext.fillStyle = "white";
                canvasContext.fillText("click to continue", 100,100);
                return;
        }

        // this is left player paddle
        colorRect(5,paddle1Y,10,100,'white');

        // this is right computer paddle
        colorRect(785,paddle2Y,
        PADDLE_THICKNESS,PADDLE_HEIGHT, 'white');

        // next line draws the ball
        colorCircle(ballX, ballY, 10, 'white');

        canvasContext.fillText(player1Score, 100,100);
        canvasContext.fillText(player2Score, canvas.width-100,100);
}

function colorCircle(centerX, centerY, radius, drawColor) {
        canvasContext.fillStyle = drawColor;
        canvasContext.beginPath();
        canvasContext.arc(centerX, centerY, radius, 0,Math.PI*2,true);
        canvasContext.fill();       
}

function colorRect(leftX,topY, width,height, drawColor) {
        canvasContext.fillStyle = drawColor;
        canvasContext.fillRect(leftX,topY, width,height, drawColor);
}

</script>


</html>

#javascript

javascript promises

https://www.elementtutorials.com/js/javascript-promises.html

#javascript

javascript callbacks

https://www.elementtutorials.com/js/javascript-callbacks.html

#javascript

javascript async await

https://www.elementtutorials.com/js/javascript-asyc-await.html

#javascript

javascript history

https://www.elementtutorials.com/js/javascript-history.html

#javascript

javascript location

https://www.elementtutorials.com/js/javascript-location.html

#javascript

Javascript window

https://www.elementtutorials.com/js/javascript-window.html

#javascript

javascript screen

https://www.elementtutorials.com/js/javascript-screen.html

#javascript

Javscript popup alert

https://www.elementtutorials.com/js/javascript-popup-alert.html

#javascript

javascript timing

https://www.elementtutorials.com/js/javascript-timing.html

#javascript

javascript dom nodes

https://www.elementtutorials.com/js/javascript-dom-nodes.html

#javascript

javascript dom navigation

https://www.elementtutorials.com/js/javascript-dom-navigation.html

#javascript

javascript dom event listner

https://www.elementtutorials.com/js/javascript-dom-event-listner.html

#javascript

javascript dom document

https://www.elementtutorials.com/js/javascript-dom-document.html

#javascript

javascript dom elements

https://www.elementtutorials.com/js/javascript-dom-elements.html

#javascript

javascript dom methods

https://www.elementtutorials.com/js/javascript-dom-methods.html

#javascript

javascript object accessors

https://www.elementtutorials.com/js/javascript-object-accessors.html

#javascript

javascript object constructors

https://www.elementtutorials.com/js/javascript-object-constructors.html

#javascript

javascript object prototypes

https://www.elementtutorials.com/js/javascript-object-prototypes.html

#javascript

javascript object properties

https://www.elementtutorials.com/js/javascript-object-properties.html

#javascript

javascript object methods

https://www.elementtutorials.com/js/javascript-object-methods.html

#javascript

javascript object display

https://www.elementtutorials.com/js/javascript-object-display.html

#javascript

javascript classes

https://www.elementtutorials.com/js/javascript-classes.html

#javascript

javascript while loop

https://www.elementtutorials.com/js/javascript-while-loop.html

#javascript

javascript loops

https://www.elementtutorials.com/js/javascript-loops.html

#javascript

Javascript conditions

https://www.elementtutorials.com/js/javascript-conditions.html

#javascript

javascript booleans

https://www.elementtutorials.com/js/javascript-booleans.html

#javascript

Javascript random

https://www.elementtutorials.com/js/javascript-random.html

#javascript

javascript math

https://www.elementtutorials.com/js/javascript-math.html

#javascript

javascript date formets

https://www.elementtutorials.com/js/javascript-date-formats.html

#javascript

Javascript dates

https://www.elementtutorials.com/js/javascript-dates.html

#javascript

Javascript number methods

https://www.elementtutorials.com/js/javascript-number-methods.html

#javascript

Javascript numbers

https://www.elementtutorials.com/js/javascript-numbers.html

#javascript

Jaascript array methods

https://www.elementtutorials.com/js/javascript-arrays-methods.html

#javascript

Javscript arrays

https://www.elementtutorials.com/js/javascript-arrays.html

#javascript

javascript events

https://www.elementtutorials.com/js/javascript-events.html

#javascript

Javascript objects

https://www.elementtutorials.com/js/javascript-objects.html

#javascript

Javascript string meathods

https://www.elementtutorials.com/js/javascript-string-methods.html

#javascript

Javascript strings

https://www.elementtutorials.com/js/javascript-strings.html

#javascript #xpath #absolutexpath

Get the absolute XPath for a given Selenium WebElement

function getAbsoluteXPath(element) {
    var comp, comps = [];
    var parent = null;
    var xpath = '';
    var getPos = function(element) {
        var position = 1,
            curNode;
        if (element.nodeType == Node.ATTRIBUTE_NODE) {
            return null;
        }
        for (curNode = element.previousSibling; curNode; curNode = curNode.previousSibling) {
            if (curNode.nodeName == element.nodeName) {
                ++position;
            }
        }
        return position;
    };

    if (element instanceof Document) {
        return '/';
    }

    for (; element && !(element instanceof Document); element = element.nodeType == Node.ATTRIBUTE_NODE ? element.ownerElement : element.parentNode) {
        comp = comps[comps.length] = {};
        switch (element.nodeType) {
            case Node.TEXT_NODE:
                comp.name = 'text()';
                break;
            case Node.ATTRIBUTE_NODE:
                comp.name = '@' + element.nodeName;
                break;
            case Node.PROCESSING_INSTRUCTION_NODE:
                comp.name = 'processing-instruction()';
                break;
            case Node.COMMENT_NODE:
                comp.name = 'comment()';
                break;
            case Node.ELEMENT_NODE:
                comp.name = element.nodeName;
                break;
        }
        comp.position = getPos(element);
    }

    for (var i = comps.length - 1; i >= 0; i--) {
        comp = comps[i];
        xpath += '/' + comp.name.toLowerCase();
        if (comp.position !== null) {
            xpath += '[' + comp.position + ']';
        }
    }
    return xpath;
}

#javascript

Javascript datatypes

https://www.elementtutorials.com/js/javascript-datatypes.html

#javascript

Javascript functions

https://www.elementtutorials.com/js/javascript-functions.html

#javascript

Javscript arithamatic

https://www.elementtutorials.com/js/javascript-arithmatic.html

#javascript

Javascript assignments

https://www.elementtutorials.com/js/javascript-assignments.html

#javascript

Javscript operators

https://www.elementtutorials.com/js/javascript-operators.html

#javascript

javscript let

https://www.elementtutorials.com/js/javascript-let.html

#javascript

javascript const

https://www.elementtutorials.com/js/javascript-const.html

#javascript

javascript const

https://www.elementtutorials.com/js/javascript-const.html

#javascript

Javascript variables

https://www.elementtutorials.com/js/javascript-variables.html

#javascript

Javascript comments

https://www.elementtutorials.com/js/javascript-comments.html

#javascript

javascript statements

https://www.elementtutorials.com/js/javascript-statements.html

#javascript

JavaScript

https://www.elementtutorials.com/js/javascript-output.html

#javascript

JavaScript Syntax

https://www.elementtutorials.com/js/javascript-syntax.html

#javascript

javascript - How to perform a real time search and filter on a HTML table - Stack Overflow

<input id='myInput' onkeyup='searchTable()' type='text'>

<table id='myTable'>
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

<script>
function searchTable() {
    var input, filter, found, table, tr, td, i, j;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        for (j = 0; j < td.length; j++) {
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                found = true;
            }
        }
        if (found) {
            tr[i].style.display = "";
            found = false;
        } else {
            tr[i].style.display = "none";
        }
    }
}
</script>

#javascript

How to store fetch response in javascript variable - Stack Overflow

async function fun() {
  return fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
}

const data  = await fun();

#javascript

javascript - How to call API, looping over axios.get() adding ?offset=<param> and exit loop? - Stack Overflow

const axios = require('axios')

let results = []
let baseURL = "https://api.airtable.com/v0/baseid/tablename"
let headers = { authorization: "Bearer " + 'yourkey' }
let params = { pageSize: 100}

axios({
    baseURL: baseURL,
    headers: headers,
    params: params
}).then(res =>  { results.push(...res.data.records)
    params.offset = res.data.offset
        const axcall = () => { axios({
            baseURL: baseURL,
            headers: headers,
            params: params }
            ).then( 
                res =>  { results.push(...res.data.records)
                    params.offset = res.data.offset

                    if (res.data.offset !== undefined) {
                    return axcall() }
                    else { // after all calls ends
                      console.log(results)
                    }
                }
            ).catch(e => console.log(e))
            }
            axcall()
}).catch(e => console.log(e) );

#javascript

javascript - Reducing duplicate characters in a string to a given minimum - Stack Overflow

(.) //match any character
\1 //if it follow by the same character
+{2 //more than 1 times
/g //global
$1 //is 1 time by $1$1 is 2 times 

     reduceString('aaaabbbb', 2) 
     reduceString('xaaabbbb', 2) 
            reduceString('aaaabbbb', 1)     
            reduceString('aaxxxaabbbb', 2) 

            function reduceString(txt,num)
            {
                var canRepeat=['$1'];
               for (i=1;i<num;i++)
               {
                  canRepeat.push('$1')
               }
                canRepeat = canRepeat.join('');

                console.log(txt.replace(/(.)\1{2,}/g, canRepeat))

            }

#javascript

javascript - Reducing duplicate characters in a string to a given minimum - Stack Overflow

var reduceString = function (str, amount) {
    var re = new RegExp("(.)(?=\\1{" + amount + "})","g");
    return str.replace(re, "");
}

#jquery #css #html #javascript #java #python

Jquery Tutorial

<!DOCTYPE html>  
<html>  
<head>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
 </script>  
 <script type="text/javascript" language="javascript">  
 $(document).ready(function() {  
 $("h1").css("color", "red");  
 });  
 </script>  
 </head>  
<body>  
<h1>This is first paragraph.</h1>  
<p>This is second paragraph.</p>  
<p>This is third paragraph.</p>  
</body>  
</html>

#javascript

Javascript Output

https://elementtutorials.com/js/javascript-output.html

#javascript

JavaScript Tutorial

https://elementtutorials.com/js/javascript-tutorial.html

#javascript #css

css - How to add multiple font files for the same font? - Stack Overflow

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

#javascript

Types from both keys and values of object in Typescript

const KeyToVal = {
    MyKey1: 'myValue1',
    MyKey2: 'myValue2',
} as const;

type Keys = keyof typeof KeyToVal;
type Values = typeof KeyToVal[Keys]; //  "myValue1" | "myValue2"

#html #css #javascript #java #python #jquery

Java Tutorial

public class Simba{
	public static void main(String args[]){
	System.out.println("Hello Element Tutorials");
	}}

#html #css #javascript #java #python #jquery

PHP Tutorial

<?php
  $myVar = 'red';
  
  switch ($myVar) {
      case 'red':
          echo 'It is red';
          break;
      case 'blue':
          echo 'It is blue';
          break;
      case 'green':
          echo 'It is green';
          break;
  }
  ?>

#html #css #javascript #java #python #jquery

Bootstrap Tutorial

<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

#html #css #javascript #java #python #jquery

jQuery Tutorial

<!DOCTYPE html>  
<html>  
<head>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
 </script>  
 <script type="text/javascript" language="javascript">  
 $(document).ready(function() {  
 $("h1").css("color", "red");  
 });  
 </script>  
 </head>  
<body>  
<h1>This is first paragraph.</h1>  
<p>This is second paragraph.</p>  
<p>This is third paragraph.</p>  
</body>  
</html>

#html #css #javascript #java #python #jquery

JavaScript Tutorial

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript can change HTML content</h1>

<p id="one">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("one").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

#html #css #javascript #java #python #jquery

CSS Tutorial

<!DOCTYPE html>
  <html>
  <head>
  <style>
  body {
    background-color: lightpink;
  }
  
  h1 {
    color: yellow;
    text-align: center;
  }
  
  p {
    font-family: roboto;
    font-size: 27px;
  }
  </style>
  </head>
  <body>
  
  <h1>My First CSS Example</h1>
  <p>This is a paragraph.</p>
  
  </body>
  </html>

#html #css #javascript #java #python #jquery

HTML Tutorial for Beginners

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

#html #css #javascript #java #python #sass

HTML table Tag

<!DOCTYPE html>
<html>
<head>
<title>HTML table Tag</title>
<style type="text/css">
    table, td, th {
        border: 1px solid red;
    }
</style>
</head>
<body>
    <table>
        <caption>User Details</caption>
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Alura</td>
                <td>alura@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>John</td>
                <td>john@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Milinda</td>
                <td>milida@mail.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

#html #css #java #javascript #php #sass #bootstrap

HTML sub Tag

https://elementtutorials.com/ref/sub.html

#html #css #javascript #php #python #sass

HTML style Tag

<!DOCTYPE html>
<html>
<head>
    <title>HTML style tag</title>
    <style type="text/css">
        h1 { color: red; }
        p { color: yellow; }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

#html #css #java #javascript #php #sass

HTML abbr Tag

http://www.elementtutorials.com//ref/abbr.html

#elementtutorials #ht #css #java #javascript #php #sass #jquery #python

element Tutorials

https://elementtutorials.com/

#javascript

Reading files with Node.js Async

const fs = require('fs')


try {
  const data = fs.readFileSync('/Users/joe/test.txt', 'utf8')
  console.log(data)
} catch (err) {
  console.error(err)
}

#javascript

Reading files with Node.js

const fs = require('fs')


fs.readFile('/Users/joe/test.txt', 'utf8' , (err, data) => {
  if (err) {
    console.error(err)
    return
  }
  console.log(data)
})

#javascript

Script include: CW_TestCMNLoc

var CW_TestCMNLoc = Class.create();
CW_TestCMNLoc.prototype = Object.extendsObject(AbstractAjaxProcessor, {
	
	getcmnlocentry: function(){
		
		var gr_sys_id = this.getParameter('sysparm_gr_id');
		var table_name = this.getParameter('sysparm_table_name');
		
		var gr = new GlideRecord(table_name);
		gr.addQuery("group.sys_id", "CONTAINS", gr_sys_id);
		gr.query();
		if(gr.next()){
			return true;
		}else{
			return false;
		}
		
	},
	
	
	type: 'CW_TestCMNLoc'
});

#javascript

Email script: cc notifiction

email.addAddress("cc","jv.coquia@costco.com","Joseph Coquia");
email.addAddress("cc","sharon.wagner@costco.com","Sharon Wagner");
email.addAddress("cc","is-iseriesturnoversupport@costco.com","iSeries Turnover Support");

#javascript

Email script: ZCMD reminder to director

(function runMailScript(current, template, email, email_action, event) {
	var user = new GlideRecord('sys_user');
	user.addEncodedQuery('user_name=' + current.sys_created_by);
	user.query();
	while (user.next()){
	email.addAddress("to", user.email,user.name);
	template.print(user.name);
	email_action.recipient_users += user.sys_id+",";	
	}
})(current, template, email, email_action, event);

#javascript

Email script: cw_incident_caller_new_main

(function runMailScript(current, template, email, email_action, event) {


    var sub = gs.getMessage("Incident {0} has been opened for you", current.getValue('number'));

    email.setSubject(sub);

    var incLink = current.getLink();
    var href = '<a href="' + incLink + '" target="_blank">' + current.getValue('number') + '</a>';

var openingLine = gs.getMessage("The incident, {0} - {1}, has been opened for you and is being reviewed ", [href, current.getValue('short_description')]);
var openingLine2 = '<a href="' + gs.getProperty('glide.servlet.uri') + 'sp?id=ticket&table=' + current.sys_class_name + '&sys_id=' + current.sys_id + '">Click Here</a>';  
    
    template.print(openingLine);
	template.print('To resolve or view your incident ' + openingLine2);
	

})(current, template, email, email_action, event);

#javascript

Email script: CW - Notification: Feedback Task Resolved

//Per STRY0188791 - Created from the OOB email script,CW - Notification: Feedback Task Resolved, sys_id = 1fa9b3cb67330300d358bb2d07415a43
(function runMailScript( /* GlideRecord */ current, /* TemplatePrinter */ template,
    /* Optional EmailOutbound */
    email, /* Optional GlideRecord */ email_action,
    /* Optional GlideRecord */
    event) {

    var portal = gs.getProperty("sn_km_portal.glide.knowman.serviceportal.portal_url", 'kb');

    template.print("Hi " + current.opened_by.first_name + ",<br/>");
    template.print("<br/>");
    template.print("The feedback you submitted, ");
    template.print("<a href='" + gs.getProperty('glide.servlet.uri') + portal + "?id=form&table=kb_feedback_task&sys_id=" + current.sys_id + "'>" + current.number + "</a>");
    template.print(" for ");
    template.print("<a href='" + gs.getProperty('glide.servlet.uri') + "kb_knowledge.do?sys_id=" + current.feedback.article + "'>" + current.feedback.article.getDisplayValue() + "</a>" + " was resolved. Please review and accept.");
    template.print("<br/><br/>" + "Close notes: ${current.close_notes}");

})(current, template, email, email_action, event);

#javascript

Email Script: CW - Notification: Feedback Resolved

(function runMailScript( /* GlideRecord */ current, /* TemplatePrinter */ template,
    /* Optional EmailOutbound */
    email, /* Optional GlideRecord */ email_action,
    /* Optional GlideRecord */
    event) {

    var portal = gs.getProperty("sn_km_portal.glide.knowman.serviceportal.portal_url", 'kb');

    template.print("Hi " + current.user.getDisplayValue() + ",<br/><br/>");

    template.print("The feedback you submitted, ");
    template.print("<a href='" + gs.getProperty('glide.servlet.uri') + portal + "?id=form&table=kb_feedback&sys_id=" + current.sys_id + "'>" +
        current.u_feedback_number + "</a>");
    template.print(", for ");
 
    template.print("<a href='" + gs.getProperty('glide.servlet.uri') + "kb_knowledge.do?sys_id=" + current.article + "'>" + current.article.getDisplayValue() + "</a>" + " was resolved. Please review and accept.");
	
    template.print("<br/><br/>" + "Work notes: ${current.work_notes}");

})(current, template, email, email_action, event);

#javascript

Email script: ZCMD_cc_notification

email.addAddress("cc","jv.coquia@costco.com","Joseph Coquia");
email.addAddress("cc","sharon.wagner@costco.com","Sharon Wagner");
email.addAddress("cc","is-iseriesturnoversupport@costco.com","iSeries Turnover Support");

#javascript #file #choosefilesystementries #showopenfilepicker #filereader #blob

FileBin

/**
 * ## FileBin
 * A little library for dealing with file objects
 *
 * Best to use the methods directoryOpen(), fileOpen(), and fileSave()
 * as these methods ensure the use of the File System Access API is used
 * either the latest version or the legacy one.
 *
 * If the File System Access API isn't supported by the client's browser
 * it will then fallback to using the old-school hacks for opening and
 * saving files and directories.
 */
const handler = new function FileBin () {
    let self = this;

    /**
     * Returns whether the File System Access API is supported and usable in the
     * current context (for example cross-origin iframes).
     * @returns {boolean} Returns `true` if the File System Access API is supported and usable, else returns `false`.
     */
    const supported = (() => {
        if ('top' in self && self !== top) {
            try {
                // This will succeed on same-origin iframes,
                // but fail on cross-origin iframes.
                top.location + '';
            } catch {
                return false;
            }
        } else if ('chooseFileSystemEntries' in self) {
            return 'chooseFileSystemEntries';
        } else if ('showOpenFilePicker' in self) {
            return 'showOpenFilePicker';
        }
        return false;
    })();

    FileBin.prototype.getFiles = async (dirHandle, recursive, path = dirHandle.name) => {
        const dirs = [];
        const files = [];
        for await (const entry of dirHandle.values()) {
            const nestedPath = `${path}/${entry.name}`;
            if (entry.kind === 'file') {
                files.push(
                    entry.getFile().then((file) => {
                        file.directoryHandle = dirHandle;
                        return Object.defineProperty(file, 'webkitRelativePath', {
                            configurable: true,
                            enumerable: true,
                            get: () => nestedPath,
                        });
                    })
                );
            } else if (entry.kind === 'directory' && recursive) {
                dirs.push(self.getFiles(entry, recursive, nestedPath));
            }
        }
        return [...(await Promise.all(dirs)).flat(), ...(await Promise.all(files))];
    };

    FileBin.prototype.getFilesLegacy = async (dirHandle, recursive, path = dirHandle.name) => {
        const dirs = [];
        const files = [];
        for await (const entry of dirHandle.getEntries()) {
            const nestedPath = `${path}/${entry.name}`;
            if (entry.isFile) {
                files.push(
                    entry.getFile().then((file) => {
                        file.directoryHandle = dirHandle;
                        return Object.defineProperty(file, 'webkitRelativePath', {
                            configurable: true,
                            enumerable: true,
                            get: () => nestedPath,
                        });
                    })
                );
            } else if (entry.isDirectory && recursive) {
                dirs.push(self.getFilesLegacy(entry, recursive, nestedPath));
            }
        }
        return [...(await Promise.all(dirs)).flat(), ...(await Promise.all(files))];
    };

    /**
     * Opens a directory from disk using the (legacy) File System Access API.
     */
    FileBin.prototype.openDirLegacy = async (options = {}) => {
        options.recursive = options.recursive || false;
        const handle = await window.chooseFileSystemEntries({
            type: 'open-directory',
        });
        return self.getFilesLegacy(handle, options.recursive);
    };

    /**
     * Opens a directory from disk using the File System Access API.
     */
    FileBin.prototype.openDir = async (options = {}) => {
        options.recursive = options.recursive || false;
        const handle = await window.showDirectoryPicker();
        return self.getFiles(handle, options.recursive);
    };

    FileBin.prototype.getFileWithHandle = async (handle) => {
        const file = await handle.getFile();
        file.handle = handle;
        return file;
    };

    /**
     * Opens a file from disk using the (legacy) File System Access API.
     */
    FileBin.prototype.openFileLegacy = async (options = {}) => {
        const handleOrHandles = await window.chooseFileSystemEntries({
            accepts: [
                {
                    description: options.description || '',
                    mimeTypes: options.mimeTypes || ['*/*'],
                    extensions: options.extensions || [''],
                },
            ],
            multiple: options.multiple || false,
        });
        if (options.multiple) {
            return Promise.all(handleOrHandles.map(self.getFileWithHandle));
        }
        return self.getFileWithHandle(handleOrHandles);
    };

    /**
     * Opens a file from disk using the File System Access API.
     */
    FileBin.prototype.openFile = async (options = {}) => {
        const accept = {};
        if (options.mimeTypes) {
            options.mimeTypes.map((mimeType) => {
                accept[mimeType] = options.extensions || [];
            });
        } else {
            accept['*/*'] = options.extensions || [];
        }
        const handleOrHandles = await window.showOpenFilePicker({
            types: [
                {
                    description: options.description || '',
                    accept: accept,
                },
            ],
            multiple: options.multiple || false,
        });
        const files = await Promise.all(handleOrHandles.map(self.getFileWithHandle));
        if (options.multiple) {
            return files;
        }
        return files[0];
    };

    /**
     * Saves a file to disk using the (legacy) File System Access API.
     */
    FileBin.prototype.saveFileLegacy = async (blob, options = {}, handle = null) => {
        options.fileName = options.fileName || 'Untitled';
        handle =
            handle ||
            (await window.chooseFileSystemEntries({
                type: 'save-file',
                accepts: [
                    {
                        description: options.description || '',
                        mimeTypes: [blob.type],
                        extensions: options.extensions || [''],
                    },
                ],
            }));
        const writable = await handle.createWritable();
        await writable.write(blob);
        await writable.close();
        return handle;
    };

    /**
     * Saves a file to disk using the File System Access API.
     */
    FileBin.prototype.saveFile =  async (
        blob,
        options = {},
        existingHandle = null,
        throwIfExistingHandleNotGood = false
    ) => {
        options.fileName = options.fileName || 'Untitled';
        const accept = {};
        if (options.mimeTypes) {
            options.mimeTypes.push(blob.type);
            options.mimeTypes.map((mimeType) => {
                accept[mimeType] = options.extensions || [];
            });
        } else {
            accept[blob.type] = options.extensions || [];
        }
        if (existingHandle) {
            try {
                // Check if the file still exists.
                await existingHandle.getFile();
            } catch (err) {
                existingHandle = null;
                if (throwIfExistingHandleNotGood) {
                    throw err;
                }
            }
        }
        const handle =
            existingHandle ||
            (await window.showSaveFilePicker({
                suggestedName: options.fileName,
                types: [
                    {
                        description: options.description || '',
                        accept: accept,
                    },
                ],
            }));
        const writable = await handle.createWritable();
        await writable.write(blob);
        await writable.close();
        return handle;
    };

    /**
     * Saves a file to disk using the legacy hidden anchor method.
     */
    FileBin.prototype.legacySave = async (blob, options = {}) => {
        const a = document.createElement('a');
        a.download = options.fileName || 'Untitled';
        a.href = URL.createObjectURL(blob);
        a.addEventListener('click', () => {
            // `setTimeout()` due to
            // https://github.com/LLK/scratch-gui/issues/1783#issuecomment-426286393
            setTimeout(() => URL.revokeObjectURL(a.href), 30 * 1000);
        });
        a.click();
    };

    /**
     * Opens a file from disk using the legacy input click method.
     */
    FileBin.prototype.legacyOpen = async (options = {}) => {
        return new Promise((resolve, reject) => {
            const input = document.createElement('input');
            input.type = 'file';
            const accept = [
                ...(options.mimeTypes ? options.mimeTypes : []),
                options.extensions ? options.extensions : [],
            ].join();
            input.multiple = options.multiple || false;
            // Empty string allows everything.
            input.accept = accept || '';

            let cleanupListenersAndMaybeReject;
            const rejectionHandler = () => cleanupListenersAndMaybeReject(reject);
            if (options.setupLegacyCleanupAndRejection) {
                cleanupListenersAndMaybeReject =
                    options.setupLegacyCleanupAndRejection(rejectionHandler);
            } else {
                // Default rejection behavior; works in most cases, but not in Chrome in non-secure contexts.
                cleanupListenersAndMaybeReject = (reject) => {
                    window.removeEventListener('pointermove', rejectionHandler);
                    window.removeEventListener('pointerdown', rejectionHandler);
                    window.removeEventListener('keydown', rejectionHandler);
                    if (reject) {
                        reject(new DOMException('The user aborted a request.', 'AbortError'));
                    }
                };

                window.addEventListener('pointermove', rejectionHandler);
                window.addEventListener('pointerdown', rejectionHandler);
                window.addEventListener('keydown', rejectionHandler);
            }

            input.addEventListener('change', () => {
                cleanupListenersAndMaybeReject();
                resolve(input.multiple ? Array.from(input.files) : input.files[0]);
            });

            input.click();
        });
    };

    /**
     * Reads the text content from a file. If reader.text()
     * is not available then uses FileReader as a fallback.
     */
    FileBin.prototype.readFile = (file) => {
        if (file.text) {
            return file.text();
        }
        return self.readFileLegacy(file);
    }

    /**
     * Reads the text content from a file.
     */
    FileBin.prototype.readFileLegacy = (file) => {
        return new Promise((resolve) => {
            const reader = new FileReader();
            reader.addEventListener('loadend', (e) => {
                const text = e.target.result;
                resolve(text);
            });
            reader.readAsText(file);
        });
    }

    /**
     * Opens a directory from disk using the legacy input click method.
     */
    FileBin.prototype.legacyOpenDir = async (options = {}) => {
        options.recursive = options.recursive || false;
        return new Promise((resolve, reject) => {
            const input = document.createElement('input');
            input.type = 'file';
            input.webkitdirectory = true;

            let cleanupListenersAndMaybeReject;
            const rejectionHandler = () => cleanupListenersAndMaybeReject(reject);
            if (options.setupLegacyCleanupAndRejection) {
                cleanupListenersAndMaybeReject =
                    options.setupLegacyCleanupAndRejection(rejectionHandler);
            } else {
                // Default rejection behavior; works in most cases, but not in Chrome in non-secure contexts.
                cleanupListenersAndMaybeReject = (reject) => {
                    window.removeEventListener('pointermove', rejectionHandler);
                    window.removeEventListener('pointerdown', rejectionHandler);
                    window.removeEventListener('keydown', rejectionHandler);
                    if (reject) {
                        reject(new DOMException('The user aborted a request.', 'AbortError'));
                    }
                };

                window.addEventListener('pointermove', rejectionHandler);
                window.addEventListener('pointerdown', rejectionHandler);
                window.addEventListener('keydown', rejectionHandler);
            }

            input.addEventListener('change', () => {
                cleanupListenersAndMaybeReject();
                let files = Array.from(input.files);
                if (!options.recursive) {
                    files = files.filter((file) => {
                        return file.webkitRelativePath.split('/').length === 2;
                    });
                }
                resolve(files);
            });

            input.click();
        });
    };


    FileBin.prototype.fileRead = async (file) => {
        return await self.readFile(file);
    }

    const openDirMethod = !supported ? self.legacyOpenDir
        : supported === 'chooseFileSystemEntries'
            ? self.openDirLegacy
            : self.openDir;

    FileBin.prototype.directoryOpen = async (...args) => {
        return await openDirMethod(...args);
    }

    const openFileMethod = !supported
        ? self.legacyOpen
        : supported === 'chooseFileSystemEntries'
            ? self.openFileLegacy
            : self.openFile;

    FileBin.prototype.fileOpen = async (...args) => {
        return await openFileMethod(...args);
    }

    const saveFileMethod = !supported
        ? self.legacySave
        : supported === 'chooseFileSystemEntries'
            ? self.saveFileLegacy
            : self.saveFile;

    FileBin.prototype.fileSave = async (...args) => {
        return await saveFileMethod(...args);
    }

}();
 Save

#javascript #modal #alert #prompt #confirm

ModalDialog Web Component

/**
 * ## ModalDialog Web Component
 * Custom dialog components using a Promise-based modal for user interaction.
 *
 * ## Example:
 * ```
 * // Replace the native javascript functions
 * const alert   = modal.alert,
 *       prompt  = modal.prompt,
 *       confirm = modal.confirm;
 *
 * let reset = async () => {
 *     let result = await confirm("Are you sure you want to reset the application? <br /><br /> This will erase all your saved data and cannot be undone.", "Reset Application?");
 *     if (result === true) {
 *         let done = await resetFunction();
 *         if (done) {
 *             alert("This application has been successfully reset!", "Finished!");
 *         } else {
 *             alert("Something went wrong! You're settings remain unchanged.", "Unexpected Error!");
 *         }
 *     } else if (result === false) {
 *         alert("This application was not reset! You're settings remain unchanged", "Reset Canceled!");
 *     }
 * }
 * ```
 */
class ModalDialogElement extends HTMLElement {

    constructor() {
        super();
        this.build();
    }

    /**
     * Assigns and builds the dialog
     */
    build() {
        this.attachShadow({ mode: "open" });
        const modalDialog = document.createElement("div");
        modalDialog.classList.add("modal-dialog-window");

        const dialogElement = document.createElement("div");
        const dialogHeader = document.createElement("div");
        const dialogBody = document.createElement("div");
        const dialogFooter = document.createElement("div");

        dialogElement.classList.add("modal-dialog");
        dialogHeader.classList.add("modal-dialog-header");
        dialogBody.classList.add("modal-dialog-body");
        dialogFooter.classList.add("modal-dialog-footer");
        dialogBody.append(document.createElement("p"));
        dialogElement.append(dialogHeader, dialogBody, dialogFooter);
        modalDialog.append(dialogElement);

        const style = document.createElement("style");
        style.textContent = this.setStyle();
        this.shadowRoot.append(style, modalDialog);
    }

    /**
     * Returns the CSS styles for the modal dialogs.
     * @param {string} cssPadding the amount of padding for the modal
     */
    setStyle(cssPadding= '1em') {
        const padding = cssPadding;
        return `
      .modal-dialog-window {
        user-select: none;
        font-family: inherit;
        font-size: inherit;
        z-index: 999;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: auto;
        position: fixed;
        top: 0;
        left: 0;
      }
      
      .modal-dialog {
        width: calc(100% - 2em);
        max-width: 400px;
        overflow: hidden;
        box-sizing: border-box;
        box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.5);
        border-radius: 0.3em;
        animation: modal-dialog-show 265ms cubic-bezier(0.18, 0.89, 0.32, 1.28)
      }
      
      .modal-dialog.modal-dialog-hide {
        opacity: 0;
        animation: modal-dialog-hide 265ms ease-in;
      }
      
      @keyframes modal-dialog-show {
        0% {
          opacity: 0;
          transform: translateY(-100%);
        }
        100% {
          opacity: 1;
          transform: translateX(0);
        }
      }
      
      @keyframes modal-dialog-hide {
        0% {
          opacity: 1;
          transform: translateX(0);
        }
        100% {
          opacity: 0;
          transform: translateY(-50%);
        }
      }
      
      .modal-dialog-header {
        font-family: inherit;
        font-size: 1.25em;
        color: inherit;
        background-color: rgba(0, 0, 0, 0.05);
        padding: 1em;
        border-bottom: solid 1px rgba(0, 0, 0, 0.15);
      }
      
      .modal-dialog-body {
        color: inherit;
        padding: ${padding};
      }
      
      .modal-dialog-body > p {
        color: inherit;
        padding: 0;
        margin: 0;
      }
            
      .modal-dialog .error {
        color: #db2828;
      }

      .modal-dialog .success {
        color: #21ba45;
      }

      .modal-dialog .info {
        color: #31ccec;
      }
                  
      .modal-dialog .warning {
        color: #f2c037;
      }
      
      .modal-dialog-footer {
        color: inherit;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: stretch;
      }
      
      .modal-dialog-button {
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        background-color: rgba(0, 0, 0, 0);
        width: 100%;
        padding: 1em;
        border: none;
        border-top: solid 1px rgba(0, 0, 0, 0.15);
        outline: 0;
        border-radius: 0px;
        transition: background-color 225ms ease-out;
      }
      
      .modal-dialog-button:focus {
        background-color: rgba(0, 0, 0, 0.05);
      }
      
      .modal-dialog-button:active {
        background-color: rgba(0, 0, 0, 0.15);
      }
      
      .modal-dialog-input {
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        width: 100%;
        padding: 0.5em;
        border: solid 1px rgba(0, 0, 0, 0.15);
        margin-top: ${padding};
        outline: 0;
        box-sizing: border-box;
        border-radius: 0;
        box-shadow: 0 0 0 0 rgba(13, 134, 255, 0.5);
        transition: box-shadow 125ms ease-out, border 125ms ease-out;
      }
      
      .modal-dialog-input:focus {
        border: solid 1px rgba(13, 134, 255, 0.8);
        box-shadow: 0 0 0.1em 0.2em rgba(13, 134, 255, 0.5);
      }
      
      @media (prefers-color-scheme: dark) {
        .modal-dialog-window {
          background-color: rgba(31, 31, 31, 0.5);
        }
        
        .modal-dialog {
          color: #f2f2f2;
          background-color: #464646;
        }
        
        .modal-dialog-input {
          background-color: #2f2f2f;
        }
      }
      
      @media (prefers-color-scheme: light) {
        .modal-dialog-window {
          background-color: rgba(221, 221, 221, 0.5);
        }
        
        .modal-dialog {
          color: #101010;
          background-color: #ffffff;
        }
      }
    `;
    }

    /**
     * Creates a dialog with the specified content and optional title header.
     * @param {string} content the message to alert the client
     * @param {string} title optional title for the dialog modal
     */
    createDialog(content, title= undefined) {
        const dialogHeader = this.shadowRoot.querySelector(".modal-dialog-header");
        const dialogBody = this.shadowRoot.querySelector(".modal-dialog-body > p");
        dialogBody.innerHTML = content;
        if (title === undefined) {
            dialogHeader.remove();
        }
        else {
            dialogHeader.innerHTML = title;
        }
    }

    /**
     * Removes a dialog after listening for the 'animationend' event to trigger
     */
    disposeDialog() {
        const self = this;
        const dialogElement = self.shadowRoot.querySelector(".modal-dialog");
        dialogElement.classList.add("modal-dialog-hide");
        dialogElement.addEventListener("animationend", function dialogElementAnimationEnd(event) {
            if (event.animationName === "modal-dialog-hide") {
                dialogElement.removeEventListener("animationend", dialogElementAnimationEnd);
                self.remove();
            }
        });
    }
}

/**
 * Promised-based alert dialog
 */
class AlertModalDialog extends ModalDialogElement {

    constructor() {
        super();
        this.setDefault()
    }

    /**
     * Sets the default values for the modal dialog
     */
    setDefault() {
        let content = this.dataset.content;
        let title = this.dataset.title;
        if (typeof content === "undefined") {
            return;
        }
        if (typeof title === "undefined") {
            title = null;
        }
        this.setAlert(content, title);
    }

    /**
     * Creates an alert dialog modal that waits for user interaction.
     * @param {string} content the message to alert the client
     * @param {string} title optional title for the dialog modal
     * @returns {Promise<boolean>}
     */
    setAlert(content, title) {
        const self = this;
        self.createDialog(content, title);
        const dialogFooterElm = self.shadowRoot.querySelector(".modal-dialog-footer");
        const dialogConfirmBtn = document.createElement("button");
        dialogConfirmBtn.classList.add("modal-dialog-button");
        dialogConfirmBtn.innerText = "OK";
        dialogFooterElm.append(dialogConfirmBtn);
        dialogConfirmBtn.focus();
        return new Promise(function (resolve) {
            dialogConfirmBtn.addEventListener("click", function dialogConfirmBtnClick() {
                dialogConfirmBtn.removeEventListener("click", dialogConfirmBtnClick);
                self.disposeDialog();
                resolve(true);
            });
        });
    }
}

// Declare the custom alert modal dialog element as a web component
customElements.define("modal-alert", AlertModalDialog);

class ConfirmModalDialog extends ModalDialogElement {

    constructor() {
        super();
        this.setDefault();
    }

    /**
     * Sets the default values for the modal dialog
     */
    setDefault() {
        let content = this.dataset.content;
        let title = this.dataset.title;
        if (typeof content === "undefined") {
            return;
        }
        if (typeof title === "undefined") {
            title = null;
        }
        this.setConfirm(content, title);
    }

    /**
     * Creates a confirm dialog modal that waits for user interaction.
     * @param {string} condition the message inquiry for the client 
     * @param {string} title optional title for the dialog modal
     * @returns {Promise<boolean>}
     */
    setConfirm(condition, title) {
        const self = this;
        self.createDialog(condition, title);
        const dialogFooter = self.shadowRoot.querySelector(".modal-dialog-footer");
        const dialogBtnCancel = document.createElement("button");
        const dialogBtnConfirm = document.createElement("button");
        dialogBtnCancel.classList.add("modal-dialog-button");
        dialogBtnCancel.innerText = "Cancel";
        dialogBtnConfirm.classList.add("modal-dialog-button");
        dialogBtnConfirm.innerText = "OK";
        dialogFooter.append(dialogBtnCancel, dialogBtnConfirm);
        dialogBtnCancel.focus();
        return new Promise(function (resolve) {
            dialogBtnCancel.addEventListener("click", function dialogBtnCancelClick() {
                this.removeEventListener("click", dialogBtnCancelClick);
                self.disposeDialog();
                resolve(false);
            });
            dialogBtnConfirm.addEventListener("click", function dialogBtnConfirmClick() {
                this.removeEventListener("click", dialogBtnConfirmClick);
                self.disposeDialog();
                resolve(true);
            });
        });
    }
}

// Declare the custom confirm modal dialog element as a web component
customElements.define("modal-confirm", ConfirmModalDialog);

class PromptModalDialog extends ModalDialogElement {

    constructor() {
        super();
        this.setDefault();
    }

    /**
     * Sets the default values for the modal dialog
     */
    setDefault() {
        let content = this.dataset.content;
        let title = this.dataset.title;
        if (typeof content === "undefined") {
            return;
        }
        if (typeof title === "undefined") {
            title = null;
        }
        this.setPrompt(content, title);
    }

    /**
     * Creates a prompt dialog modal that waits for user interaction.
     * @param {string} content the message to prompt the client
     * @param {string} title optional title for the dialog modal
     * @returns {Promise<value>}
     */
    setPrompt(content, title) {
        const self = this;
        self.createDialog(content, title);
        const dialogBody = self.shadowRoot.querySelector(".modal-dialog-body");
        const dialogInputWrapper = document.createElement("p");
        const dialogInput = document.createElement("input");
        dialogInput.classList.add("modal-dialog-textbox");
        dialogInput.type = "text";
        dialogInputWrapper.append(dialogInput);
        dialogBody.append(dialogInputWrapper);
        const dialogFooter = self.shadowRoot.querySelector(".modal-dialog-footer");
        const dialogBtnCancel = document.createElement("button");
        const dialogBtnConfirm = document.createElement("button");
        dialogBtnCancel.classList.add("modal-dialog-button");
        dialogBtnCancel.innerText = "Cancel";
        dialogBtnConfirm.classList.add("modal-dialog-button");
        dialogBtnConfirm.innerText = "OK";
        dialogFooter.append(dialogBtnCancel, dialogBtnConfirm);
        dialogInput.focus();

        /**
         * Listen for the <code>Enter</code> key press event.
         * @param {event} e handler for the key press event
         */
        function dialogInputKeyPress(e) {
            if (e.key === "Enter") {
                dialogBtnConfirm.click();
            }
        }
        dialogInput.addEventListener("keypress", dialogInputKeyPress);
        return new Promise(function (resolve) {
            let userInput = null;
            dialogBtnCancel.addEventListener("click", function dialogBtnCancelClick() {
                this.removeEventListener("click", dialogBtnCancelClick);
                dialogInput.removeEventListener("keypress", dialogInputKeyPress);
                self.disposeDialog();
                resolve(userInput);
            });
            dialogBtnConfirm.addEventListener("click", function dialogBtnConfirmClick() {
                this.removeEventListener("click", dialogBtnConfirmClick);
                dialogInput.removeEventListener("keypress", dialogInputKeyPress);
                self.disposeDialog();
                userInput = dialogInput.value;
                resolve(userInput);
            });
        });
    }
}

// Declare the custom prompt modal dialog element as a web component
customElements.define("modal-prompt", PromptModalDialog);

/**
 * Class to handle the rendering of the custom ModalDialog elements.
 */
class modal {
    static async alert(content, title) {
        const alertDialog = document.createElement("modal-alert");
        document.body.appendChild(alertDialog);
        return await alertDialog.setAlert(content, title);
    }
    static async confirm(content, title = null) {
        const confirmDialog = document.createElement("modal-confirm");
        document.body.appendChild(confirmDialog);
        return await confirmDialog.setConfirm(content, title);
    }
    static async prompt(content, title = null) {
        const promptDialog = document.createElement("modal-prompt");
        document.body.appendChild(promptDialog);
        return await promptDialog.setPrompt(content, title);
    }
}
 Save

#javascript #localstorage #cookies

StorageBin

/**
 * ## StorageBin
 * A localStorage wrapper with a cookie fallback
 * 
 * All methods checks for localStorage support first
 * 
 * If no support is found then all methods will 
 * fallback to implementing cookies instead.
 */
const prefs = new function StorageBin () {
    let self = this,
        test = "a";

    const supported = () => {
        let granted;
        try {
            window.localStorage.setItem(test, test);
            window.localStorage.removeItem(test);
            granted = true;
        } catch (e) {
            granted = false;
        }
        return granted;
    };

    /**
     * Stores the specified key/value pair allowing
     * for the following types: <em>string</em>, <em>number</em>,
     * <em>boolean</em>, <em>object</em>, and <em>array</em>.<br />
     * If no key is supplied and only an object is passed,
     * this function acts as an alias for <code>StorageBin.store()</code>.
     * 
     * @param {string/int/boolean/object/array} key 
     * @param {object/string} value
     */
    StorageBin.prototype.set = function(key, value) {
        if (supported) {
            if (arguments.length === 1) {
                self.store(key);
            } else if (typeof key === "string") {
                if (typeof value === "object") {
                    value = JSON.stringify(value);
                }
                window.localStorage.setItem(key, value);
            } else {
                throw new TypeError("Failed to execute StorageBin.set(): one or more arguments are invalid");
            }
        } else {
            document.cookie = key + "=" + value + "; path=/";
        }
    };

    /**
     * Stores the object in localStorage, allowing access to individual object properties
     * @param {object} value
     */
    StorageBin.prototype.store = function(value) {
        if (typeof value === "object" && !(value instanceof Array)) {
            for (const property in value) {
                if(value.hasOwnProperty(property)) {
                    window.localStorage.setItem(property, value[property]);
                }
            }
        } else {
            throw new TypeError("Failed to execute StorageBin.store(): argument must be of type object! " + typeof(value) + " given.");
        }
    };
    
    /**
     * Returns the value of a specified key in localStorage.
     * This value is converted to its proper type upon retrieval.
     * If the key is not in local storage, then defaultValue is
     * returned if specified.
     * @param key
     * @param defaultValue
     * @returns {string|boolean|null|number|any}
     */
    StorageBin.prototype.get = function(key, defaultValue) {
        if (supported) {
            if (typeof key !== "string") {
                throw new TypeError("Failed to execute StorageBin.get(): key must be of type string! " + typeof(key) + " given.");
            }

            let value = window.localStorage.getItem(key); // retrieve value
            let number = parseFloat(value); // to allow for number checking

            if (value === null) {
                // Returns default value if key is not set, otherwise returns null
                return arguments.length === 2 ? defaultValue : null;
            } else if (!isNaN(number)) {
                return number; // value was of type number
            } else if (
                value.toLowerCase() === "true" ||
                value.toLowerCase() === "false"
            ) {
                return value === "true"; //value was of type boolean
            } else {
                try {
                    value = JSON.parse(value);
                    return value;
                } catch (e) {
                    return value;
                }
            }
        } else {
            let key_equals = key + "=",
                cookies = document.cookie.split(";");
            for (let i = 0, j = cookies.length; i < j; i++) {
                let this_cookie = cookies[i];
                while (this_cookie.charAt(0) === " ") {
                    this_cookie = this_cookie.substring(1, this_cookie.length);
                }
                if (this_cookie.indexOf(key_equals) === 0) {
                    return this_cookie.substring(
                        key_equals.length,
                        this_cookie.length
                    );
                }
            }
            return null;
        }
    };

    /**
     * Returns an array of keys currently stored in localStorage
     * @returns {*[]}
     */
    StorageBin.prototype.getKeys = function() {
        let result = [];
        for (let i = 0; i < window.localStorage.length; i++) {
            result.push(window.localStorage.key(i));
        }
        return result;
    };

    /**
     * Checks if localStorage contains the specified key
     * @param {string} key
     * @returns {boolean}
     */
    StorageBin.prototype.contains = function(key) {
        if (typeof key !== "string") {
            throw new TypeError("Failed to execute StorageBin.contains(): key must be of type string! " + typeof(key) + " given.");
        }
        return self.getKeys().indexOf(key) !== -1;
    };

    /**
     * Removes the specified key/value pair from localStorage given a key<br/>
     * Optionally takes an array to remove key/value pairs specified in the array
     * @param {string/array} key
     */
    StorageBin.prototype.del = function(key) {
        if (supported) {
            if (typeof key === "string") {
                window.localStorage.removeItem(key);
            } else if (key instanceof Array) {
                for (let i = 0; i < key.length; i++) {
                    if (typeof key[i] === "string") {
                        window.localStorage.removeItem(key[i]);
                    } else {
                        throw new TypeError("Failed to execute StorageBin.del(): the array key at index " + i + " must be of type string! " + typeof(key[i]) + " given.");
                    }
                }
            } else {
                throw new TypeError("Failed to execute StorageBin.del(): key must be of type string! " + typeof(key) + " given.");
            }
        } else {
            self.set(key, "");
        }
    };

    /**
     * An alias for <code>StorageBin.clear()</code>
     */
    StorageBin.prototype.empty = function() {
        self.clear();
    };

    /**
     * Removes all key/value pairs from localStorage
     */
    StorageBin.prototype.clear = function() {
        if (supported) {
            window.localStorage.clear();
        } else {
            let cookies = document.cookie.split(";");
            let i = 0,
                j = cookies.length;
            for (; i < j; i++) {
                let this_cookie = cookies[i];
                let equals_position = this_cookie.indexOf("=");
                let name =
                    equals_position > -1 ? this_cookie.substr(0, equals_position) : this_cookie;
                document.cookie =
                    name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
            }
        }
    };

    /**
     * Returns an object representation of the current state of localStorage
     * @returns {{}}
     */
    StorageBin.prototype.toObject = function() {
        const o = {};
        const keys = self.getKeys();

        for (let i = 0; i < keys.length; i++) {
            const key = keys[i];
            o[key] = self.get(key);
        }
        return o;
    };
}();

#javascript

sql.Split_String

IF EXISTS (
    SELECT * FROM sysobjects WHERE id = object_id(N'Split_String') 
    AND xtype IN (N'FN', N'IF', N'TF')
)
    DROP FUNCTION [dbo].[Split_String]
GO


SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE FUNCTION [dbo].[Split_String]
       (
         @InputList VARCHAR(8000) ='',-- List of delimited items         
         @Delimiter NVARCHAR(1) = ',' -- delimiter that separates items
       )
RETURNS @List TABLE  
       (
         [Index] INT NOT NULL
                        IDENTITY(0, 1)
                        PRIMARY KEY,
         [Value] Varchar(8000) NULL
       )
BEGIN
    DECLARE @Item VARCHAR(8000)
    WHILE CHARINDEX(@Delimiter, @InputList, 0) <> 0
          BEGIN
                SELECT  @Item = RTRIM(LTRIM(SUBSTRING(@InputList, 1,
                                                       CHARINDEX(@Delimiter, @InputList, 0)
                                                       - 1))),
                        @InputList = RTRIM(LTRIM(SUBSTRING(@InputList,
                                                            CHARINDEX(@Delimiter, @InputList, 0)
                                                            + LEN(@Delimiter),
                                                            LEN(@InputList))))
 
                IF LEN(@Item) > 0 
                   INSERT   INTO @List
                            SELECT  @Item
          END

    IF LEN(@InputList) > 0 
       INSERT   INTO @List
                SELECT  @InputList -- Put the last item in
    RETURN
END
GO



select * from dbo.Split_String('a,b,c,d',',')
select * from dbo.Split_String('	',	'	')

#processing #javascript #save #export

Save with date and time

  beginRecord(SVG, "Filename-" + hour() + minute() + second() + ".svg");

#token; #javascript

token

function random() {
    return Math.random().toString(9).substr(2); // Eliminar `0.`
};
 
function token() {
    return random() + random(); // Para hacer el token más largo
};
 
alert(token());

#javascript

Get query string parameters from url

function getUrlQueryParams()
{
    var queryParams = {}, param;
    //http://example.com/?id=123456&name=amy
    //window.location.search="?id=123456&name=amy"
    var params = window.location.search.substring(1).split("&");
    for(var i = 0; i < params.length; i++)
    {
        param = params[i].split('=');
        queryParams[param[0]]=param[1];
    }
    return params;
}

var queryParams = getUrlQueryParams();
console.log(queryParams);

#javascript

This code will give you access to access both key and values of an object using For Of Loop

let myFriend =  {
  
  name: 'Junyet ',
  age:25,
  
};

for (const [kyes,value] of Object.entries( myFriend )){
  console.log(keys,value);
}

#javascript

If you want to loop over an object and want to access its property

let myFriend =  {
  
  name: 'Junyet ',
  age:25,
  
};
for (const valuesOfObject of Object.keys( myFriend )){
  console.log(valuesOfObject);
}

#javascript

Loop through an object and access the value of an object.........

let myFriend =  {
  
  name: 'Junyet ',
  age:25,
  
};
for (const valuesOfObject of Object.values( myFriend )){
  console.log(valuesOfObject);
}

#javascript

Extend existing component with additional prop for styling

// Note the $ prefix in the prop name             👇
const StyledToggleButton = styled(ToggleButton)<{ $hasMargin?: boolean }>`
  && {
    color: red;

    // Just use the prop as normal
    ${(props) =>
      props.$hasMargin &&
      css`
        margin: 10px;
      `}
  }
`;

<StyledToggleButton
  value={""}
  size={"small"}
  {/* Assign the prop as normal */}
  $hasMargin={true}
>
  click
</StyledToggleButton>;

#javascript

This is a use case of For Of Loop over an Array

let arr = [1, 2, 3, 4, 5];

for (const [i, element] of arr.entries()) {
    if (element % 2 == 0) {
        console.log(`The ${element} is even and the position is ${i}`);
    }
}

#javascript

Page: DOMContentLoaded, load, beforeunload, unload

window.addEventListener("beforeunload", (event) => {
  // works, same as returning from window.onbeforeunload
  event.returnValue = "There are unsaved changes. Leave now?";
});

#javascript

TypeScript Lookup/Conditional Types and Unions

type Company = Extract<Entity, { __type: 'Employee' }>  
// Same as
type Company = {
    __type: "Employee";
    firstName: string;
}

#html #css #javascript

Mascara que se mueve, comillas invertidas

// hay dos formas de hacer: 1(variables css y .setProperty para modificar las propiedades);
                          y 2(usando vien `` y clipPath=`circle()`).
                          
1) 
//solo agregamos correcatamente objeto.style.clipPath = `circle(50px at $(x) $(y))`; siendo x,y //variables de la función que gracias a `` se podran incluir.

2)
//javascript
let img1 = document.querySelector(".img1");
const t = img1.getBoundingClientRect();
function moverCursor(e){
    let m = e.pageX - t.left  ;
    let n = e.pageY - t.top  ;
    img1.style.setProperty(`--x`,`${m}px`);
    img1.style.setProperty(`--y`,`${n}px`);
}
img1.addEventListener("mousemove", moverCursor);

//css
.box {
   width: 500px;
   height: 250px;
   border: 2px solid red;
   position: relative;
}

.img1 {
   width: 450px;
   height: 240px;
   background-color: purple;
   --x: 0px;
   --y: 0px;
   --r: 50px;
   clip-path: circle(var(--r) at var(--x) var(--y));
}
//html
    <div class="box">
	<div class="img1">Hello word, hola mundo<br>Hello word, hola mundo<br>Hello word, hola mundo</div>
    </div>

#javascript

Assert a function response

function add(a,b) {
  return a + b
}

console.assert(add(2,3) === 5, 'message goes can go here')

#javascript

How to define string literal union type from constants in Typescript - Stack Overflow

const MY_CONSTANT = 'MY_CONSTANT' // must be const, no annotation. let or var will not work
const SOMETHING_ELSE = 'SOMETHING_ELSE' // must be const, no annotation. let or var will not work
type MyType = typeof MY_CONSTANT | typeof SOMETHING_ELSE

#javascript

Capitalize the first letter of a word

function capitalizeFirstLetter(word) {
	return word.charAt(0).toUpperCase() + word.slice(1);
}

#javascript #yupjs #typescript

How to Use Yup.JS `object.shape` With TypeScript

import { object, SchemaOf, string } from 'yup';

interface BaseBootstrapSchema {  
  APPLICATION_NAME: string;
  LOG_PATH: string;
}

const bootstrapValidationSchema: SchemaOf<BaseBootstrapSchema> = object({
  LOG_PATH: string().required("The 'LOG_PATH' ENV variable is required"),
  APPLICATION_NAME: string().required("The 'APPLICATION_NAME' ENV variable is required"),
});

module.exports = (schema: SchemaOf<BaseBootstrapSchema>) =>
  new Promise((resolve, reject) =>
    schema
      .validate(process.env, { abortEarly: false })
      .then(() => resolve(true))
      .catch((error: any) => {
        if (error.errors.length > 1) {
          reject(new Error(`${error.message},\n${error.errors.join(',\n')}`));
        } else {
          reject(new Error(error.message));
        }
      })
  );

#javascript

Generate a random 9 digit number

Math.floor(100000000 + Math.random() * 900000000)

#python #javascript

Coding organizations - Google Search

https://www.google.com/search?rlz

#python #javascript

Success! - Save Code Extension | thiscodeWorks

https://www.thiscodeworks.com/extension/initializing?newuser

#javascript

$( document ).ready() | jQuery Learning Center

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

#typescript #javascript

Making optional properties nullable in TypeScript

type RequiredKeys<T> = { [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K }[keyof T];

type OptionalKeys<T> = { [K in keyof T]-?: {} extends { [P in K]: T[K] } ? K : never }[keyof T];

type PickRequired<T> = Pick<T, RequiredKeys<T>>;

type PickOptional<T> = Pick<T, OptionalKeys<T>>;

type Nullable<T> = { [P in keyof T]: T[P] | null };

type NullableOptional<T> = PickRequired<T> & Nullable<PickOptional<T>>;

#javascript

jQuery: count number of rows in a table - Stack Overflow

var rowCount = $('#myTable >tbody >tr').length;

#javascript

jQuery: count number of rows in a table - Stack Overflow

var rowCount = $('#myTable tr').length;

#javascript #react.js

button event target issue with bubbling

event.currentTarget 

that always gives back the element that has the event listner on it

#javascript

Função Data

function data(tipo, formato) {

	var dataAtual = new Date();
	var dataFormatada = "";

	var dia = dataAtual.getDate();
	var mes = dataAtual.getMonth() + 1;
	var ano = dataAtual.getFullYear();

	var hora = (dataAtual.getHours()<10 ? '0' : '') + dataAtual.getHours();
	var minuto = (dataAtual.getMinutes()<10 ? '0' : '') + dataAtual.getMinutes();
	var segundo = (dataAtual.getSeconds()<10 ? '0' : '') + dataAtual.getSeconds();

	if (tipo == "all" || tipo == 0 || tipo !== "") {
		dataFormatada = dia + "/" + mes + "/" + ano + " " + hora + ":" + minuto + ":" + segundo;
	}
	if(tipo == "data" || tipo == 1) {

		if(formato == "DD/MM/AAAA" || formato == "dd/mm/aaaa") {
			dataFormatada = dia + "/" + mes + "/" + ano;

		} else if(formato == "AAAA/MM/DD" || formato == "aaaa/mm/dd") {

			dataFormatada = ano + "/" + mes + "/" + dia;

		} else if(formato == "MM/DD/AAAA" || formato == "mm/dd/aaaa") {

			dataFormatada = mes + "/" + dia + "/" + ano;

		} else if(formato == "MM/AAAA/DD" || formato == "mm/aaaa/dd") {

			dataFormatada = mes + "/" + ano + "/" + dia;

		} else if(formato == "DD/MM" || formato == "dd/mm") {

			dataFormatada = dia + "/" + mes;

		} else if(formato == "MM/AAAA" || formato == "mm/aaaa") {

			dataFormatada = mes + "/" + ano;

		} else if(formato !== "") {
			// Data padrão :)
			dataFormatada = dia + "/" + mes + "/" + ano;
		}
	}
	if(tipo == "tempo" || tipo == 2) {

		dataFormatada = hora + ":" + minuto + ":" + segundo;
	}
	return dataFormatada;
}

#javascript

Função de Aleatorio

function aleatorio(min, max) {
  	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max - min)) + min;
}

#javascript

JS Kai | THEX 1223

	// =============================================
	// <-----------------/ JSKai \----------------->
    // =============================================
    //				    Português(BR)
    // JSKai created by: Kainan Henrique C. dos Santos
    // 
    // 			[Na18k & Ka 1223 Organization]
    //
    //  Creator - Na18k(GitHub): https://github.com/Na18k
    // 	Thex 1223 Organization(GitHub): https://github.com/Thex1223
    //
    //  Project page: https://github.com/Ka-1223/JsKai
    //
    // Version: 0.0.1 alpha [Código totalmente experimental]
    //
    // =============================================
    // Copyright © 2021 Na18k & Ka 1223 Organization
    // =============================================

    // JS
	function aleatorio(min, max) {
		min = Math.ceil(min);
	  	max = Math.floor(max);
	  	return Math.floor(Math.random() * (max - min)) + min;
	};


	function data(tipo, formato) {

		var dataAtual = new Date();
		var dataFormatada = "";

		var dia = dataAtual.getDate();
		var mes = dataAtual.getMonth() + 1;
		var ano = dataAtual.getFullYear();

		var hora = (dataAtual.getHours()<10 ? '0' : '') + dataAtual.getHours();
		var minuto = (dataAtual.getMinutes()<10 ? '0' : '') + dataAtual.getMinutes();
		var segundo = (dataAtual.getSeconds()<10 ? '0' : '') + dataAtual.getSeconds();

		if (tipo == "all" || tipo == 0 || tipo !== "") {
			dataFormatada = dia + "/" + mes + "/" + ano + " " + hora + ":" + minuto + ":" + segundo;
		};
		if(tipo == "data" || tipo == 1) {

			if(formato == "DD/MM/AAAA" || formato == "dd/mm/aaaa") {
				dataFormatada = dia + "/" + mes + "/" + ano;

			} else if(formato == "AAAA/MM/DD" || formato == "aaaa/mm/dd") {

				dataFormatada = ano + "/" + mes + "/" + dia;

			} else if(formato == "MM/DD/AAAA" || formato == "mm/dd/aaaa") {

				dataFormatada = mes + "/" + dia + "/" + ano;

			} else if(formato == "MM/AAAA/DD" || formato == "mm/aaaa/dd") {

				dataFormatada = mes + "/" + ano + "/" + dia;

			} else if(formato == "DD/MM" || formato == "dd/mm") {

				dataFormatada = dia + "/" + mes;

			} else if(formato == "MM/AAAA" || formato == "mm/aaaa") {

				dataFormatada = mes + "/" + ano;

			} else if(formato !== "") {
				// Data padrão :)
				dataFormatada = dia + "/" + mes + "/" + ano;
			}
		}
		if(tipo == "tempo" || tipo == 2) {

			dataFormatada = hora + ":" + minuto + ":" + segundo;
		}
		return dataFormatada;
	};



	function letra(inicio, fim) {
		return substring(inicio, fim);
	};


	function vazio() {
		return null;
	};


	function imc(altura, peso) {
		return peso / (altura * altura);
	};


	function convert(argumento, tipo) {
		if(tipo == "number" || tipo == 0) {
			return parseInt(argumento);
		}
		if(tipo == "string" || tipo == 1 || tipo == null || tipo !== "") {
			return argumento.toString();
		}
	};


	function trocaArgument(argumento, tipo, tempo) {
		if(tipo == "bolean" || tipo == 0 || tipo == null) {
			if(argumento == true) {
				return false;
			}
			if(argumento == false) {
				return true;
			}
		}
	};



	// HTML
	function escreveHtml(argumento) {
		document.write(argumento);
	};


	function content(elemento, argumento) {
		element = document.querySelector(elemento);
		return element.textContent = argumento;
	};


	function getElement(elemento, tipo) {
		if(tipo == "query" || tipo == 0 || tipo == null) {
			document.querySelector(elemento);
		}
		if(tipo == "id" || tipo == 1) {
			document.getElementById(elemento);
		}
		if(tipo == "name" || tipo == 2) {
			document.getElementsByName(elemento);
		}
		if(tipo == "class" || tipo == 3) {
			document.getElementsByClassName(elemento);
		}
		if(tipo == "tag" || tipo == 4) {
			document.getElementsByTagName(elemento);
		}
		if(tipo == "tagNs" || tipo == 5) {
			document.getElementsByTagNameNS(elemento);
		}
	};


	function getKey(argumento) {
    	return argumento.keyCode;
    };


	function executaKey(evento, teclaCode, executar) {
	    if(evento.keyCode == teclaCode) {
	       return executar;
	    }
	};


	function substi(elemento, para) {
		if(elemento === "src") {
			elemento.src = para;
		}
		if(elemento === "href") {
			elemento.href = para;
		}
	};

// Copyright 2022 Kainan H.

#javascript

How to add custom fonts to your Notion site

<link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Monda:wght@100;300;400;600;700;800;900&display=swap" rel="stylesheet">

<style>
    .notion.notion-app {
        font-family: "Monda" !important;
    }
</style>

#javascript

adjust canvas size when window is resized

window.addEventListener(
	"resize",
	() => {
		canvas.setHeight(canvas_container.clientHeight);
		canvas.setWidth(canvas_container.clientWidth);
		canvas.renderAll();
	},
	false
);

#javascript

javascript - how to save canvas as png image? - Stack Overflow

function download(){
        var download = document.getElementById("download");
        var image = document.getElementById("canvas").toDataURL("image/png")
                    .replace("image/png", "image/octet-stream");
        download.setAttribute("href", image);

    }
<a id="download" download="image.png"><button type="button" onClick="download()">Download</button></a>

#javascript

$(document).ready(function(){}

$(document).ready(function() {
    if (localStorage.getItem("deleteRaportPeriod")) {
        localStorage.removeItem("deleteRaportPeriod");
        $('#snackbar-alert').toast('show');
    }
});

//IN AJAX

localStorage.setItem("deleteRaportPeriod", true);
location.reload();

#javascript

Ajax

$.ajax({
                url: ``,
                type: 'GET',
                dataType: 'json',
                data: {},
                beforeSend: function() {

                },
                error: function(error) {

                },
                success: function(response) {

                }
            });

#javascript

Regular Expressions: Specify Exact Number of Matches | freeCodeCamp.org

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/regular-expressions/specify-exact-number-of-matches

#javascript

Random JavaScript

https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript

#javascript #json #auth #fetch

JSON Web Token

const token = 'YOUR_TOKEN_HERE';
fetch('https://api.github.com/user/repos', {
  headers: {
    Authorization: `token ${token}`
  }
})
  .then(res => res.json())
  .then(json => console.log(json));

#javascript #css

Add instagram feed to your webflow

//paste in the body of the page and place a div with an id of “instagram-feed”//
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/Instagram-Photos-Without-API-instagramFeed/jquery.instagramFeed.js"></script>
<script>
$(window).on('load', function(){
  $.instagramFeed({
    'username': 'flux.academy',
    'container': "#instagram-feed",
    'items': 5,
    'margin': 1
  });
});
</script>
//Hide unnessesary stuf and wrap all (paste the code in the head of the page)//
<style>
.instagram_profile {
  display: none
}

.instagram_profile {
  display: none
}

.instagram_gallery {
    display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;

   -webkit-flex-direction: row;
   -ms-flex-direction: row;
    flex-direction: row;

   -webkit-align-items: center;
   -ms-flex-align: center;
    align-items: center;

   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
    justify-content: space-between; 
    
   -webkit-flex-flow:row wrap;
   -ms-flex-flow:row wrap;
   flex-flow:row wrap;
}

//controll number of images per row with the "%"
.instagram_gallery a {
  width: 33.33% !important;
}

.instagram_gallery a img {
  width: 98%!important;
  display: block;
  height: auto;
}
</style>

#javascript

rest - Authenticate GitHub API on JavaScript - Stack Overflow

axios.get('https://api.github.com/search/users?q=' + props.user, {
  'headers': {
    'Authorization': `token ${my_token}` 
  }
})

#javascript #react.js

Conditional Rendering – React

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>

      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

#javascript #react.js

React Class Component

class Widget extends React.Component {
  render() {
    let ui;
    return <div>{ui}</div>;
  }
}

#javascript #jquery

Restrict user from entering Special Characters in TextBox using jQuery

https://www.aspsnippets.com/Articles/Restrict-user-from-entering-Special-Characters-in-TextBox-using-jQuery.aspx

#javascript

javascript - Fetch: POST JSON data - Stack Overflow

fetch('https://httpbin.org/post', {
  method: 'POST',
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({a: 7, str: 'Some string: &=&'})
}).then(res => res.json())
  .then(res => console.log(res));

#javascript

javascript - Fetch: POST JSON data - Stack Overflow

(async () => {
  const rawResponse = await fetch('https://httpbin.org/post', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({a: 1, b: 'Textual content'})
  });
  const content = await rawResponse.json();

  console.log(content);
})();

#javascript

Function that stops page scrolling with button click.

let isTrue = false;
document.getElementById("hamburger").onclick = function() {toggle()};
function stop() {
    let someElement= document.getElementById("wholeBody");
    someElement.className += " stop";//add "newclass" to element (space in front is important)
}
function deleteStop() {
    let someElement= document.getElementById("wholeBody");
    someElement.className -= " stop";
}
function toggle() {
    isTrue = !isTrue;
    if (isTrue === true){
        stop();
    }
    if (isTrue === false) {
        deleteStop()
    }
}

#javascript #jquery

javascript - How to block +,-,e in input type Number? - Stack Overflow

var invalidChars = ["-", "e", "+", "E"];

$("input[type='number']").on("keydown", function(e){ 
    if(invalidChars.includes(e.key)){
         e.preventDefault();
    }
}):

##html ##css #javascript #fontawesome #bulma #boilerplate #imports

Boilerplate & Imports

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title></title>

	/* CSS STYLESHEET */

	<link rel="stylesheet" href="styles.css">

	/* BULMA */

 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
      
	/* FONTAWESOME */
      
	<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-	a11y="true"></script>


</head>

<body>
      
	/* JAVASCRIPT SCRIPTS /*
    
	<script src="script.js"></script>

</body>
</html>

#jquery #javascript

JS - Basic Column Clickable

// Basic Clickable on Whole Column
				if(SDB.App.exists('.ocs-clickable')){
					$(document).on('click', 'body:not(.fl-builder-edit) .ocs-clickable', function(event) { 
                        window.location = $(this).find("a").attr("href"); 
                      	return false;
                    });
				}

#javascript

typescript - Angular: Best way to set a default sort on a dynamic column in agGrid - Stack Overflow

function sortGrid(event, field, sortDir) {
  const columnState = { // https://www.ag-grid.com/javascript-grid-column-state/#column-state-interface
    state: [
      {
        colId: field,
        sort: sortDir
      }
    ]
  }
  event.columnApi.applyColumnState(columnState);
}

#javascript

javascript - Elegant method to generate array of random dates within two dates - Stack Overflow

function randomDate(start, end) {
  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}

const d = randomDate(new Date(2012, 0, 1), new Date());
console.log(d);

#javascript #remove #duplicate

ScrollTO

export const scrollTo = (distance) => {
    window.scrollTo({
        top: distance,
        behavior: 'smooth'
    })
}

export const scrollToTop = () => scrollTo(0)

#javascript

javascript - Building table dynamically with PDFMake - Stack Overflow

    var externalDataRetrievedFromServer = [
    { name: 'Bartek', age: 34 },
    { name: 'John', age: 27 },
    { name: 'Elizabeth', age: 30 },
];

function buildTableBody(data, columns) {
    var body = [];

    body.push(columns);

    data.forEach(function(row) {
        var dataRow = [];

        columns.forEach(function(column) {
            dataRow.push(row[column].toString());
        })

        body.push(dataRow);
    });

    return body;
}

function table(data, columns) {
    return {
        table: {
            headerRows: 1,
            body: buildTableBody(data, columns)
        }
    };
}

var dd = {
    content: [
        { text: 'Dynamic parts', style: 'header' },
        table(externalDataRetrievedFromServer, ['name', 'age'])
    ]
}

#javascript #jquery

JS - Clickable column with target _blank

// Basic Clickable on Whole Column with Target Blank
				if(SDB.App.exists('.tg-clickable')){
					$(document).on('click', 'body:not(.fl-builder-edit) .tg-clickable > .fl-col-content', function(event) { 
                        var link = $(this).find("a").attr("href"); 
                        window.open(link,'_blank');
                        return false;
                    });
				}

#jquery #javascript

JS - Basic Markup for Jquery (SDB Terms)

(function ($) {
    if (!window.SDB) {
        SDB = {};
    }
    /*
     * Application Init, everything starts here
     *
     */
    SDB.App = function() {
        return {
            exists: function(x) {
                if ($(x).length > 0) { return true; }
            },
            init: function() {
              	// Basic Clickable on Whole Column with Target Blank
				if(SDB.App.exists('.tg-clickable')){
					$(document).on('click', 'body:not(.fl-builder-edit) .tg-clickable > .fl-col-content', function(event) { 
                        var link = $(this).find("a").attr("href"); 
                        window.open(link,'_blank');
                        return false;
                    });
				}
              	// Start New Function from here
              	
            } // CLOSE INIT FUNCTION
        };
    }();
  

    $(function() {
        SDB.App.init();
      
    });
}(jQuery));

#suitscript #javascript

SAVED SEARCH DATE FORMAT(page wise) AND LOOP THROUGH EACH DATA || With Pagination || Avoids 4000 data Limt

var CustSearchResult = [];
     var igrSearchData = customerSearchObj.runPaged({ pageSize: 1000 });
     igrSearchData.pageRanges.forEach(function (pageRange) {
       var page = igrSearchData.fetch({ index: pageRange.index });
       CustSearchResult = CustSearchResult.concat(page.data);
     });
     //logging the fetched data from saved search.
     log.debug("CustSearchResult  array", CustSearchResult);

     //for (var i = 0; i < CustSearchResult.length; i++) {



     for (var i = 0; i < CustSearchResult.length; i++) {
       














var cust_name = CustSearchResult[i].getValue({
name: 'entityid'
});
        var i_internalId = CustSearchResult[i].getValue({
            name: "internalid",
        });
        var i_email = CustSearchResult[i].getValue({
            name: "email",
        });
     }

#javascript

javascript - How to use format() on a moment.js duration? - Stack Overflow

// set up
let start = moment("2018-05-16 12:00:00"); // some random moment in time (in ms)
let end = moment("2018-05-16 12:22:00"); // some random moment after start (in ms)
let diff = end.diff(start);

// execution
let f = moment.utc(diff).format("HH:mm:ss.SSS");
alert(f);

#javascript #css

Colors Swatch for e-commerce in webflow

<style> .wf-force-outline-none[tabindex="-1"]:focus{outline:none;} </style>


<style>

[data-option-label="color-name-link"] {
background-image: url("image-color-name"); // you get those field from a cms colors collections / put as many data option label field as maximum colors swatch you would like to have
}
[data-option-label="{{wf {&quot;path&quot;:&quot;color-2:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"] {
background-image: url("{{wf {&quot;path&quot;:&quot;color-2:colors-link&quot;,&quot;type&quot;:&quot;Link&quot;\} }}");
}
[data-option-label="{{wf {&quot;path&quot;:&quot;color-3:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"] {
background-image: url("{{wf {&quot;path&quot;:&quot;color-3:colors-link&quot;,&quot;type&quot;:&quot;Link&quot;\} }}");
}
[data-option-label="{{wf {&quot;path&quot;:&quot;color-4:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"] {
background-image: url("{{wf {&quot;path&quot;:&quot;color-4:colors-link&quot;,&quot;type&quot;:&quot;Link&quot;\} }}");
}
[data-option-label="{{wf {&quot;path&quot;:&quot;color-5:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"] {
background-image: url("{{wf {&quot;path&quot;:&quot;color-5:colors-link&quot;,&quot;type&quot;:&quot;Link&quot;\} }}");
}
ֿ/*/ ((--=.lw-commerce-commerceaddtocartoptionpill.w--ecommerce-pill-selected {
   kjborder: 3px solid  #ffb700;))--
}
/*/
video::-webkit-media-controls-panel {
display: none !important;
opacity: 1 !important;}

</style>

<style>
.color-buttons:focus {
outline: none;
}
.color-buttons{
box-shadow: 0 0 0 1px #1f2d1c;
border: 2.5px solid #faf5f2;
}

.color-buttons:active {
box-shadow: 0 0 0 1px #bababa;
}
.color-buttons:hover {
box-shadow: 0 0 0 1px #bababa;
}

body {
 overflow-x: hidden !important;
  position: relative !important;
  width:100% !important;
  }
  

</style>

<!-- No Highlight Tabs  -->
<style>                                  
.arrow {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */                                  
</style> 

<script>
document.querySelectorAll('[data-node-type="commerce-add-to-cart-pill"]').forEach(el => el.dataset['optionLabel'] = el.textContent)
</script>

<script>
  var FC = FC || {};
 
  FC.onLoad = function () {
    FC.client.on("ready.done", function () {
      document
        .querySelector(".w-commerce-commerceaddtocartbutton")
        .addEventListener("click", (e) => {
          e.preventDefault();
 
          const name = document.querySelector(".foxy-product-name").innerText;
          const price = document.querySelector(".foxy-product-price").innerText;
          const code = document.querySelector(".foxy-product-code").innerText;
          const image = document.querySelector(".foxy-product-image").src;
 
          const quantity = document.querySelector(".w-commerce-commerceaddtocartquantityinput").value;
 
          let cartUrl = `https://${FC.settings.storedomain}/cart?name=${encodeURIComponent(name)}&price=${price}&code=${code ?? encodeURIComponent(code)}&quantity=${quantity ?? 1}&image=${encodeURIComponent(image)}`;
 
          const variantSelect = document.querySelectorAll("[data-node-type='commerce-add-to-cart-option-select']");
 
          const variantName = Array.from(variantSelect).map((select) =>
            encodeURIComponent(select.previousElementSibling.innerText)
          );
 
          const variantValueName = Array.from(variantSelect).map((select) =>
            encodeURIComponent(select.options[select.selectedIndex].text)
          );
 
          const variantValue = Array.from(variantSelect).map((select) =>
            encodeURIComponent(select.value)
          );
 
          if (variantSelect.length > 0 && variantValue.includes("")) {
            return;
          } else {
            variantName.forEach(
              (name, index) => (cartUrl += `&${name}=${variantValueName[index]}`)
            );
 
            FC.client.event("cart-submit").trigger({
              data: { cart: "add" },
              url: cartUrl,
            });
          }
        });
    });
  };
</script>

#javascript #jquery

Vertical slick slider

$('.slider-nav').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
  vertical: true,
  verticalSwiping:true,
  arrows: true,
  focusOnSelect: true,
  responsive: [
    {
      breakpoint: 767,
      settings: "unslick"
    }
  ]
});

#javascript

Convert char to int in C and C++ - Stack Overflow

int x = character - '0';  // The (int) cast is not necessary.

#javascript #suitscript_2.0

Rest in Suitlet

 function reset() {
        try {

            var suiteletUrl = url.resolveScript({
                scriptId: 'customscript_asp_sl_bulk_approval_exprep',
                deploymentId: 'customdeploy_akp_sl_bulk_approval_exprep',
                returnExternalUrl: false
            });
            if (runtime.accountId == '5180777_SB1') {
                suiteletUrl = 'https://5180777-sb1.app.netsuite.com' + suiteletUrl;
                location.replace(suiteletUrl);
            }

           /*  var url = window.location.search;
            console.log('URL: '+ url);
            window.onbeforeunload = null;
            window.location.search = url + '&i_subsidiary=' + '' + '&i_employee_select=' + '' + '&d_from_date=' + '' + '&d_to_date1=' + ''; */

        } catch (err) {
            log.error('Error in Reset', err)
        }
    }

#javascript

Stop video from slider when slide to a new slider

<script>
$(function() {
    var observer = new MutationObserver(function (mutations) {
        for(let mutation of mutations) {
            setTimeout(function() {
                if(mutation.oldValue || mutation.target.getAttribute('aria-hidden') != 'true')
                    return;
                let player = $(mutation.target).find('iframe').get(0);
                player.src += '';
            }, 500);
        }
    });
    $('.slide.w-slide').each(function () {
        observer.observe(this, {
            attributes: true,
            attributeFilter: ['aria-hidden'],
            attributeOldValue : true
        });
    })
});
</script>

#javascript

function that push a dataLayer

dataLayer.push({'event': 'lastscr'});console.log(dataLayer)

#javascript

onclick function on webflow

<script>
    window.onload = function() {
        var anchors = document.getElementsByTagName('*');
        for(var i = 0; i < anchors.length; i++) {
            var anchor = anchors[i];
            anchor.onclick = function() {
                code = this.getAttribute('whenClicked');
                eval(code);   
            }
        }
    }
</script>

#python #javascript #iteration #foreach

forEach Method / Function

JS

favMovies.forEach(function(favMovie) {
  console.log('I really like the movie', favMovie)
})

#python #javascript #array #list #forloop #iteration

for loop

JavaScript

for (let i=0; i < arrayName.length; i++){
  console.log(arrayName[i])
}

i.e.):

movies = ['legally blonde', 'Ms. & Ms. Smith', 'The Incredibles'];

for (let i=0; i < movies.length; i++){
  console.log(movies[i])
}

Python

for singular_array_name in array_name_pluralized:
	print(singular_array_name)

i.e.):

movies = ['legally blonde', 'Ms. & Ms. Smith', 'The Incredibles']

for movie in movies:
	print(movie)

#javascript

next.config.js #Route #env_appName

module.exports = {
  reactStrictMode: true,

  //global title
  env: {
    appName: 'yusup.com',
  },
  
  //Route
  async rewrites() { 
    return [
      {
        source: '/login', //link
        destination: '/auth/login', //Lokasi File
      },
      {
        source: '/register',
        destination: '/auth/register',
      }
    ]
  }
}

//Pemakaian global title
<Layout title={process.env.appName}> //Tanpa di import
  <div></div>
</Layout

#javascript

_document Nextjs

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
          <meta property="example" content="example.com" />
        </Head>
        <body className="font-sans">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

#javascript

Layout Component

//Base
File:component/Layout
import Head from "next/head";

function Layout(props) {
  return (
    <>
      <Head>
        <title>{props.title}</title>
    	<link rel="icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqDf8kObAr4H1Eq4AowjBo3lb0IblH0hflxY5Fy5NFO6jEB2N1vMhDbtnyzivnuSbaLSM&usqp=CAU"></link>
      </Head>
      {props.children}
    </>
  );
}

export default Layout;

//Pemakaian
File:page/index.js

<Layout title="Home"> //props variabel title
  
  //children
    <div className="container mx-auto mt-8"> 
      <h1 className="font-bold">Hello Word!</h1>
    </div>
 //endChildren

</Layout>

#javascript #smartedit

SE login fix

/* Added for B2C login links */
$("#samlSignInLink,#samlSignInLinkPopUp,#samlSignInLinkHomepage").off('click', function (e) {
	  
});



$("#samlSignInLink,#samlSignInLinkPopUp,#samlSignInLinkHomepage").on('click', function (e) {
	var redirectUrl;
	var currentPath = document.location.pathname == '/error' ? '' : document.location.pathname;
	var queryString = window.location.search;
	if(queryString) {
		redirectUrl = document.location.origin + "/samlsinglesignon/saml" + currentPath + queryString +"&"
	} else {
		redirectUrl = document.location.origin + "/samlsinglesignon/saml" + currentPath + "?"
	}
	if ($('#isDeviceApp').val() == 'true') {
		redirectUrl =redirectUrl + "idp=B2C_1A_signup_signin_SAML_APP_KMSI"
	} else if ($('#isMobileBrowser').val() == 'true') {
		redirectUrl = redirectUrl + "idp=B2C_1A_signup_signin_SAML_MOBILE"
	} else {
		redirectUrl = redirectUrl + "idp=B2C_1A_signup_signin_SAML"
	}
	

	if(window.parent.location.href.indexOf('smartedit') >= 0){
		localStorage.setItem("SE_login", true);
		console.log("set SE_login TRUE")
		window.open(redirectUrl, '_blank');
	}else{
		window.location.href = redirectUrl;
	}

});


if(localStorage.getItem("SE_login") != null && JSON.parse(localStorage.getItem("SE_login")) == true){
	localStorage.setItem("SE_login", false);
	console.log("set SE_login FALSE")

	window.opener.location.reload();
	window.close();
}

#javascript

tofixed is not a function in javascript - Google Search

toFixed isn't a method of non-numeric variable types. In other words, Low and High can't be fixed because when you get the value of something in Javascript, it automatically is set to a string type. Using parseFloat() (or parseInt() with a radix, if it's an integer) will allow you to convert different variable types to numbers which will enable the toFixed() function to work.

var Low  = parseFloat($SliderValFrom.val()),
    High = parseFloat($SliderValTo.val());

#javascript

tofixed is not a function in javascript - Google Search

// toFixed only exists on numbers. 
// Trying to use it on another data type like strings will not work
// Example

let num = 1.23456;
num.toFixed(2); // 1.23

num = String(num);
num.toFixed(2); // Uncaught TypeError: num.toFixed is not a function

// Solutions
// Convert your string to a number by:
//  - prepending it with a +
//		e.g. (+num).toFixed(2);
//	- using parseInt
//		e.g. parseInt(num).toFixed(2)
//	- using Number
//		e.g. Number(num).toFixed(2)

#javascript

javascript - auto refresh for every 5 mins - Stack Overflow

            setInterval(function() {
                  window.location.reload();
                }, 300000);

#javascript

How to format a JavaScript date - Stack Overflow

function join(t, a, s) {
   function format(m) {
      let f = new Intl.DateTimeFormat('en', m);
      return f.format(t);
   }
   return a.map(format).join(s);
}

let a = [{day: 'numeric'}, {month: 'short'}, {year: 'numeric'}];
let s = join(new Date, a, '-');
console.log(s);

#javascript

How to format a JavaScript date - Stack Overflow

{ // example 1
   let f = new Intl.DateTimeFormat('en');
   let a = f.formatToParts();
   console.log(a);
}
{ // example 2
   let f = new Intl.DateTimeFormat('hi');
   let a = f.formatToParts();
   console.log(a);
}

#javascript

How to format a JavaScript date - Stack Overflow

var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var today  = new Date();

console.log(today.toLocaleDateString("en-US")); // 9/17/2016
console.log(today.toLocaleDateString("en-US", options)); // Saturday, September 17, 2016
console.log(today.toLocaleDateString("hi-IN", options)); // शनिवार, 17 सितंबर 2016

#javascript

How to format a JavaScript date - Stack Overflow

// Example
9/17/2016, 1:21:34 PM

#javascript

How to format a JavaScript date - Stack Overflow

var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var today  = new Date();

console.log(today.toLocaleDateString("en-US")); // 9/17/2016
console.log(today.toLocaleDateString("en-US", options)); // Saturday, September 17, 2016
console.log(today.toLocaleDateString("hi-IN", options)); // शनिवार, 17 सितंबर 2016

#javascript

boost-pfs-filter.js

// Override Settings
var boostPFSFilterConfig = {
  general: {
    limit: boostPFSConfig.custom.products_per_page,
    // Optional
    loadProductFirst: false,
  },
}

// Declare Templates
var boostPFSTemplate = {
  saleLabelHtml:
    '<div class="sale_banner">' + boostPFSConfig.label.sale + "</div>",
  newLabelHtml:
    '<div class="new_banner">' + boostPFSConfig.label.newlabel + "</div>",
  partyLabelHtml:
    '<div class="new_banner">' + boostPFSConfig.label.partylabel + "</div>",
  duurzaamLabelHtml:
    '<div class="new_banner">' + boostPFSConfig.label.duurzaamlabel + "</div>",
  giftLabelHtml:
    '<div class="new_banner">' + boostPFSConfig.label.giftlabel + "</div>",
  comingLabelHtml:
    '<div class="new_banner">' + boostPFSConfig.label.cominglabel + "</div>",
  label1LabelHtml:
    '<div class="new_banner">' + boostPFSConfig.label.label1 + "</div>",
  label2LabelHtml:
    '<div class="new_banner">' + boostPFSConfig.label.label2 + "</div>",
  label3LabelHtml:
    '<div class="new_banner">' + boostPFSConfig.label.label3 + "</div>",
  preorderLabelHtml:
    '<div class="new_banner">' + boostPFSConfig.label.preorder + "</div>",
  reviewHtml:
    '<span class="shopify-product-reviews-badge" data-id="{{itemId}}"></span>',
  vendorHtml:
    '<div class="vendor"><span itemprop="brand">{{itemVendorLabel}}</span></div>',
  quickViewBtnHtml:
    '<span data-fancybox-href="#product-{{itemId}}" class="quick_shop ss-icon" data-gallery="product-{{itemId}}-gallery"><span class="icon-plus">Quick view</span></span>',
  newRowHtml: '<br class="clear product_clear" />',

  // Grid Template
  productGridItemHtml:
    '<div data-boost-pfs-theme-quickview="{{itemId}}" data-product-id="{{itemId}}" class="{{itemColumnNumberClass}} {{itemCollectionGroupThumbClass}} thumbnail {{itemCollectionGroupMobileClass}}" data-product-id="{{itemId}}" itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">' +
    `<div class="ssw-faveiticon sswfaveicon{{itemId}}">
				<i data-product-id="{{itemId}}" data-count="0" class="ssw-icon-heart-o ssw-fave-icon ssw-wishlist-element ssw-not-synch"
					title="{{ 'socialshopwave.fave' | t }}"
					data-params='{"product_id":"{{itemId}}","event":"fave_button","page":"product_profile"}'></i>
				<span class="faves-count">...</span>
			</div>` +
    '<a href="{{itemUrl}}" itemprop="url">' +
    '<div class="relative product_image">' +
    "{{itemSaleLabel}}" +
    "{{discountPercentageLabel}}" +
    '<div class="product_container swap-' +
    boostPFSConfig.custom.collection_secondary_image +
    '">' +
    "{{itemImages}}" +
    "</div>" +
    "</div>" +
    '<div class="info">' +
    '<span class="title" itemprop="name">{{itemTitle}}</span>' +
    "{{itemVendor}}" +
    "{{itemReview}}" +
    "{{itemPrice}}" +
    "</div>" +
    '<div class="banner_holder">' +

    "{{itemNewLabel}}" +
    "{{itemPartyLabel}}" +
    "{{itemDuurzaamLabel}}" +
    "{{itemGiftLabel}}" +
    "{{itemComingLabel}}" +
    "{{itemLabel1Label}}" +
    "{{itemLabel2Label}}" +
    "{{itemLabel3Label}}" +
    "{{itemPreorderLabel}}" +
    "</div>" +
    "</a>" +
    "{{itemSwatches}}" +
    "</div>" +
    "{{itemNewRow}}",

  // Pagination Template
  previousHtml:
    '<span class="prev"><a href="{{itemUrl}}">« ' +
    boostPFSConfig.label.paginate_prev +
    "</a></span>",
  nextHtml:
    '<span class="next"><a href="{{itemUrl}}">' +
    boostPFSConfig.label.paginate_next +
    " »</a></span>",
  pageItemHtml:
    '<span class="page"><a href="{{itemUrl}}">{{itemTitle}}</a></span>',
  pageItemSelectedHtml: '<span class="page current">{{itemTitle}}</span>',
  pageItemRemainHtml: "<span>{{itemTitle}}</span>",
  paginateHtml: "{{previous}}{{pageItems}}{{next}}",

  // Sorting Template
  sortingHtml:
    '<select id="sort-by" class="boost-pfs-filter-top-sorting-select" data-default-sort="' +
    boostPFSConfig.general.default_sort_by +
    '">{{sortingItems}}</select>',
}

;(function () {
  BoostPFS.inject(this)

  // This seems to fix the loading issue of the button on iPhone 11. Utils seems to get overwritten somehow which makes some functions of Utils undefined === errors
  let _utils = Utils

  // Build Product Grid Item
  ProductGridItem.prototype.compileTemplate = function (data, index) {
    if (!data) data = this.data
    if (!index) index = this.index + 1

    /*** Prepare data ***/
    var images = data.images_info
    // Displaying price base on the policy of Shopify, have to multiple by 100
    var soldOut = !data.available // Check a product is out of stock
    var onSale = data.compare_at_price_min > data.price_min // Check a product is on sale
    var priceVaries = data.price_min != data.price_max // Check a product has many prices
    // Get First Variant (selected_or_first_available_variant)
    var firstVariant = data["variants"][0]
    if (_utils.getParam) {
      if (
        _utils.getParam("variant") !== null &&
        _utils.getParam("variant") != ""
      ) {
        var paramVariant = data.variants.filter(function (e) {
          return e.id == _utils.getParam("variant")
        })
        if (typeof paramVariant[0] !== "undefined")
          firstVariant = paramVariant[0]
      } else {
        for (var i = 0; i < data["variants"].length; i++) {
          if (data["variants"][i].available) {
            firstVariant = data["variants"][i]
            break
          }
        }
      }
    }

    /*** End Prepare data ***/

    var itemHtml = boostPFSTemplate.productGridItemHtml

    var onSaleClass = onSale ? "sale" : ""
    var soldOutClass = soldOut ? "out_of_stock" : "in_stock"

    var itemColumnNumberClass = ""
    var itemCollectionGroupThumbClass = buildItemCollectionGroupThumbClass(
      index,
      boostPFSConfig.custom.products_per_row
    )
    var itemCollectionGroupMobileClass = (index - 1) % 2 == 0 ? "even" : "odd"
    switch (boostPFSConfig.custom.products_per_row) {
      case 2:
        itemColumnNumberClass = boostPFSConfig.custom.show_sidebar
          ? "six columns"
          : "eight columns"
        break
      case 3:
        itemColumnNumberClass = boostPFSConfig.custom.show_sidebar
          ? "four columns"
          : "one-third column"
        break
      default:
        itemColumnNumberClass = boostPFSConfig.custom.show_sidebar
          ? "three columns"
          : "four columns"
        break
    }
    itemHtml = itemHtml.replace(
      /{{itemColumnNumberClass}}/g,
      itemColumnNumberClass
    )
    itemHtml = itemHtml.replace(
      /{{itemCollectionGroupThumbClass}}/g,
      itemCollectionGroupThumbClass
    )
    itemHtml = itemHtml.replace(
      /{{itemCollectionGroupMobileClass}}/g,
      itemCollectionGroupMobileClass
    )

    // Get image source
    var imageSrc =
      'data-src="' + _utils.getFeaturedImage(images, "2048x") + '" '
    imageSrc +=
      'data-srcset=" ' + _utils.getFeaturedImage(images, "2048x") + " 2048w,"
    imageSrc += _utils.getFeaturedImage(images, "1600x") + " 1600w,"
    imageSrc += _utils.getFeaturedImage(images, "1200x") + " 1200w,"
    imageSrc += _utils.getFeaturedImage(images, "1000x") + " 1000w,"
    imageSrc += _utils.getFeaturedImage(images, "800x") + " 800w,"
    imageSrc += _utils.getFeaturedImage(images, "600x") + " 600w,"
    imageSrc += _utils.getFeaturedImage(images, "400x") + ' 400w"'
    // Get Thumbnail url
    var thumbUrl = _utils.getFeaturedImage(images, "100x")
    // Get Flip image url
    var itemFlipImageUrl =
      images.length > 1
        ? _utils.optimizeImage(images[images.length - 1]["src"], "900x")
        : _utils.getFeaturedImage(images, "900x")

    // Add Thumbnail
    if (data.images_info.length > 0) {
      var product_set_width = data.images_info[0].width
    } else {
      var product_set_width = "900"
    }
    var align_height_value = ""
    if (boostPFSConfig.custom.align_height) {
      if (images.length > 0) {
        var collection_height = boostPFSConfig.custom.collection_height
        var product_aspect_ratio = images[0]["width"] / images[0]["height"]
        product_set_width = product_aspect_ratio * collection_height
        if (images[0]["width"] >= images[0]["height"]) {
          var align_height_value = "width: 100%; height: auto;"
        } else {
          var align_height_value = "width: 100%;"
        }
      }
    }
    var itemImagesHtml =
      '<div class="image__container" style="max-width: ' +
      product_set_width +
      'px;">'
    itemImagesHtml +=
      '<img  src="' +
      thumbUrl +
      '"' +
      'alt="{{itemTitle}}" ' +
      'class="lazyload lazyload--fade-in" ' +
      'style="' +
      align_height_value +
      " max-width: " +
      product_set_width +
      'px;" ' +
      'data-sizes="auto" ' +
      imageSrc +
      "/>"
    // Add Flip image
    if (boostPFSConfig.custom.collection_secondary_image) {
      itemImagesHtml += '<div class="image__container" style="max-width: '
      if (images.length > 1) {
        itemImagesHtml += images[1]["width"] + "px"
      } else {
        itemImagesHtml += product_set_width + "px"
      }
      itemImagesHtml += '">'
      itemImagesHtml +=
        '<img src="' +
        itemFlipImageUrl +
        '" class="secondary lazyload" alt="{{itemTitle}}" />'
      itemImagesHtml += "</div>"
    }
    itemImagesHtml += boostPFSConfig.custom.quick_shop_enable
      ? "{{itemQuickViewBtn}}"
      : ""
    itemImagesHtml += "</div>"
    itemHtml = itemHtml.replace(/{{itemImages}}/g, itemImagesHtml)

    // Add Labels
    // Sold Out label
    var itemSoldOutLabel = soldOut ? boostPFSTemplate.soldOutLabelHtml : ""
    itemHtml = itemHtml.replace(/{{itemSoldOutLabel}}/g, itemSoldOutLabel)
    // Sale label
    var itemSaleLabel =
      boostPFSConfig.custom.sale_banner_enabled && onSale
        ? boostPFSTemplate.saleLabelHtml
        : ""
    itemHtml = itemHtml.replace(/{{itemSaleLabel}}/g, itemSaleLabel)

    // Discount percentage label
    var discountPercentageLabel = data.percent_sale_min > 0 || data.tags.includes('hide-discount') ? '<span class="discount-label">' + Math.round(data.percent_sale_min / 5) * 5 + '%</span>' : ''

    itemHtml = itemHtml.replace(/{{discountPercentageLabel}}/g, discountPercentageLabel)

    // New, Coming soon, Pre order label
    var itemNewLabelHtml = "",
        itemPartyLabelHtml = "",
        itemDuurzaamLabelHtml = "",
        itemGiftLabelHtml = "",
        itemComingLabelHtml = "",
        itemLabel1LabelHtml = "",
        itemLabel2LabelHtml = "",
        itemLabel3LabelHtml= "",
        itemPreorderLabelHtml = "";
    if (data.collections) {
      itemNewLabelHtml = data.tags.includes("newlabel") ? boostPFSTemplate.newLabelHtml : ""
      itemPartyLabelHtml = data.tags.includes("partylabel") ? boostPFSTemplate.partyLabelHtml : ""
      itemDuurzaamLabelHtml = data.tags.includes("duurzaamlabel") ? boostPFSTemplate.duurzaamLabelHtml : ""
      itemGiftLabelHtml = data.tags.includes("giftlabel") ? boostPFSTemplate.giftLabelHtml : ""
      itemComingLabelHtml = data.tags.includes("cominglabel") ? boostPFSTemplate.comingLabelHtml : ""
      itemLabel1LabelHtml = data.tags.includes("label1") ? boostPFSTemplate.Label1LabelHtml : ""
      itemLabel2LabelHtml = data.tags.includes("label2") ? boostPFSTemplate.Label2LabelHtml : ""
      itemLabel3LabelHtml = data.tags.includes("label3") ? boostPFSTemplate.Label3LabelHtml : ""
      itemPreorderLabelHtml = data.tags.includes("pre_order") ? boostPFSTemplate.preorderLabelHtml : ""
    }
    itemHtml = itemHtml.replace(/{{itemNewLabel}}/g, itemNewLabelHtml)
    itemHtml = itemHtml.replace(/{{itemPartyLabel}}/g, itemPartyLabelHtml)
    itemHtml = itemHtml.replace(/{{itemDuurzaamLabel}}/g, itemDuurzaamLabelHtml)
    itemHtml = itemHtml.replace(/{{itemGiftLabel}}/g, itemGiftLabelHtml)
    itemHtml = itemHtml.replace(/{{itemComingLabel}}/g, itemComingLabelHtml)
    itemHtml = itemHtml.replace(/{{itemLabel1Label}}/g, itemLabel1LabelHtml)
    itemHtml = itemHtml.replace(/{{itemLabel2Label}}/g, itemLabel2LabelHtml)
    itemHtml = itemHtml.replace(/{{itemLabel3Label}}/g, itemLabel3LabelHtml)
    itemHtml = itemHtml.replace(/{{itemPreorderLabel}}/g, itemPreorderLabelHtml)

    // Add Quick view button
    var itemQuickViewBtnHtml = boostPFSConfig.custom.quick_shop_enable
      ? boostPFSTemplate.quickViewBtnHtml
      : ""
    itemHtml = itemHtml.replace(/{{itemQuickViewBtn}}/g, itemQuickViewBtnHtml)

    // Add Review badge
    var itemReviewHtml = boostPFSConfig.custom.review_enable
      ? boostPFSTemplate.reviewHtml
      : ""
    itemHtml = itemHtml.replace(/{{itemReview}}/g, itemReviewHtml)

    // Add Vendor
    var itemVendorHtml = boostPFSConfig.custom.vendor_enable
      ? boostPFSTemplate.vendorHtml
      : ""
    itemHtml = itemHtml.replace(/{{itemVendor}}/g, itemVendorHtml)

    // Add Price
    var itemPriceHtml = ""
    itemPriceHtml +=
      '<span class="price ' +
      onSaleClass +
      '" itemprop="offers" itemscope itemtype="http://schema.org/Offer">'
    itemPriceHtml +=
      '<meta itemprop="price" content="' +
      _utils.stripHtml(_utils.formatMoney(data.price_min)) +
      '" />'
    itemPriceHtml +=
      '<meta itemprop="priceCurrency" content="' +
      boostPFSConfig.shop.currency +
      '" />'
    itemPriceHtml +=
      '<meta itemprop="seller" content="' + boostPFSConfig.shop.name + '" />'
    itemPriceHtml +=
      '<meta itemprop="availability" content="' + soldOutClass + '" />'
    itemPriceHtml += '<meta itemprop="itemCondition" content="New" />'
    if (!soldOut) {
      if (priceVaries && data.price_min > 0) {
        itemPriceHtml +=
          "<small><em>" + boostPFSConfig.label.from_price + "</em></small> "
      }
      if (data.price_min > 0) {
        itemPriceHtml +=
          '<span class="money">' +
          _utils.formatMoney(data.price_min) +
          "</span>"
      } else {
        itemPriceHtml += boostPFSConfig.label.free_price
      }
    } else {
      itemPriceHtml +=
        '<span class="sold_out">' + boostPFSConfig.label.sold_out + "</span>"
    }
    if (onSale) {
      itemPriceHtml +=
        ' <span class="was_price"><span class="money">' +
        _utils.formatMoney(data.compare_at_price_max) +
        "</span></span>"
    }
    itemPriceHtml += "</span>"
    itemHtml = itemHtml.replace(/{{itemPrice}}/g, itemPriceHtml)

    // Add Color swatches
    var itemSwatchHtml = ""
    if (boostPFSConfig.custom.collection_swatches) {
      for (var k in data.options) {
        if (
          data["options"][k].indexOf("color") > -1 ||
          data["options"][k].indexOf("couleur") > -1
        ) {
          var selectedOption = data["options"][k]
          var values = []
          itemSwatchHtml += '<div class="collection_swatches">'
          for (var i = 0; i < data["variants"].length; i++) {
            var value = data["variants"][i]["option_" + selectedOption]
            if (values.indexOf(value) == -1) {
              values = values.join(",")
              values += "," + value
              values = values.split(",")
              var variantImage = boostPFSConfig.general.no_image_url
              var temp = data.options_with_values.filter(function (e) {
                return e.name == selectedOption
              })
              if (typeof temp[0] !== "undefined") {
                var optionValues = temp[0]["values"].filter(function (e) {
                  return e.title == value
                })
                if (typeof optionValues[0] !== "undefined") {
                  var imageIndex = optionValues[0]["image"]
                  if (typeof data["images"][imageIndex] !== "undefined") {
                    variantImage = data["images"][imageIndex]["src"]
                  }
                }
              }
              if (variantImage !== "") {
                itemSwatchHtml +=
                  '<a href="' +
                  _utils.buildProductItemUrl(data) +
                  "?variant=" +
                  data["variants"][i]["id"] +
                  '" class="swatch">'
                itemSwatchHtml +=
                  '<span data-image="' +
                  _utils.optimizeImage(variantImage, "1024x1024") +
                  '" style="background-color: ' +
                  value +
                  "; background-image: url(" +
                  boostPFSConfig.general.asset_url.replace(
                    "boost-pfs-filter.js",
                    value + "_50x.png"
                  ) +
                  ');"></span>'
                itemSwatchHtml += "</a>"
              }
            }
          }
          itemSwatchHtml += "</div>"
        }
      }
    }
    itemHtml = itemHtml.replace(/{{itemSwatches}}/g, itemSwatchHtml)

    // Add new row
    var itemNewRowHtml =
      index > 0 && index % boostPFSConfig.custom.products_per_row == 0
        ? boostPFSTemplate.newRowHtml
        : ""
    itemHtml = itemHtml.replace(/{{itemNewRow}}/g, itemNewRowHtml)

    // Add main attribute
    itemHtml = itemHtml.replace(/{{itemId}}/g, data.id)
    itemHtml = itemHtml.replace(/{{itemHandle}}/g, data.handle)
    itemHtml = itemHtml.replace(/{{itemTitle}}/g, data.title)
    itemHtml = itemHtml.replace(/{{itemVendorLabel}}/g, data.vendor)
    itemHtml = itemHtml.replace(
      /{{itemUrl}}/g,
      _utils.buildProductItemUrl(data)
    )

    return itemHtml
  }

  // Build advanced class
  function buildItemCollectionGroupThumbClass(index, productsPerRow) {
    var temp = index < productsPerRow ? index : index % productsPerRow
    if (temp == 0) {
      return "omega"
    } else if (temp == 1) {
      return "alpha"
    }
    return ""
  }

  // Build Pagination
  ProductPaginationDefault.prototype.compileTemplate = function (totalProduct) {
    if (!totalProduct) totalProduct = this.totalProduct

    // Get page info
    var currentPage = parseInt(Globals.queryParams.page)
    var totalPage = Math.ceil(totalProduct / Globals.queryParams.limit)

    if (
      Settings.getSettingValue("general.paginationType") == "default" &&
      totalPage > 1
    ) {
      var paginationHtml = boostPFSTemplate.paginateHtml

      // Build Previous
      var previousHtml = currentPage > 1 ? boostPFSTemplate.previousHtml : ""
      previousHtml = previousHtml.replace(
        /{{itemUrl}}/g,
        _utils.buildToolbarLink("page", currentPage, currentPage - 1)
      )
      paginationHtml = paginationHtml.replace(/{{previous}}/g, previousHtml)

      // Build Next
      var nextHtml = currentPage < totalPage ? boostPFSTemplate.nextHtml : ""
      nextHtml = nextHtml.replace(
        /{{itemUrl}}/g,
        _utils.buildToolbarLink("page", currentPage, currentPage + 1)
      )
      paginationHtml = paginationHtml.replace(/{{next}}/g, nextHtml)

      // Create page items array
      var beforeCurrentPageArr = []
      for (
        var iBefore = currentPage - 1;
        iBefore > currentPage - 3 && iBefore > 0;
        iBefore--
      ) {
        beforeCurrentPageArr.unshift(iBefore)
      }
      if (currentPage - 4 > 0) {
        beforeCurrentPageArr.unshift("...")
      }
      if (currentPage - 4 >= 0) {
        beforeCurrentPageArr.unshift(1)
      }
      beforeCurrentPageArr.push(currentPage)

      var afterCurrentPageArr = []
      for (
        var iAfter = currentPage + 1;
        iAfter < currentPage + 3 && iAfter <= totalPage;
        iAfter++
      ) {
        afterCurrentPageArr.push(iAfter)
      }
      if (currentPage + 3 < totalPage) {
        afterCurrentPageArr.push("...")
      }
      if (currentPage + 3 <= totalPage) {
        afterCurrentPageArr.push(totalPage)
      }

      // Build page items
      var pageItemsHtml = ""
      var pageArr = beforeCurrentPageArr.concat(afterCurrentPageArr)
      for (var iPage = 0; iPage < pageArr.length; iPage++) {
        if (pageArr[iPage] == "...") {
          pageItemsHtml += boostPFSTemplate.pageItemRemainHtml
        } else {
          pageItemsHtml +=
            pageArr[iPage] == currentPage
              ? boostPFSTemplate.pageItemSelectedHtml
              : boostPFSTemplate.pageItemHtml
        }
        pageItemsHtml = pageItemsHtml.replace(/{{itemTitle}}/g, pageArr[iPage])
        pageItemsHtml = pageItemsHtml.replace(
          /{{itemUrl}}/g,
          _utils.buildToolbarLink("page", currentPage, pageArr[iPage])
        )
      }
      paginationHtml = paginationHtml.replace(/{{pageItems}}/g, pageItemsHtml)
      return paginationHtml
    }
    return ""
  }

  ProductPaginationLoadMore.prototype.compileTotalTemplate = function () {
    /**
     * If enable the Load previous feature and the evnet type is page:
     * => Get the next loading page is from session storage OR get the next loading page from query param
     */
    // console.log(_utils.isLoadPreviousPagePaginationType())
    if (
      _utils.isLoadPreviousPagePaginationType() &&
      this.parent.eventType == "page"
    ) {
      this.nextPage = parseInt(
        window.sessionStorage.getItem(
          this.settings.sessionStorageCurrentNextPage
        )
      )
    } else {
      this.nextPage = Globals.queryParams.page
    }
    // Set from index
    var from = (this.nextPage - 1) * Globals.queryParams.limit + 1
    if (jQ(Selector.products + " > column").length) {
      from -=
        jQ(Selector.products + " > column").length - Globals.queryParams.limit
    }
    // Set to index
    var product_index = (this.nextPage - 1) * Globals.queryParams.limit + 1
    var to = product_index + this.data.products.length - 1

    return this.getTemplate("total")
      .replace(/{{progressLable}}/g, Labels.loadMoreTotal)
      .replace(/{{ from }}/g, from)
      .replace(/{{ to }}/g, to)
      .replace(/{{ total }}/g, this.totalProduct)
      .replace(/{{class.productLoadMore}}/g, Class.productLoadMore)
  }

  // Build Sorting
  ProductSorting.prototype.compileTemplate = function () {
    var html = ""
    if (boostPFSTemplate.hasOwnProperty("sortingHtml")) {
      var sortingArr = _utils.getSortingList()
      if (sortingArr) {
        // Build content
        var sortingItemsHtml = ""
        for (var k in sortingArr) {
          sortingItemsHtml +=
            '<option value="' + k + '">' + sortingArr[k] + "</option>"
        }
        var html = boostPFSTemplate.sortingHtml.replace(
          /{{sortingItems}}/g,
          sortingItemsHtml
        )
      }
    }
    return html
  }

  // Build Breadcrumb
  Breadcrumb.prototype.compileTemplate = function (colData, apiData) {
    if (!colData) colData = this.colData
    if (!apiData) apiData = this.apiData

    if (
      typeof colData !== "undefined" &&
      colData.hasOwnProperty("collection")
    ) {
      var colInfo = colData.collection

      var breadcrumbHtml =
        '<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="' +
        boostPFSConfig.shop.url +
        '" title="' +
        boostPFSConfig.shop.name +
        '" itemprop="item"><span itemprop="name">' +
        boostPFSConfig.label.breadcrumb_home +
        "</span></a></span>"
      breadcrumbHtml += ' &nbsp;<span class="icon-arrow-right"></span>'
      breadcrumbHtml +=
        ' <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="/collections/' +
        colInfo.handle +
        '" title="{{currentCollectionTitle}}" itemprop="item"><span itemprop="name">{{currentCollectionTitle}}</span></a></span>'
      // Build Tags
      var currentTagsHtml = ""
      if (Array.isArray(boostPFSConfig.general.current_tags)) {
        var current_tags = boostPFSConfig.general.current_tags
        for (var k in current_tags) {
          var tag = current_tags[k]
          currentTagsHtml += ' &nbsp;<span class="icon-arrow-right"></span>'
          currentTagsHtml +=
            ' <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="/collections/{{currentCollectionLink}}" title="' +
            tag +
            '" itemprop="item"><span itemprop="name">' +
            tag +
            "</span></a></span>"
        }
      }
      breadcrumbHtml += currentTagsHtml
      // Build Collection Info
      breadcrumbHtml = breadcrumbHtml
        .replace(/{{currentCollectionLink}}/g, "/collections/" + colInfo.handle)
        .replace(/{{currentCollectionTitle}}/g, colInfo.title)
      // Top Pagination
      // var currentPage = parseInt(Globals.queryParams.page);
      // var totalPage = Math.ceil(apiData.total_product / Globals.queryParams.limit);
      // var topPaginationHtml = ' &nbsp;<span class="icon-arrow-right"></span> ' + (boostPFSConfig.label.breadcrumb_page).replace(/{{ current_page }}/g, Globals.queryParams.page).replace(/{{ pages }}/g, totalPage)
      // breadcrumbHtml += topPaginationHtml;
      breadcrumbHtml +=
        ' <span class="boost-pfs-filter-breadcrumb-page"></span>'

      return breadcrumbHtml
    }
  }

  // Add additional feature for product list, used commonly in customizing product list
  ProductList.prototype.afterRender = function (data) {
    if (!data) data = this.data
    buildTheme()

    if (!_utils.isMobile() && boostPFSConfig.custom.quick_shop_enable) {
      // Build content for Quick view
      ProductList.prototype.buildExtrasProductListByAjax(
        data,
        "boost-pfs-quickview",
        function (results) {
          results.forEach(function (result, index) {
            // Append the custom html to product item
            jQ('[data-boost-pfs-theme-quickview="' + result.id + '"]').append(
              result.quickview_html
            )
            buildTheme()
          })
        }
      )
    }

    buildCurrentPageInBreadcrumb()
  }

  // Build additional elements
  FilterResult.prototype.afterRender = function (data) {
    if (!data) data = this.data

    // Add Wrapper for Product list
    if (jQ(".boost-pfs-filter-products").children().hasClass("products")) {
      jQ(".boost-pfs-filter-products").children().children().unwrap()
    }

    buildCurrentPageInBreadcrumb()
  }

  function buildTheme() {
    collection.init()
    Shopify.PaymentButton.init()
    if (
      boostPFSConfig.custom.show_multiple_currencies &&
      window.convertCurrencies &&
      typeof convertCurrencies == "function"
    ) {
      convertCurrencies()
    }
  }

  function buildCurrentPageInBreadcrumb() {
    // Build Breadcrumb
    var totalPage = Math.ceil(
      Globals.collectionCount / Globals.queryParams.limit
    )
    var topPaginationHtml =
      '&nbsp;<span class="icon-arrow-right"></span> ' +
      boostPFSConfig.label.breadcrumb_page
        .replace(/{{ current_page }}/g, Globals.queryParams.page)
        .replace(/{{ pages }}/g, totalPage)
    jQ(".boost-pfs-filter-breadcrumb-page").html(topPaginationHtml)
  }
})()

/* Begin patch boost-010 run 2 */
Filter.prototype.beforeInit=function(){var t=this.isBadUrl();t&&(this.isInit=!0,window.location.href=window.location.pathname)},Filter.prototype.isBadUrl=function(){try{var t=decodeURIComponent(window.location.search).split("&"),e=!1;if(t.length>0)for(var n=0;n<t.length;n++){var i=t[n],r=(i.match(/</g)||[]).length,a=(i.match(/>/g)||[]).length,o=(i.match(/alert\(/g)||[]).length,h=(i.match(/execCommand/g)||[]).length;if(r>0&&a>0||r>1||a>1||o||h){e=!0;break}}return e}catch(l){return!0}};
/* End patch boost-010 run 2 */

#html #css #javascript

Card

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

#javascript #js #cdnjs #searcha #api

CDNJS search

async function cdnjs(query){
	return await fetch("https://2qwlvlxzb6-2.algolianet.com/1/indexes/*/queries", {
		headers: {
		  accept: "*/*",
		  "content-type": "application/x-www-form-urlencoded",
		  "x-algolia-api-key": `2663c73014d2e4d6d1778cc8ad9fd010`,
		  "x-algolia-application-id": `2QWLVLXZB6`,
		},
		body: JSON.stringify({
		  requests: [{ indexName: "libraries", params: e`query=${q}` }],
		}),
		method: "POST",
	      })
		.then((res) => res.json())
		.then((res) => {
		  let results = res.results[0].hits;
		  return results.map((item) => ({
		    name: item.name,
		    keywords: item.keywords,
		    snippet: item.description,
		    author: item.author,
		  }));
		});
}

#javascript #api #js #autocomplete #google

Google autocomplete API

async function autocomplete(text){
	return JSON.parse(await fetch("https://www.google.com/complete/search?q=testing&client=Firefox").then(res => res.text()))[1];
}

#javascript #js #api

Another grammar checker

function checkGrammar(text){
    const opts = {
        headers: {
            "accept": "application/vnd.splat+json",
        }
    }
    return new Promise(async (resolve) => {
        let job = await fetch("https://api.cram.com/article-evaluations", {
          "body": JSON.stringify({
              "text": text,
              "evaluate":["grammar","plagiarism"]
          }),
          "method": "POST",
          ...opts,
        }).then(res => res.json())
        let int = setInterval(async () => {
            let res = await fetch(`https://api.cram.com/article-evaluations/${job.data.id}`, {
              "headers": {
                "accept": "application/vnd.splat+json",
              },
              "method": "GET",
            }).then(res => res.json())
            if (res.data.is_success === 1){
                clearInterval(int);
                return resolve(res.data.result);
            }
        }, 500)
    });
}

#javascript #js #api

Grammar check text

/**
 * @param {String} text The text to check
 * @returns {Promise.<Object>}
 * @example
 *  // ⇒ {
 *  //   "Corrections": [...],
 *  //   "Sentences": [...]
 *  //}
 */
async function grammar(text){
	let res = await fetch(`https://services.gingersoftware.com/Ginger/correct/jsonSecured/GingerTheTextFull?callback=$&text=${encodeURIComponent(text)}&apiKey=GingerWebsite&clientVersion=2.0&lang=US`).then(res => res.text())
	return JSON.parse(res.replace(/^\$\(/, "").replace(/\);?$/, ""));//Returns a 'callback'
}

#js #javascript #text #api

Get the parts of speech for a sentence

/**
* Gets parts of speech for a sentence
* @param {String} text The text to get parts of speech for.
* @returns {Promise.<Object>} Resolves into a list of parts of speech. (Or rejects with an error)
* @example 
* var parts_of_speech  = await parts_of_speech("Sometimes I just want to code in JavaScript all day.");
* // ⇒
* // {entities: Array(1), sentiments: Array(1), documentInfo: {…}, wordFreq: Array(4), taggedText: '<span class="tag ADV">Sometimes</span> <span class…>all</span> <span class="tag DURATION">day</span>'}
function parts_of_speech(text) {
*/
function parts_of_speech(text) {
  return new Promise(async (resolve, reject) => {
    fetch("https://showcase-serverless.herokuapp.com/pos-tagger", {
      headers: {
        accept: "application/json",
        "content-type": "application/json",
      },
      body: JSON.stringify({ sentence: text }),
      method: "POST",
    })
      .then((res) => res.json())
      .then(resolve)
      .catch(reject);
  });
}

#js #javascript #rewrite #api

Rewrite text

/**
* Rewrites text
* @param {String} text The text to rewrite.
* @returns {Promise.<String[]>} Resolves into a list of about 10 rewritten versions. (Or rejects with an error)
* @example 
* var rewritten  = await rewrite("Sometimes I just want to code in JavaScript all day.");
* // ⇒ [
* //    "I sometimes just want to code JavaScript all day.",
* //    "JavaScript is my favorite programming language sometimes.",
* //    "I sometimes wish I could code in JavaScript all day.",
* //    "JavaScript is sometimes all I want to do all day.",
* //    "I like JavaScript sometimes and want to code all day long.",
* //    "Some days I just want to work all day in JavaScript.",
* //    "It's not uncommon for me to just want to code in JavaScript all day.",
* //    "My favorite thing to do sometimes is just code JavaScript all day.",
* //    "My favourite coding language is JavaScript, which I can code all day.",
*//     "JavaScript is my preferred language sometimes, since it lets me code all day.",
*// ];
*/
function rewrite(text) {
  return new Promise(async (resolve, reject) => {
    var { suggestions, error_code, error_msg, error_msg_extra } = await fetch(
      "https://api.wordtune.com/rewrite-limited",
      {
        headers: {
          accept: "*/*",
          "accept-language": "en-US,en;q=0.9",
          "content-type": "application/json",
          "x-wordtune-origin": "https://www.wordtune.com",
        },
        referrer: "https://www.wordtune.com/",
        body: JSON.stringify({
          action: "REWRITE",
          text: text,
          start: 0,
          end: text.length,
          selection: {
            wholeText: text,
            start: 0,
            end: text.length,
          },
        }),
        method: "POST",
      }
    ).then((res) => res.json());
    if (error_code || error_msg || error_msg_extra) {
      reject({
        code: error_code,
        message: error_msg,
        message_extra: error_msg_extra,
      });
    } else {
      resolve(suggestions);
    }
  });
}

#javascript #google #translate #api

Google translate

/**
 * Translates text to a certain language.
 * @param {String} text The text to translate (or an options object)
 * @param {String} target The target language to translate to.
 * @param {String} source The source language.
 * @returns {Promise.<object>} Returns a promise resolving into an object with the translated text, raw response JSON, the original text, and the target and source languages.
 * @example
 * var translated = await translate("Hello world", "fr");
 * // ⇒ 
 * // {
 * //   source: "en", 
 * //   original: "Hello world",
 * //   translated: "Bonjour le monde",
 * //   result: "weird google stuff here"
 * // }
 *
 */
async function translate(text, target, source, proxy) {
  if (typeof text == "object") {
    target = text.target;
    source = text.source;
    proxy = text.proxy;
    text = text.text;
  }
  var opts = {
    text: text || "",
    source: source || 'auto',
    target: target || "en",
    proxy: proxy || "",
	}
  var result = await fetch(
    `https://${opts.proxy}translate.googleapis.com/translate_a/single?client=gtx&sl=${opts.source}&tl=${opts.target}&dt=t&q=${encodeURI(opts.text)}`
  ).then(res => res.json());
  return {
    source: opts.source,
    target: opts.target,
    original: text,
    translated: result[0]?.[0]?.[0],
    result,
  };
}

#javascript

template literal syntax - Google Search

//Regular string
var rgb = "rgb(" + r + "," + g + "," + b + ")";
//Template literal
var rgb = `rgb(${r}, ${g}, ${b})`;

#javascript #url #validation #string

Verify if some string is valid URL, JavaScript

/**
 * Provides quick & simple way to verify if some
 * string is valid URL
 *
 * @param   <string>  URL to verify
 * @returns <boolean> Returns true if passed string
 *                    is valid URL, false otherwise
 */
function validateUrl (url) {
    try {
        new URL(url)
    } catch (error) {
        return false
    }
  
    return true
}

#javascript #dom #events #web #client-side #hander

Handler for event «HTML document has been completely loaded and parsed», JavaScript / web / client-side

document.addEventListener('DOMContentLoaded', function (evt) {
  /* ... */
})

#javascript #email #validation

Strict e-mail address verification, JavaScript

/**
 * Provides strict e-mail address verification close to RFC
 * Includes support for unicode
 *
 * @param   <string>  E-mail address to verify
 * @returns <boolean> Returns true if e-mail address is considered to be valid,
 *                    false otherwise
 */

export default function validateEmail (email) {
    return typeof email === 'string' &&
        email &&
        email.length < 256 &&
        /^(?:[0-z!#$%&'*+/=?^_`{|}.~-]|[^\u0000-\u007F]){1,64}@(?:(?:[0-z-]|[^\u0000-\u007F]){1,62}\.)+(?:[0-z]|[^\u0000-\u007F]){2,63}$/i.test(email) &&
        !email.includes('..') &&
        !email.startsWith('.') &&
        !email.includes('.@') &&
        !email.includes('-.') &&
        !email.includes('.-')
}

#javascript #nodejs #magento #document_root #resolve #module #mjs

Resolve Magento 1 / Magento 2 root folder running inside the Magento tree but w/o Magento env, JavaScript module (.mjs) for NodeJs

import { realpathSync as realpath, accessSync as access, existsSync as exists } from 'fs'
import { dirname } from 'path'

/**
 * IIFE to resolve Magento document root
 * @returns <string> Returns Magento document root
 */
export const mageRoot = (() => {
    let mageRoot = dirname(realpath(import.meta.url.slice(7)))

    while (!(exists(`${ mageRoot }/app/Mage.php`) || exists(`${ mageRoot }/bin/magento`))) {
        mageRoot = dirname(mageRoot)
    }

    return mageRoot
})()

#javascript

Hide Deal Reg Button from Group

jQuery(document).ready(function ($) {
 
 
  var isLoggedIn = !!$(".logged-in").length;
 
  function visibilityDriver() {
    for (scenario of visScenarios) {
      if (scenario.condition) {
        scenario.outcome();
      }
    }
  }
 
  var visScenarios = [
    {
      condition: isLoggedIn && abUser.group_id.indexOf("1791") > -1,
      outcome: function () {
        $("a.deal_reg").hide();
      },
    },
  ];
 
  visibilityDriver();
 
  
});

#javascript

Create New Item

jQuery(document).ready(function($) {
 
 
var isLoggedIn = !!$(".logged-in").length;   
var group92 = isLoggedIn && ($(".administrator").length || abUser.group_id.indexOf("92") > -1);
 
function visibilityDriver() {
    for (scenario of visScenarios) {
        if (scenario.condition) {
            scenario.outcome();
        }
    }
}
 
var visScenarios = [
    {
        condition: !group92,
        outcome: function () {
            createNavItem('alliances', 'https://riskrecon.allbound.com/playbooks/?playbooks_category=alliances&filtered=what', 'gear', 'Alliances')
        },
    },
];
 
visibilityDriver();
 
 
});

#javascript

Hide Filter Tag

.post-type-archive-learn
  #filter_results
  > div
  > form
  > span:nth-child(9)
  > span.selection
  > span {
  display: none;
}

#javascript

Group Visibility of Items

/*--- hide left side items ---*/
.subscriber li.menu-pipeline,
.subscriber li.menu-mdf,
.subscriber li.menu-prospect {display: none; }
 
 
 
// JS to show left nav items
jQuery(document).ready(function ($) {
 
 
  var isLoggedIn = !!$(".logged-in").length;
 
  var pipelineItem = "li.menu-pipeline";
  var mdfItem = "li.menu-mdf";
  var prospectPagesItem = "li.menu-prospect";
 
  var eliteCanSeePages = !!(isLoggedIn && abUser.group_id.indexOf("31") > -1);
  var premierCanSeePages = !!(isLoggedIn && abUser.group_id.indexOf("32") > -1);
 
  function showPipeline() {
    return $(pipelineItem).show();
  }
 
  function showMdf() {
    return $(mdfItem).show();
  }
 
  function showProspectPages() {
    return $(prospectPagesItem).show();
  }
 
  function scenarioDriver() {
    for (scenario of scenarios) {
      if (scenario.page && scenario.condition) {
        scenario.outcome();
        break;
      }
    }
  }
 
  var scenarios = [
    {
      condition: eliteCanSeePages || premierCanSeePages,
      page: true,
      debugger: [
        "Logic: if user is in group id 31 or 32, show pipeline mdf and prospect pages",
      ],
      outcome: function () {
        showPipeline();
        showMdf();
        showProspectPages();
      },
    },
  ];
 
  scenarioDriver();
}); // end ready function

#javascript

Rename Dashboard Item

jQuery(document).ready(function ($) {

  var dashboardItem = '.menu_main li.menu-dashboard a'
  var newDashboardItem = '<span class="icon-main-dashboard"></span>Test Text Here'

  function changeHtml() {
      for (el of newHtml) {
      $(el.selector).html(el.changedTo);
      }
  }
  
  var newHtml = [

       {
    selector: dashboardItem,
    changedTo: newDashboardItem,
       },
  ];
  
  changeHtml();
  }); //end ready function

#javascript

Update Footer Text

jQuery(document).ready(function ($) {

  //update footer text
  $("div.footer_content").html(
    '<p>©2022 Account Name Here. All rights reserved. v4.17.0<br><a href="https://policies.google.com/privacy?hl=en-US">Privacy Policy</a></p>'
  );


}); // end rdy function

#javascript

Make a Field Read Only

$('#input_2_16').attr('readonly', true);

#javascript

Add Text to Login Box

$("body > section > main > div > div.login_box.main_login > p").append(
  "<br><p><i>Please note that Chrome is the preferred browser.</i>"
);

#javascript

Add Privacy Policy to Login Box

jQuery(document).ready(function ($) {
 
  
  $("body > section > main > div > div.login_box.main_login > p").append(
    '<p><br><a href="https://policies.google.com/privacy?hl=en-US">Google Privacy Policy</a>'
  );
  
  
}); // end ready function

#javascript #css

Implement Partner Logo Badges

/*-- css for partner tier styles --*/
.tier_level {
     height: auto;
     float: right;
     padding-right: 10px;
}
.tier_level img {
    height: 65px;
    width: auto;
    position: absolute;
    top: -3px;
    right: 275px;
}
@media only screen and (max-width: 600px){
  .tier_level img {
      right: 50px;
      top: 1px;
      height: 55px;
  }
}
 
 
 
// JS to display logos based on group
jQuery(document).ready(function ($) {
 
    var isLoggedIn = !!$(".logged-in").length;
    var myGroups = isLoggedIn ? abUser.group_id : [];
 
    function partnerTierFunction() {
      // set up DOM
      $("#header .wrapper").append('<div class="tier_level"></div>');
      // create object for partner tiers
      var myTier = {
        "19": {
          name: "Steel",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233007/BS_Badge_Steel_White.png"
        },
        "23": {
          name: "Cobalt",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233001/BS_Badge_Cobalt_White.png"
        },
        "24": {
          name: "Sky",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233005/BS_Badge_Sky_White.png",
        },
        "25": {
          name: "Sapphire",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233003/BS_Badge_Sapphire_White.png",
        },
      };
 
      // check if the user is in a tier group
      for (var i = 0; i < myGroups.length; i++) {
        // associate tier label to group values
        var groups = myGroups[i];
        var tier = myTier[groups];
        // populate DOM with tier label
        if (tier !== undefined) {
          var $z = $("div.tier_level");
          $z.append('<img src="' + tier["image"] + '">');
          break;
        }
      }
    }
 
    function visibilityDriver() {
      visScenarios.forEach(function(scenario) {
        if (scenario.condition) {
          scenario.outcome();
        }
      })
    }
    
    var visScenarios = [
      {
        condition: isLoggedIn,
        outcome: function () {
          partnerTierFunction();
        },
      },
    ];
    visibilityDriver();
 
}); // end ready function

#javascript

Update Message when Denied Content Access

$(".single-engage #body_block > section > div.main_content.wrapper > article > div > p").html(
  'You do not have permission to view this brands content.<br>Please contact <a href="mailto:testemail@allbound.com">testemail.allbound.com</a> to request access.'
);

#javascript #css

Update 'Deal' Verbiage Throughout Portal

/*-- CSS deal to opportunity edits --*/
.single-prospect_page ul.tab_nav li:nth-child(4) a { visibility:hidden; }
.deal-child .pipeline_overview h2.page_title,
.deal-child article h1,
#box_tab_related_deals .not_available,
#box_tab_related_deals .existing_deal_btn,
#box_tab_related_deals p,
#box_tab_related_deals h2,
.ab_header_btns .deal_reg .btn_title,
.deal_table thead tr th:nth-child(2),
.pipeline_summary .flex:nth-child(2) h3,
.pipeline_summary .flex:nth-child(3) h3,
.coach_sidebar_title,
.coach_overview__name .coach_overview__label { display:none; }

  // JS deal to opportunity edits
  $('.deal-child .pipeline_overview h2.page_title').html('Register an Opportunity').show();
  $('.deal-child article h1').html('Opportunity Registration').show();
  $('.coach_overview__name .coach_overview__label').html('Opportunity Name').show();
  $('.coach_sidebar_title').html('Opportunity Information').show();
  $('.pipeline_summary .flex:nth-child(2) h3').html('Number of Opportunities').show();
  $('.pipeline_summary .flex:nth-child(3) h3').html('Average Opportunity Size').show();
  $('.deal_table thead tr th:nth-child(2)').html('Opportunity Name').show();
  $('#tiptip_content').hide();
  $('.ab_header_btns .deal_reg').attr('title', 'Create an Opportunity');
  $('.ab_header_btns .deal_reg .btn_title').html('Opp Reg').show();
  $('.single-prospect_page ul.tab_nav li:nth-child(4) a').html('Related Opportunities').css('visibility', 'visible');
  $('#box_tab_related_deals h2').html('Related Opportunities').show();
  $('#box_tab_related_deals p').text('View Opportunities associated with this Prospect Page.').show();
  $('#box_tab_related_deals .existing_deal_btn').text('Link to a related Opportunity').show();
  $('#box_tab_related_deals .not_available').text("You don't have any Opportunities associated with this Prospect Page.").show();

#javascript

Update Registration Restricted Message

jQuery(document).ready(function ($) {


  function changeHtml() {
    for (el of newHtml) {
      $(el.selector).html(el.changedTo);
    }
  }

  var newHtml = [
    {
      selector: "#signup_form h1.no_companies_allowed",
      changedTo: "REGISTRATION DENIED",
    },

    {
      selector: "#signup_form p.no_companies_allowed",
      changedTo:
        'Sorry, registration is restricted to pre-approved company domains. <a href="https://integrationtesting.allbound.com/"> Please try again</a>  with your company email.<p><br>If you are not currently a partner, please click <a href="https://www.allbound.com/partners/">here</a> to request more information.',
    },
  ];

  changeHtml();


}); //end ready function

#javascript

Populate Group IDs

jQuery(document).ready(function ($) {

  var isLoggedIn = !!$(".logged-in").length;

  var isDealSubmit = !!$(".page-id-548").length;
  var isSingleDeal = !!$(".single-deal").length;
  var groupIdField = "#input_19_39";

  function scenarioDriver() {
    for (var i = 0; i < scenarios.length; i++) {
      if (scenarios[i].condition) {
        scenarios[i].outcome();
      }
    }
  }

  var scenarios = [
    {
      condition: isLoggedIn,
      page: isDealSubmit || isSingleDeal,

      outcome: function () {
        if (abUser.group_id.indexOf("14") > -1) {
          $(groupIdField).val("Consultants");
        } else if (abUser.group_id.indexOf("15") > -1) {
          $(groupIdField).val("Technology Partners");
        }
      },
    },
  ];

  scenarioDriver();


});

#javascript #smartedit

page redirect that ignores smartedit

<script type="text/javascript">
    if (window.parent.location.pathname.indexOf("smartedit") <= -1) {
        // Only redirect if NOT in smartedit
    	window.location.replace("/warranty-your-way");
    }else if (window.parent.location.pathname.indexOf("smartedit") >= 0){
    	// IS smartedit, show comment	
       	document.getElementById("redirectJS").style.display = "block";
	}
    
</script>

<h3 id="redirectJS" style="display: none; text-align: center;"> redirect code </h3>

#javascript

do while loop

var o = 0;

do{
	alert("do while loop: " + o)
	o++;
} while(o < 10);

#javascript

while loop

var counter = 0;

while(counter < 5) {
alert(counter);
counter++;
}

#javascript

normal loop

var numberList = ([1,2,3,4,5,6,7,8,9,10]);

	for (let i = 0; i < numberList.length; i++) {

		console.log(numberList[i]);
	}

#javascript

if else - Google Search

var age=20;
if (age < 18) {
	console.log("underage");
} else {
	console.log("let em in!");
}

#javascript

Change CAM Widget Verbiage

jQuery(document).ready(function ($) {

  function changeHtml() {
    for (el of newHtml) {
      $(el.selector).text(el.changedTo);
    }
  }

  var newHtml = [
    {
      selector: ".dashboard-minimal .dashboard-quicklinks .btn--minimal--blue",
      changedTo: "View My Partner Manager",
    },

    {
      selector: "#channel_manager .section_title h3",
      changedTo: "My Partner Manager",
    },
  ];

  changeHtml();
}); //end ready function

#javascript

Geolocation.getCurrentPosition() - Web APIs | MDN

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(pos) {
  var crd = pos.coords;

  console.log('Your current position is:');
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);
}

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

navigator.geolocation.getCurrentPosition(success, error, options);

#javascript

filter - remove multiple values from array

function destroyer(arr, ...valsToRemove) {
  return arr.filter(elem => !valsToRemove.includes(elem));
}

destroyer([1, 2, 3, 1, 2, 3], 2, 3, )

#javascript

access arguments not specified in parameters

function func1(a, b, c) {
  console.log(arguments[0]);
  // expected output: 1

  console.log(arguments[1]);
  // expected output: 2

  console.log(arguments[2]);
  // expected output: 3
}

func1(1, 2, 3);

#javascript

changing text content or selecting text content

document.querySelector('.message').textContent = 'Correct Number!';

#javascript

flex

$.fn.showFlex = function() { this.css('display','flex'); }

$(".element").showFlex();

#javascript #iphone

Apple iPhone 13 PRO (2021), CSS viewport resolution, pixel density, screen size, media queries

window.devicePixelRatio
// Which will return the figure 3

#javascript

javascript - Polling API every x seconds with react - Stack Overflow

let apiTimeout = setTimeout(fetchAPIData, 1000);

function fetchAPIData(){
    fetch('API_END_POINT')
    .then(res => {
            if(res.statusCode == 200){
                // Process the response and update the view.
                // Recreate a setTimeout API call which will be fired after 1 second.
                apiTimeout = setTimeout(fetchAPIData, 1000);
            }else{
                clearTimeout(apiTimeout);
                // Failure case. If required, alert the user.
            }
    })
    .fail(function(){
         clearTimeout(apiTimeout);
         // Failure case. If required, alert the user.
    });
}

#bookmarklet #javascript

Format phone numbers in input fields bookmarklet

javascript:(function() {  document.querySelector('input:focus').value=document.querySelector('input:focus').value.replace(/(\d{3})(\d{3})(\d{4})/,(m,p1,p2,p3)=>'('+p1+') '+p2+'-'+p3);})();

#javascript

Error: Cannot find module - Google Search

//You should try running these node commands

//npm init
//npm i express --save
//node . (To restart node)

#javascript

Error: Cannot find module - Google Search

// Try running the following commands

npm install -g
npm init -y
npm init

#javascript

random number between two values

function randomInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

#javascript

check for falsy values (null, undefined, NaN, false, 0, "")

if (!variable) {
  // When the variable has a falsy value the condition is true.
}

#javascript

bar graph java script import

https://cdn.jsdelivr.net/npm/chart.js

#javascript

costume-bank-preparation

thead.table-costume-bank-preparation {
                tr{
                    th:nth-child(1) {
                        position: -webkit-sticky !important;
                        position: sticky !important;
                        left: 0 !important;
                        width: 24rem !important;
                        max-width: 24rem !important;
                        background-color: #EFF0F9;
                    }

                    th:nth-child(2) {
                        position: -webkit-sticky !important;
                        position: sticky !important;
                        left: 0 !important;
                        width: 12rem !important;
                        max-width: 12rem !important;
                        background-color: #EFF0F9;
                    }

                    th:nth-child(3) {
                        position: -webkit-sticky !important;
                        position: sticky !important;
                        left: 0 !important;
                        width: 12rem !important;
                        max-width: 12rem !important;
                        background-color: #EFF0F9;
                    }

                    th:nth-child(4) {
                        position: -webkit-sticky !important;
                        position: sticky !important;
                        left: 0 !important;
                        width: 12rem !important;
                        max-width: 12rem !important;
                        background-color: #EFF0F9;
                    }

                    th:nth-child(5) {
                        position: -webkit-sticky !important;
                        position: sticky !important;
                        left: 0 !important;
                        width: 12rem !important;
                        max-width: 12rem !important;
                        background-color: #EFF0F9;
                    }
                }
                tr:nth-child(2) th {
                    cursor: pointer !important;
                    min-width: 6rem !important;
                    width: 6rem !important;
                    max-width: 6rem !important;
                    text-align: center;
                }
            }

#javascript

end point batch import

(function process(/*RESTAPIRequest*/ request, /*RESTAPIResponse*/ response) {

    // implement resource here
	// Invoke the script include that will mutate the response
    var batch = new global.BatchImport(request, response);
	var requestBody = request.body;
	var ticketData = requestBody.data;
	gs.log("***** Nowjobs backoffice api data: " + JSON.stringify(ticketData));
	//gs.log('body length: ' + request.body.data.u_backoffice_candidate.length);
	//if(!request.body.data.u_bo_contact_imp)
		//gs.log('geen contacten');
    batch.process();

})(request, response);

#javascript

BatchImport | Script Include | House of HR

var BatchImport = Class.create();
BatchImport.prototype = {
    initialize: function(request, response) {
        this.logger = new global.GSLog('hohr.csm.backoffice_batch.log', this.type);
        this.logger.includeTimestamp();
        this.request = request;
        this.response = response;
        this.validated = false;
        this.error = false;
        this.errorObj = {
            'statusCode': '',
            'message': '',
            'details': ''
        };
        this.payload;

    },
    process: function() {
        //this.payload = this._processPayload();
        try {
            this.validated = this.validateRequest();
            if (this.validated !== true) {
                this._setResponse();
            }


            this.payload = this._processPayload();

            this._setResponse();
        } catch (e) {
            this.logErr('[process] caught an error: ' + e + '\nstack:\n' + e.stack);
            this._setError(500, 'Internal server error', '');
            this._setResponse();
        }
    },

    validateRequest: function() {
        try {
            this.bodyData = request.body.data;
            if (gs.nil(this.bodyData)) {
                this.logWarning('[validateRequest] Body data is missing: ' + this.bodyData);
                this._setError(400, "Body is missing", "Expecting a body with properties.");
                return false;
            }
        } catch (e) {
            this.logErr('[validateRequest] caught an error: ' + e.message + '\nstack: ' + e.stack);
        }
    },

    _importSet: function() {
        var importSet = new GlideRecord('sys_import_set');
        importSet.initialize();
        importSet.mode = 'asynchronous';
        importSet.state = 'loading';
        importSet.insert();
        return importSet.sys_id;

    },

    _processPayload: function() {
        var importSet;
        var transform;
        var i;
        if (this.request.body.data.u_bo_contact_imp) {
            importSet = this._importSet();
            var contacts = new GlideRecord('u_bo_contact_imp');
            for (i = 0; i < this.request.body.data.u_bo_contact_imp.length; i++) {
				if (this._isMemberOfPowerhouse(this.request.body.data.u_bo_contact_imp[i].u_email) == false) {
                contacts.initialize();
                contacts.u_first_name = this.request.body.data.u_bo_contact_imp[i].u_first_name;
                contacts.u_last_name = this.request.body.data.u_bo_contact_imp[i].u_last_name;
                contacts.u_language = this.request.body.data.u_bo_contact_imp[i].u_language;
                contacts.u_email = this.request.body.data.u_bo_contact_imp[i].u_email;
                contacts.u_phone = this.request.body.data.u_bo_contact_imp[i].u_phone;
                contacts.u_nowjobs_id = this.request.body.data.u_bo_contact_imp[i].u_nowjobs_id;
                if (this.request.body.data.u_bo_contact_imp[i].u_accent_id)
                    contacts.u_accent_id = this.request.body.data.u_bo_contact_imp[i].u_accent_id;
                contacts.sys_import_set = importSet;
                contacts.insert();
				}
            }
            transform = this._transform(importSet, 'u_bo_contact_imp');
        }
        if (this.request.body.data.u_bo_account_imp) {
            importSet = this._importSet();
            var accounts = new GlideRecord('u_bo_account_imp');
            for (i = 0; i < this.request.body.data.u_bo_account_imp.length; i++) {
                accounts.initialize();
                accounts.u_vat_number = this.request.body.data.u_bo_account_imp[i].u_vat_number;
                accounts.u_commercial_name = this.request.body.data.u_bo_account_imp[i].u_commercial_name;
                accounts.u_official_name = this.request.body.data.u_bo_account_imp[i].u_official_name;
                accounts.u_account_manager_office = this.request.body.data.u_bo_account_imp[i].u_account_manager_office;
                accounts.u_phone = this.request.body.data.u_bo_account_imp[i].u_phone;
                accounts.u_nowjobs_id = this.request.body.data.u_bo_account_imp[i].u_nowjobs_id;
                if (this.request.body.data.u_bo_account_imp[i].u_accent_id)
                    accounts.u_accent_id = this.request.body.data.u_bo_account_imp[i].u_accent_id;
                accounts.sys_import_set = importSet;
                accounts.insert();
            }
            transform = this._transform(importSet, 'u_bo_account_imp');
        }
        if (this.request.body.data.u_backoffice_candidate) {
            importSet = this._importSet();
            var candidates = new GlideRecord('u_backoffice_candidate');
            for (i = 0; i < this.request.body.data.u_backoffice_candidate.length; i++) {
                if (this._isMemberOfPowerhouse(this.request.body.data.u_backoffice_candidate[i].u_email) == false) {
                    candidates.initialize();
                    candidates.u_first_name = this.request.body.data.u_backoffice_candidate[i].u_first_name;
                    candidates.u_last_name = this.request.body.data.u_backoffice_candidate[i].u_last_name;
                    candidates.u_language = this.request.body.data.u_backoffice_candidate[i].u_language;
                    candidates.u_email = this.request.body.data.u_backoffice_candidate[i].u_email;
                    candidates.u_phone = this.request.body.data.u_backoffice_candidate[i].u_phone;
                    candidates.u_nowjobs_id = this.request.body.data.u_backoffice_candidate[i].u_nowjobs_id;
                    if (this.request.body.data.u_backoffice_candidate[i].u_accent_id)
                        candidates.u_accent_id = this.request.body.data.u_backoffice_candidate[i].u_accent_id;
                    candidates.u_statute = this.request.body.data.u_backoffice_candidate[i].u_statute;
                    candidates.u_national_nr = this.request.body.data.u_backoffice_candidate[i].u_national_nr;
                    candidates.sys_import_set = importSet;
                    candidates.insert();
                }
            }
            transform = this._transform(importSet, 'u_backoffice_candidate');
        }
        },

    _isMemberOfPowerhouse: function (mail) {
        var member = false;
        var user = new GlideRecord('sys_user');
        user.addQuery('email', mail);
        user.addQuery('sys_class_name', 'sys_user');
        user.query();
        if (user.next()) {
            if (user.company.u_powerhouse) {
                member = true;
            }
        }
        return member;
    },

    _transform: function(importSet, table) {
        var importSetGr = new GlideRecord("sys_import_set");
        importSetGr.get(importSet);
        importSetGr.table_name = table;
        var importSetId = importSetGr.getUniqueValue();
        var importSetRun = new GlideImportSetRun(importSet);
        var importLog = new GlideImportLog(importSetRun, "SOAP Transform");
        var ist = new GlideImportSetTransformer();
        ist.setLogger(importLog);
        ist.setImportSetRun(importSetRun);
        ist.setImportSetID(importSetId);
        ist.setSyncImport(true);
        ist.transformAllMaps(importSetGr);
        if (ist.isError()) {
            gs.log('Error executing the transform');
        }

    },

    logDebug: function(msg) {
        this.logger.logDebug(msg);
    },

    logInfo: function(msg) {
        this.logger.logInfo(msg);
    },

    logWarning: function(msg) {
        this.logger.logWarning(msg);
    },

    type: 'BatchImport'
};

#javascript #pipe #function

Pipe Functions

const pipe = (...ops) => {
  const _pipe = (a, b) => (arg) => b(a(arg));
  let bundle = ops.reduce((prevOp, nextOp) => {
    return _pipe(prevOp,nextOp);
  });
  return bundle;
}

#javascript #function_manipulation

Pipe JS functions

function pipe(...functions) {
    return (...args) => functions.reduce((acc, curr, idx) => idx === 0 ? curr(...args) : curr(acc), args)
}

#javascript

Get unique array elements

const namesArray = ['ryu', 'chun-li', 'ryu', 'shaun'];
console.log(namesArray);

// const namesSet = new Set(['ryu', 'chun-li', 'ryu', 'shaun']);
const namesSet = new Set(namesArray);
console.log(namesSet);

// const uniqueNames = [...namesSet];
const uniqueNames = [...new Set(namesArray)];
console.log(uniqueNames);

#javascript

Datatable library add counter/number column to table

https://datatables.net/examples/api/counter_columns.html

$(document).ready(function() {
    var t = $('#example').DataTable( {
        "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": 0
        } ],
        "order": [[ 1, 'asc' ]]
    } );
                 
    t.on( 'draw.dt', function () {
    var PageInfo = $('#example').DataTable().page.info();
         t.column(0, { page: 'current' }).nodes().each( function (cell, i) {
            cell.innerHTML = i + 1 + PageInfo.start;
        } );
    } );
} );

#javascript

Destructure properties

    const cityDetails = data.cityDetails;
    const weather = data.weather;

    // destructure properties
    const { cityDetails, weather } = data;

#javascript

Custom error and get error message in Promise catch

// async & await

const getTodos = async () => {

  let response = await fetch('json/luigi.json');

  if(response.status !== 200){
    throw new Error('cannot fetch the data');
  }

  let data = await response.json();
  return data;

};

getTodos()
  .then(data => console.log('resolved:', data))
  .catch(err => console.log('rejected:', err.message)); //here err.message

#javascript

Promise basics

>> promises basic concept
// promise example
const getSomething = () => {

  return new Promise((resolve, reject) => {
    // do something (fetch data)
    // resolve('some data');
    reject('some error');
  });

};

// getSomething().then(data => {
//   console.log('promise resolved:', data);
// }).catch(err => {
//   console.log('promise rejected:', err);
// });

>> promise chaining
const getTodos = (resource) => {

  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();

    request.addEventListener('readystatechange', () => {
  
      if(request.readyState === 4 && request.status === 200){
        const data = JSON.parse(request.responseText);
        resolve(data);
      } else if (request.readyState === 4){
        reject('could not fetch the data');
      }
  
    });
    
    request.open('GET', resource);
    request.send();
  });

};

getTodos('json/luigi.json').then(data => {
  console.log('promise 1 resolved:', data);
  return getTodos('json/mario.json');
}).then(data => {
  console.log('promise 2 resolved:', data);
  return getTodos('json/shaun.json');
}).then(data => {
  console.log('promise 3 resolved:', data);
}).catch(err => {
  console.log('promise rejected:', err);
});

#javascript

JSON Vs Object

Different between json and javascript object is that all strings in the json has be inside double qoutes.

#javascript

Convert json string into javascript object and viceversa

JSON.parse();
JSON.stringify();

#javascript

A JavaScript snippet that skips the 1st character and converts the remaining string to Lower Case

str.toString()[0] + str.toLowerCase().slice(1, [str.length])

#regex #javascript

regex101: build, test, and debug regex

(?<=\.)\w{1,4}$

#javascript

AES encrypt and decrypt using the web crypto API

const buff_to_base64 = (buff) => btoa(String.fromCharCode.apply(null, buff));

const base64_to_buf = (b64) =>
  Uint8Array.from(atob(b64), (c) => c.charCodeAt(null));

const enc = new TextEncoder();
const dec = new TextDecoder();

const getPasswordKey = (password) =>
  window.crypto.subtle.importKey("raw", enc.encode(password), "PBKDF2", false, [
    "deriveKey",
  ]);

const deriveKey = (passwordKey, salt, keyUsage) =>
  window.crypto.subtle.deriveKey(
    {
      name: "PBKDF2",
      salt: salt,
      iterations: 250000,
      hash: "SHA-256",
    },
    passwordKey,
    {
      name: "AES-GCM",
      length: 256,
    },
    false,
    keyUsage
  );

export async function encrypt(secretData, password) {
  try {
    const salt = window.crypto.getRandomValues(new Uint8Array(16));
    const iv = window.crypto.getRandomValues(new Uint8Array(12));
    const passwordKey = await getPasswordKey(password);
    const aesKey = await deriveKey(passwordKey, salt, ["encrypt"]);
    const encryptedContent = await window.crypto.subtle.encrypt(
      {
        name: "AES-GCM",
        iv: iv,
      },
      aesKey,
      enc.encode(secretData)
    );

    const encryptedContentArr = new Uint8Array(encryptedContent);
    let buff = new Uint8Array(
      salt.byteLength + iv.byteLength + encryptedContentArr.byteLength
    );
    buff.set(salt, 0);
    buff.set(iv, salt.byteLength);
    buff.set(encryptedContentArr, salt.byteLength + iv.byteLength);
    const base64Buff = buff_to_base64(buff);
    return base64Buff;
  } catch (e) {
    console.log(`Error - ${e}`);
    return "";
  }
}

export async function decrypt(encryptedData, password) {
  const encryptedDataBuff = base64_to_buf(encryptedData);
  const salt = encryptedDataBuff.slice(0, 16);
  const iv = encryptedDataBuff.slice(16, 16 + 12);
  const data = encryptedDataBuff.slice(16 + 12);
  const passwordKey = await getPasswordKey(password);
  const aesKey = await deriveKey(passwordKey, salt, ["decrypt"]);
  const decryptedContent = await window.crypto.subtle.decrypt(
    {
      name: "AES-GCM",
      iv: iv,
    },
    aesKey,
    data
  );
  return dec.decode(decryptedContent);
}

#javascript #crypto

Hash string with Web Crypto API

async function hash(str, iterations = 1000) {
  //Gotta love that crypto API
  const buf = await crypto.subtle.digest(
    "SHA-256",
    new TextEncoder("utf-8").encode(str)
  );
  //One liner from stackoverflow
  let result = Array.prototype.map
    .call(new Uint8Array(buf), (x) => ("00" + x.toString(16)).slice(-2))
    .join("");
  if (iterations === 0) {
    return result;
  } else {
    //Recusive function for multiple iterations
    return await hash(result, iterations - 1);
  }
}

#javascript

undefined

#javascript #random #min #max

Random number between min max

/**
 * Returns a random number between min (inclusive) and max (exclusive)
 */
function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

/**
 * Returns a random integer between min (inclusive) and max (inclusive).
 * The value is no lower than min (or the next integer greater than min
 * if min isn't an integer) and no greater than max (or the next integer
 * lower than max if max isn't an integer).
 * Using Math.round() will give you a non-uniform distribution!
 */
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

#javascript

Convert HTMLCollection into an array

const list = document.querySelector('.myList'); // returns HTMLCollection

const myArray = Array.from(list.children);

#javascript

Event delegation

<div id="buttons"> <!-- Step 1 -->
  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>
  <!-- buttons... -->
  <button class="buttonClass">Click me</button>
</div>
<script>
  document.getElementById('buttons')
    .addEventListener('click', event => { // Step 2
      if (event.target.className === 'buttonClass') { // Step 3
        console.log('Click!');
      }
    });
</script>

#javascript

Sort array of number

const numbers = [45, 5, 1, 0, 22, 60, 90, 78];
//normal sort method does not work

numbers.sort( (a, b) {
             return b - a;
             } );

numbers.sort( (a,b ) => b - a );

// if a is greater then we should return -1
// if b is greater then we should return 1
// if a equals b then we should return 0;

#javascript #test #method

Test Method JS

let myString = "Hello, World!";
let myRegex = /Hello/;
let result = myRegex.test(myString); // result === true

#javascript

Create a GUID / UUID

function e2() {
    var u='',m='xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx',i=0,rb=Math.random()*0xffffffff|0;
    while(i++<36) {
        var c=m[i-1],r=rb&0xf,v=c=='x'?r:(r&0x3|0x8);
        u+=(c=='-'||c=='4')?c:v.toString(16);rb=i%8==0?Math.random()*0xffffffff|0:rb>>4
    }
    return u
}

console.log(e2())

#javascript

Generate short UID

function uid() {
    // I generate the UID from two parts here 
    // to ensure the random number provide enough bits.
    var firstPart = (Math.random() * 46656) | 0;
    var secondPart = (Math.random() * 46656) | 0;
    firstPart = ("000" + firstPart.toString(36)).slice(-3);
    secondPart = ("000" + secondPart.toString(36)).slice(-3);
    return firstPart + secondPart;
}

#javascript

Object.assign polyfill

if (!Object.assign) {
  Object.defineProperty(Object, 'assign', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) {
      'use strict';
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert first argument to object');
      }

      var to = Object(target);
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        if (nextSource === undefined || nextSource === null) {
          continue;
        }
        nextSource = Object(nextSource);

        var keysArray = Object.keys(nextSource);
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          if (desc !== undefined && desc.enumerable) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
      return to;
    }
  });
}

#javascript

Deep clone an object

function clone(obj) {
    if (obj === null || typeof (obj) !== 'object' || 'isActiveClone' in obj)
        return obj;

    if (obj instanceof Date)
        var temp = new obj.constructor(); //or new Date(obj);
    else
        var temp = obj.constructor();

    for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            obj['isActiveClone'] = null;
            temp[key] = clone(obj[key]);
            delete obj['isActiveClone'];
        }
    }
    return temp;
}

#javascript #array

Remove specific item in array

// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

#javascript #canvas #html

Converts a string of HTML to an image.

function htmlToImage(html, { x = 0, y = 0, width = 300, height = 400 }) {
  let canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext("2d");
  return new Promise((res) => {
    var xml = toXML(html);
    xml = xml.replace(/\#/g, "%23");
    var data = `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><foreignObject width="100%" height="100%">${xml}</foreignObject></svg>`;

    var img = new Image();
    img.onload = function () {
      ctx.drawImage(img, x, y, width, height);
      res(canvas.toDataURL());
    };
    img.src = data;
  });
  function toXML(html) {
    var doc = document.implementation.createHTMLDocument("");
    doc.write(html);
    doc.documentElement.setAttribute("xmlns", doc.documentElement.namespaceURI);
    html = new XMLSerializer().serializeToString(doc.body);
    return html;
  }
}

#javascript #meta

Generates meta tags based on some basic information

const generate = (meta) => {
  return [
    { charset: "utf-8" },
    { lang: "en" },
    { name: "viewport", content: "width=device-width, initial-scale=1" },
    { name: "format-detection", content: "telephone=no" },
    { name: "title", content: meta.title },
    { name: "author", content: meta.author },
    {
      name: "keywords",
      content: meta.keywords || "",
    },
    { name: "robots", content: "index,follow" },
    { name: "language", content: "English" },
    { name: "description", content: meta.description },
    { name: "theme-color", content: meta.color },
    { name: "og:type", content: "website" },
    { name: "apple-mobile-web-app-title", content: meta.title },
    { name: "og_site_name", content: meta.site || meta.title },
    { name: "og:site_name", content: meta.site || meta.title },
    { name: "og:locale", content: "en_US" },
    { name: "og:url", content: meta.url },
    { name: "og:title", content: meta.title },
    { name: "og:description", content: meta.description },
    { name: "og:image", content: meta.image },
    { name: "twitter:card", content: "summary_large_image" },
    { name: "twitter:url", content: meta.url },
    { name: "twitter:title", content: meta.title },
    { name: "twitter:description", content: meta.description },
    { name: "twitter:image", content: meta.image },
  ].map((i) => {
    var out = { ...i };
    if (!out.hid) {
      out.hid = out.name;
    }
    return out;
  }).map(i => `<meta name=${JSON.stringify(i.name)} content=${JSON.stringify(i.content)}/>`).join('\n');
};

#javascript #ripple #button #effect

Material design ripple effect

function ripple(el, opts = {}) {
    const time = opts.time || (+el.getAttribute("data-time") || 1000) * 3;
    const color = opts.color || el.getAttribute("data-color") || "currentColor";
    const opacity = opts.opacity || el.getAttribute("data-opacity") || ".3";
    const event = opts.event || el.getAttribute("data-event") || "click";
    el.style.overflow = "hidden";
    el.style.position = "relative";
    el.addEventListener(event, (e) => {
        if (el.disabled) return;
        var ripple_div = document.createElement("DIV");
        ripple_div.style.position = "absolute";
        ripple_div.style.background = `${color}`;
        ripple_div.style.borderRadius = "50%";
        var bx = el.getBoundingClientRect();
        var largestdemensions;
        if (bx.width > bx.height) {
            largestdemensions = bx.width * 3;
        } else {
            largestdemensions = bx.height * 3;
        }
        ripple_div.style.pointerEvents = "none";
        ripple_div.style.height = `${largestdemensions}px`;
        ripple_div.style.width = `${largestdemensions}px`;
        ripple_div.style.transform = `translate(-50%, -50%) scale(0)`;
        ripple_div.style.top = `${e.pageY - (bx.top + window.scrollY)}px`;
        ripple_div.style.left = `${e.pageX - (bx.left + window.scrollX)}px`;
        ripple_div.style.transition = `opacity ${time}ms ease, transform ${time}ms ease`;
        ripple_div.removeAttribute("data-ripple");
        ripple_div.style.opacity = opacity;
        el.appendChild(ripple_div);
        setTimeout(() => {
        ripple_div.style.transform = `translate(-50%, -50%) scale(1)`;
        ripple_div.style.opacity = "0";
        setTimeout(() => {
            ripple_div.remove();
        }, time);
        }, 1);
    });
}

#javascript #canvas

Greenscreen effect on media stream using canvas

async function manipulate(videoTrack, fn) {
  let canvas = document.createElement("canvas");
  let running = true;
  const ctx = canvas.getContext("2d");
  let video = document.createElement("video");
  video.setAttribute("autoplay", true);
  video.setAttribute("muted", true);
  video.srcObject = createStream(videoTrack);
  videoTrack.addEventListener("ended", () => {
    running = false;
  });
  await new Promise((res) => video.addEventListener("play", res));
  function animate() {
    const { width, height } = videoTrack.getSettings();
    Object.assign(canvas, {
      width,
      height,
    });
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    // Recursively loop
    const frame = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const length = frame.data.length;
    let data = frame.data;
    for (let i = 0; i < length; i += 4) {
      let o = fn({
        red: data[i],
        g: data[i + 1],
        green: data[i + 1],
        blue: data[i + 2],
        alpha: data[i + 3],
      });
      data[i] = o.red;
      data[i + 1] = o.green;
      data[i + 2] = o.blue;
      data[i + 3] = o.alpha;
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.putImageData(frame, 0, 0);
    if (running) {
      requestAnimationFrame(animate);
    }
  }
  requestAnimationFrame(animate);
  let track = get("video", canvas.captureStream(30));
  track.addEventListener("ended", () => {
    running = false;
  })
}

#javascript #quizlet #api

Get Quizlet flashcards via API

async function quizlet(id){
    let res = await fetch(`https://quizlet.com/webapi/3.4/studiable-item-documents?filters%5BstudiableContainerId%5D=${id}&filters%5BstudiableContainerType%5D=1&perPage=5&page=1`).then(res => res.json())
    let currentLength = 5;
    let token = res.responses[0].paging.token
    let terms = res.responses[0].models.studiableItem;
    let page = 2;
    console.log({token, terms})
    while (currentLength >= 5){
        let res = await fetch(`https://quizlet.com/webapi/3.4/studiable-item-documents?filters%5BstudiableContainerId%5D=${id}&filters%5BstudiableContainerType%5D=1&perPage=5&page=${page++}&pagingToken=${token}`).then(res => res.json());
        terms.push(...res.responses[0].models.studiableItem);
        currentLength = res.responses[0].models.studiableItem.length;
        token = res.responses[0].paging.token;
    }
    return terms;
}

#javascript #canvas

Shows a number in the favicon like Discord and Gmail do.

/**
 * Generates a data URL of the current favicon with a number added on top.
 * @param {Object} options
 * @param {String} [options.type = "image/png"] The mime type of the image to return.
 * @param {String} [options.text = ""] The text to display on the favicon, if left blank will simply show a dot on the favicon.
 * @param {String} [options.background = "white"] A CSS color for the background of the notification badge.
 * @param {String} [options.color = "white"] A CSS color for the color of the text on the notification badge.
 * @param {Number} [options.size = 10] The size of the notification badge. The badge generated will be size * 2 pixels in width and height, then added on top of the current favicon.
 * @param {String} [options.pos = "bottom-right"] The position of the badge, either "bottom-right", "top-right", "bottom-left" or "top-left"
 * @param {String} [options.font = "Monospace"] The font to use
 * @param {String} [options.iconUrl] The URL of the base icon, if not provided will be the current favicon.
 * @returns {Promise.<string>} Returns a promise that resolves into the data URL of the icon generated.
 * @example
 *   getIcon({
 *     text: "1",
 *     pos: "top-right",
 *   }).then((data_url) => {
 *     document.querySelector("link[rel='icon']").href = data_url;
 *   });
 */
async function getIcon({
    type = "image/png",
    text = "",
    background = "white",
    color = "black",
    size = 10,
    pos = "bottom-right",
    font = "Monospace",
    iconUrl
}) {
    const icon = iconUrl || document.querySelector("link[rel='icon']")?.href;
    let data = await getData(icon);
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    let img = await loadedImg(data);
    let notif_img = await loadedImg(getNotifData(text, size));
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    let x = 0;
    let y = 0;
    let sections = pos.trim().toLowerCase().split("-");
    sections[0] === "bottom" && (y = canvas.height - size * 2);
    sections[1] == "right" && (x = canvas.width - size * 2);
    ctx.drawImage(notif_img, x, y);
    return canvas.toDataURL(type);

    function loadedImg(src) {
        return new Promise((res) => {
            let img = new Image();
            img.src = src;
            img.onload = () => res(img);
        });
    }

    function getNotifData(text, size) {
        const _canvas = document.createElement("canvas");
        _canvas.width = size * 2;
        _canvas.height = size * 2;
        let c = _canvas.getContext("2d");
        const inset = size;
        c.beginPath();
        c.fillStyle = background;
        c.arc(inset, inset, size, 0, 2 * Math.PI);
        c.fill();
        c.font = `${size * 1.5}px ${font}`;
        c.fillStyle = color;
        c.textBaseline = "top";
        c.fillText(text, inset / 2, inset / 2);
        return _canvas.toDataURL("image/png");
    }

    function getData(url) {
        return new Promise(async (res, reject) => {
            let blob = await fetch(url).then((r) => r.blob());
            let dataUrl = await new Promise((resolve) => {
                let reader = new FileReader();
                reader.onload = () => resolve(reader.result);
                reader.readAsDataURL(blob);
            });
            res(dataUrl);
        });
    }
}

#javascript #compression

Compresses string using gzip and native browser APIs

function compress(string, encoding) {
  const byteArray = new TextEncoder().encode(string);
  const cs = new CompressionStream(encoding);
  const writer = cs.writable.getWriter();
  writer.write(byteArray);
  writer.close();
  return new Response(cs.readable).arrayBuffer();
}

function decompress(byteArray, encoding) {
  const cs = new DecompressionStream(encoding);
  const writer = cs.writable.getWriter();
  writer.write(byteArray);
  writer.close();
  return new Response(cs.readable).arrayBuffer().then(function (arrayBuffer) {
    return new TextDecoder().decode(arrayBuffer);
  });
}

#javascript #2fa #authenticator

Authenticator Codes

async function getToken(key, options) {
  let { default: JsSHA } = await import(
    "https://cdn.skypack.dev/pin/jssha@v3.2.0-7ih4rHNyCNAz1Lqwkzy4/mode=imports,min/optimized/jssha.js"
  );
  options = {
    period: 30,
    algorithm: "SHA-1",
    digits: 6,
    timestamp: Date.now(),
    ...options,
  };
  key = base32tohex(key);
  let epoch = Math.round(options.timestamp / 1000.0);
  let time = leftpad(dec2hex(Math.floor(epoch / options.period)), 16, "0");
  let shaObj = new JsSHA(options.algorithm, "HEX");
  shaObj.setHMACKey(key, "HEX");
  shaObj.update(time);
  let hmac = shaObj.getHMAC("HEX");
  let offset = hex2dec(hmac.substring(hmac.length - 1));
  let otp = (hex2dec(hmac.substr(offset * 2, 8)) & hex2dec("7fffffff")) + "";
  otp = otp.substr(Math.max(otp.length - options.digits, 0), options.digits);
  return otp;

  function hex2dec(s) {
    return parseInt(s, 16);
  }

  function dec2hex(s) {
    return (s < 15.5 ? "0" : "") + Math.round(s).toString(16);
  }

  function base32tohex(base32) {
    let base32chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567",
      bits = "",
      hex = "";

    base32 = base32.replace(/=+$/, "");

    for (let i = 0; i < base32.length; i++) {
      let val = base32chars.indexOf(base32.charAt(i).toUpperCase());
      if (val === -1) throw new Error("Invalid base32 character in key");
      bits += leftpad(val.toString(2), 5, "0");
    }

    for (let i = 0; i + 8 <= bits.length; i += 8) {
      let chunk = bits.substr(i, 8);
      hex = hex + leftpad(parseInt(chunk, 2).toString(16), 2, "0");
    }
    return hex;
  }

  function leftpad(str, len, pad) {
    if (len + 1 >= str.length) {
      str = Array(len + 1 - str.length).join(pad) + str;
    }
    return str;
  }
}

#canvas #javascript

Canvas Matrix Effect

function matrix({
	selector = "canvas",
	el = null,
	color = "#0e0",
	font = "15pt monospace",
	fps = 40,
	size = 20,
	width = null,
	height = null,
	getChar = () => String.fromCharCode(Math.random() * 128),
} = {}) {
	const canvas = el || document.querySelector(selector);
	if (window.MATRIX_INTERVAL) {
		clearInterval(window.MATRIX_INTERVAL);
	}
	const ctx = canvas.getContext("2d");
	const w = (canvas.width = width || canvas.parentElement.offsetWidth);
	const h = (canvas.height = width || canvas.parentElement.offsetHeight);
	const cols = Math.floor(w / size) + 1;
	const ypos = Array(cols).fill(0);

	// Clear it
	ctx.clearRect(0, 0, w, h);
	ctx.fillStyle = "#000";
	ctx.fillRect(0, 0, w, h);

	function _matrix() {
		ctx.fillStyle = "#0001";
		ctx.fillRect(0, 0, w, h);
		ctx.font = font;
		ypos.forEach((y, ind) => {
			const x = ind * size;
			// This is what gets passed to the functions
			let args = {
				x,
				y,
				width: w,
				height: h
			};
			const text = getChar(args);
			let col;
			if (typeof color === "function") {
				col = color(args);
			} else {
				col = color;
			}
			ctx.fillStyle = col;
			ctx.fillText(text, x, y);
			if (y > 100 + Math.random() * 10000) ypos[ind] = 0;
			else ypos[ind] = y + size;
		});
	}

	window.MATRIX_INTERVAL = setInterval(_matrix, 1000 / fps);
}

matrix({
	selector: "canvas",
	color: ({
		x,
		y,
		width,
		height
	}) => {
		// Nice diagonal gradient:
		// y / height = percentage down, toString(16) = hex char
		return `#${Math.floor((y / height) * 16).toString(16)}f${Math.floor(
			(x / width) * 16
		).toString(16)}`;
	},
	font: "8px monospace",
	fps: 20,
	size: 8,
	width: window.innerWidth,
	height: window.innerHeight,
});

#javascript #html #sanitize #xss

Sanitize HTML client side

const sanitize = (html, tags = undefined, attributes = undefined) => {
    var attributes = attributes || [
      { attribute: "src", tags: "*", regex: /^(?:https|http|\/\/):/ },
      { attribute: "href", tags: "*", regex: /^(?!javascript:).+/ },
      { attribute: "width", tags: "*", regex: /^[0-9]+$/ },
      { attribute: "height", tags: "*", regex: /^[0-9]+$/ },
      { attribute: "id", tags: "*", regex: /^[a-zA-Z]+$/ },
      { attribute: "class", tags: "*", regex: /^[a-zA-Z ]+$/ },
      { attribute: "value", tags: ["INPUT", "TEXTAREA"], regex: /^.+$/ },
      { attribute: "checked", tags: ["INPUT"], regex: /^(?:true|false)+$/ },
      {
        attribute: "placeholder",
        tags: ["INPUT", "TEXTAREA"],
        regex: /^.+$/,
      },
      {
        attribute: "alt",
        tags: ["IMG", "AREA", "INPUT"],
        //"^" and "$" match beggining and end
        regex: /^[0-9a-zA-Z]+$/,
      },
      { attribute: "autofocus", tags: ["INPUT"], regex: /^(?:true|false)+$/ },
      { attribute: "for", tags: ["LABEL", "OUTPUT"], regex: /^[a-zA-Z0-9]+$/ },
    ]
    var tags = tags || [
      "I",
      "P",
      "B",
      "BODY",
      "HTML",
      "DEL",
      "INS",
      "STRONG",
      "SMALL",
      "A",
      "IMG",
      "CITE",
      "FIGCAPTION",
      "ASIDE",
      "ARTICLE",
      "SUMMARY",
      "DETAILS",
      "NAV",
      "TD",
      "TH",
      "TABLE",
      "THEAD",
      "TBODY",
      "NAV",
      "SPAN",
      "BR",
      "CODE",
      "PRE",
      "BLOCKQUOTE",
      "EM",
      "HR",
      "H1",
      "H2",
      "H3",
      "H4",
      "H5",
      "H6",
      "DIV",
      "MAIN",
      "HEADER",
      "FOOTER",
      "SELECT",
      "COL",
      "AREA",
      "ADDRESS",
      "ABBR",
      "BDI",
      "BDO",
    ]

    attributes = attributes.map((el) => {
      if (typeof el === "string") {
        return { attribute: el, tags: "*", regex: /^.+$/ }
      }
      let output = el
      if (!el.hasOwnProperty("tags")) {
        output.tags = "*"
      }
      if (!el.hasOwnProperty("regex")) {
        output.regex = /^.+$/
      }
      return output
    })
    var el = new DOMParser().parseFromString(html, "text/html")
    var elements = el.querySelectorAll("*")
    for (let i = 0; i < elements.length; i++) {
      const current = elements[i]
      let attr_list = get_attributes(current)
      for (let j = 0; j < attr_list.length; j++) {
        const attribute = attr_list[j]
        if (!attribute_matches(current, attribute)) {
          current.removeAttribute(attr_list[j])
        }
      }
      if (!tags.includes(current.tagName)) {
        current.remove()
      }
    }
    return el.documentElement.innerHTML
    function attribute_matches(element, attribute) {
      let output = attributes.filter((attr) => {
        let returnval =
          attr.attribute === attribute &&
          (attr.tags === "*" || attr.tags.includes(element.tagName)) &&
          attr.regex.test(element.getAttribute(attribute))
        return returnval
      })

      return output.length > 0
    }
    function get_attributes(element) {
      for (
        var i = 0, atts = element.attributes, n = atts.length, arr = [];
        i < n;
        i++
      ) {
        arr.push(atts[i].nodeName)
      }
      return arr
    }
  }

#javascript #eventos

Mover elemento dentro de un div junto al mouse(EN VARIOS BOTONES)

let etiqueta = document.querySelectorAll('.etiqueta');

etiqueta.forEach(link => {
    
    link.addEventListener("mouseover",() => { // mouseover cuando el mause entra al elemento etiqueta
	
        const t = link.getBoundingClientRect(); // calcula la posición de link(etiqueta) 
	let hijo = link.querySelectorAll('.hijo');

	hijo.forEach(l1 => {

	    l1.classList.add("edd1"); // solo quita un class, que le quita color red y la escala

	    function mover(e){

	       let left = e.pageX;
	       let top = e.pageY;
	       l1.style.left =  left - t.left + "px";
	       l1.style.top =   top - t.top  + "px";
	    };
	l1.parentNode.addEventListener("mousemove", mover);

	});
    });

    link.addEventListener("mouseleave",() => {// mouseleave cuando el mouse salio del elemento etiqueta
	let hijo = link.querySelectorAll('.hijo');
	hijo.forEach(l2 => {
        l2.classList.remove("edd1"); // le solo quita un class, que le quita color red y la escala 1
	l2.parentNode.onmousemove = null;
	});
    });
});

//HTML

<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div> 

<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div> 

//css
.box{
width: 300px;
height: 300px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transform: scale(0) translate(-50%,-50%); //posiciona el inicio 
transition: transform 0.9s ease;
}
.edd1{
transform:scale(5) translate(-50%,-50%); // posiciona cuando ya sufrio la escala 5
transform-origin: 0% 0%;
background-color: red;
}

#javascript

PAGINATION

if (meta && (meta['total'] >= 40)) {
                pagination += (`<nav class="navigation mt-5">
                    <div>
                        <span class="pagination-detail">${ meta.to } dari ${ meta.total } siswa</span>
                    </div>
                    <ul class="pagination">
                        <li class="page-item ${ (currentPage ?? 1) - 1 <= 0 ? 'disabled' : '' }">
                            <a class="page-link" onclick="(getStudents('${grade}','${status}','${ 1 }'))" tabindex="-1">&lt;</a>
                        </li>
                `)
                if (meta.last_page <= 5) {
                    page_first = 1;
                    page_last = meta.last_page;
                } else {
                    if (currentPage <= 3) {
                        page_first = 1;
                        page_last = 5;
                    } else if (currentPage >= meta.last_page - 2) {
                        page_first = meta.last_page - 4;
                        page_last = meta.last_page;
                    } else {
                        page_first = currentPage - 2;
                        page_last = currentPage + 2;
                    }
                    page_final = meta.last_page;
                }
                for (page_first; page_first <= page_last; page_first++) {
                    if (page_first == currentPage) {
                        pagination += (`
                        <li class="page-item active">
                            <a class="page-link" onclick="(getStudents('${grade}','${status}','${ page_first }'))">${ page_first }</a>
                        </li>`)
                    } else {
                        pagination += (`
                        <li class="page-item">
                            <a class="page-link" onclick="(getStudents('${grade}','${status}','${ page_first }'))">${ page_first }</a>
                        </li>`)
                    }
                }

                pagination += (`
                        <li class="page-item ${((currentPage ?? 1) + 1) > meta.last_page ? 'disabled' : '' }">
                            <a class="page-link" onclick="(getStudents('${grade}','${status}','${ meta.last_page }'))">&gt;</a>
                        </li>
                    </ul>
                </nav>
                `)
            }

#javascript #shuffle #mix #fisher #yates #knuth

Fisher-Yates (aka Knuth) Shuffle

function shuffle(array) {
  let currentIndex = array.length,  randomIndex;

  // While there remain elements to shuffle...
  while (currentIndex != 0) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]];
  }

  return array;
}

// Used like so
var arr = [2, 11, 37, 42];
shuffle(arr);
console.log(arr);

#javascript

Javascript Button Add sound to a button

var playBtn = document.getElementById('play');
var stopBtn = document.getElementById('stop');
var playSound = function() {
   audio.play();
};
playBtn.addEventListener('click', playSound, false);
stopBtn.addEventListener('click', function(){audio.pause()}, false);

#javascript

How you can use javascript to play the sound for the button color selected

var audio = new Audio("soundfile.wav");

document.onclick = function() {
  audio.play();
}

#javascript

How you can use javascript to play the sound for the button color selected

var audio = new Audio("folder_name/audio_file.mp3");
audio.play();

#javascript

javascript - How to play audio? - Stack Overflow

var audio = new Audio('audio_file.mp3');
audio.play();

#javascript

give click function for multiply buttons

    btns = document.getElementsByClassName("saveBtn");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function () {
			//Add function here
        });
    }

#javascript

document.documentElement

//Por tanto, deberías usar document.documentElement en lugar de document.firstChild para obtener el //elemento raíz.

           var box1=document.getElementById("box1");
           document.addEventListener("mousemove", function(e){
           var st=document.documentElement.scrollTop;
               //console.log(st);
               // Obtener las coordenadas del mouse
               var left= e.clientX;
               var top= e.clientY;
               box1.style.left=left+st+"px";
               box1.style.top=top+st+"px";
           });
        };

//   <box id="box1"></box>
/*
     #box1{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            position: absolute;
        }
*/

#javascript #eventos

Hacer que los eventos sucedan por separado, en JavaScript

let etiqueta = document.querySelectorAll('.etiqueta');

etiqueta.forEach(link => {
    link.addEventListener("mouseover",() => {
      let hijo = link.querySelectorAll('.hijo');
      
      hijo.forEach(l1=>{
        l1.classList.add("edd1");
      });
   });

    link.addEventListener("mouseleave",() => {
      let hijo = link.querySelectorAll('.hijo');
    
      hijo.forEach(l1=>{
        l1.classList.remove("edd1");
      });
   });
});

//css 
body{
display: flex;
}
.box{
width: 200px;
height: 200px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transition: all 0.2s ease;
transform: scale(0); /*desaparece el elemento hijo*/
}
.edd1{ /* la class que se agrega y se quita*/
background-color: red;
transform: scale(1); /*reaparece el elemento hijo con el mause al centro*/
};

//html
<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div> 

<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div>

#javascript

async getData

async function renderAllStudent(params) {
    const promisesEach = arrStudentGroup.map((d) =>  getStudents(d.id, true) );
}

#javascript

escalateIncident()

function escalateIncident() {
    var answer = confirm("Are you sure you want to cancel this record?");
    //Set the 'Incident state' and 'State' values to 'Resolved', and display mandatory fields
    if (answer == true) {
        g_form.setValue('incident_state', 6);
        g_form.setValue('state', 6);
        g_form.setValue('resolved_by', g_user.userID);
		gsftSubmit(null, g_form.getFormElement(), 'resolve_incident'); //MUST call the 'Action 	name' set in this UI Action
    } else {
        return false;
    }
}

#javascript

Download CSV

function download(content, filename, contentType) {
  if (!contentType) contentType = "application/octet-stream";
  var a = document.createElement("a");
  var blob = new Blob([content], { type: contentType });
  a.href = window.URL.createObjectURL(blob);
  a.download = filename;
  a.click();
}

download(csvContent, 'listSimulationRunTimes.csv', 'text/csv');

#javascript

Plotly

// set global variables
const limit = 10000; // How many points can be on the graph before sliding occurs
const refreshInterval = 100; // Time between refresh intervals

// set functions to retrieve
function getData1() {
  if (listMeanTimeToClear.length > 0) {
    return listMeanTimeToClear[listMeanTimeToClear.length - 1];
  } else {
    return 0;
  }
}

// set chart layout
const layout1 = {
  title: {
    text: "<b>Average Time Per Passenger in This Simulation</b>",
  },
  paper_bgcolor: "rgba(0,0,0,0)",
  plot_bgcolor: "rgba(0,0,0,0)",
  xaxis: { title: "Number of passengers", rangemode: "tozero" },
  yaxis: { title: "Average time taken per passenger (s)", rangemode: "tozero" },
  font: { family: "Graphik", size: 11 },
};

// plot all charts
Plotly.newPlot(
  "tester",
  [
    {
      y: [getData1()],
      mode: "lines",
      line: {
        color: "rebeccapurple",
        width: 1,
      },
    },
  ],
  layout1,
  { responsive: true }
);

// set refresh interval and graph limit
var cnt = 0;

// to extend plot
if (isRunning == true) {
  Plotly.extendTraces("tester", { y: [[getData1()]] }, [0]);
  cnt++;
  if (cnt > limit) {
    Plotly.relayout("tester", {
      xaxis: {
        range: [cnt - limit, cnt],
      },
    });
  }
}

#javascript

Changing things on the front-end

// One of the functions that react to the dropdown menus being changed and
// to prevent duplicate stations.
function onChange1() {
  if (isRunning || isPaused) {
    alert(
      "Please reset the model first before changing this parameter. Changing the parameter will reset the simulation."
    );
  } else {
    var choice1 = document.getElementsByName("choices1")[0].value;
    if (choice1 == "none") {
      let position2 = getKeyByValue(positions, 2);
      positions[position2] = 0;
    } else {
      let position2 = getKeyByValue(positions, 2);
      let position3 = getKeyByValue(positions, 3);
      let position4 = getKeyByValue(positions, 4);
      if (choice1 == position3 || choice1 == position4) {
        alert("Duplicates found. Please choose a different station.");
        let select = document.querySelector("#select1");
        select.value = "none";
      } else {
        positions[choice1] = 2;
      }
      positions[position2] = 0;
    }
    redrawWindow();
  }
}

// Function to track changes in the input value boxes.
function changeProb() {
  if (isRunning || isPaused) {
    alert(
      "Please reset the model first before changing this parameter. Changing the parameter will reset the simulation."
    );
  } else {
    probArrival = 1 / Number(document.getElementById("probArrival").value);
    probImmigration =
      1 / Number(document.getElementById("probImmigration").value);
    probTesting = 1 / Number(document.getElementById("probTesting").value);
    probCovid = Number(document.getElementById("probCOVID").value);
    testingTime = Number(document.getElementById("timeTest").value);
    probFindBaggage = Number(document.getElementById("probBaggage").value);
    animationDelay = Number(document.getElementById("animationDelay").value);
    passengerCount = Number(document.getElementById("passengerCount").value);
    simulationRuns = Number(document.getElementById("simulationRuns").value);
    randomChosenQueue = Number(
      document.getElementById("randomChosenQueue").value
    );
  }
}

// Value safety for the input boxes
function runSim() {
  let choice1 = document.getElementsByName("choices1")[0].value;
  let choice2 = document.getElementsByName("choices2")[0].value;
  let choice3 = document.getElementsByName("choices3")[0].value;
  isPaused = false;
  changeProb();

  if (choice1 == "none" && choice2 == "none" && choice3 == "none") {
    alert("Please make at least one station choice.");
  } else if (isRunning) {
    alert("Already running.");
  } else if (
    isNaN(probArrival) ||
    isNaN(probCovid) ||
    isNaN(probImmigration) ||
    isNaN(probTesting) ||
    isNaN(probFindBaggage) ||
    isNaN(testingTime) ||
    isNaN(animationDelay) ||
    isNaN(passengerCount) ||
    isNaN(simulationRuns) ||
    isNaN(randomChosenQueue)
  ) {
    alert("At least one of the inputs is not a number.");
  } else {
    isRunning = true;
    simTimer = window.setInterval(simStep, animationDelay);
  }
}

#javascript

Create a station and its queues

function createImmigrationOfficers() {
  if (positions.immigration > 0) {
    for (let i = 1; i <= numImmigrationOfficers; i++) {
      let newRow = (height * i) / (numImmigrationOfficers + 1);
      newRow = newRow.toFixed(0);

      let newCol = (width * (positions.immigration - 1)) / (numStations + 1);
      newCol = newCol.toFixed(0);

      let newImmigrationOfficer = {
        id: i,
        type: ICAOFFICER,
        label: "ICAOfficer",
        row: newRow,
        col: newCol,
        state: "IDLE",
      };

      objects.immigration.push(newImmigrationOfficer);
    }
  } else {
    objects.immigration = [];
  }
}

function createImmigrationQueues() {
  if (positions.immigration > 0) {
    for (let i = 1; i <= numImmigrationOfficers; i++) {
      let newRow = (height * i) / (numImmigrationOfficers + 1);
      newRow = newRow.toFixed(0);

      let newCol = (width * (positions.immigration - 1)) / (numStations + 1);
      newCol -= 60;
      newCol = newCol.toFixed(0);

      let newImmigrationQueue = {
        id: i,
        row: newRow,
        col: newCol,
        state: IDLE,
        stack: 0,
      };

      objects.immigrationQueue.push(newImmigrationQueue);
    }
  } else {
    objects.immigrationQueue = [];
  }
}

#javascript

Objects and Extraction of Key-Value Pairs

var positions = {
  arrivals: 0,
  immigration: 0,
  testing: 0,
  baggage: 0,
  exiting: 5,
  undefined: 0,
};

var objects = {
  immigration: [],
  immigrationQueue: [],
  passengers: [],
  testing: [],
  testingBox: [],
  testingQueue: [],
  baggage: [],
  baggageQueue: [],
};

// Get the key of a certain value by going through
// the whole object.
function getKeyByValue(object, value) {
  return Object.keys(object).find((key) => object[key] === value);
}

// How to access values through keys
objects.immigration == []; // true
let newString = immigration;
objects[newString] == []; // true

#javascript

Update Passengers

function updatePassenger(index) {
  index = Number(index);
  let passenger = objects.passengers[index];
  let row = Number(passenger.row);
  let col = Number(passenger.col);
  let state = passenger.state;
  let queueState = passenger.queueState;
  let chosenQueue = Number(passenger.chosenQueue);

  let hasArrived =
    Math.abs(Number(passenger.targetRow) - row) +
      Math.abs(Number(passenger.targetCol) - col) ==
    0;

  switch (state) {
    case "immigration":
      if (queueState == "immigrationQueue" && hasArrived) {
        if (
          col == Number(objects[queueState][chosenQueue].col) + 50 &&
          objects.immigration[chosenQueue].state == "IDLE"
        ) {
          passenger.queueState = "none";
          passenger.targetRow =
            Number(objects.immigration[chosenQueue].row) + 3;
          passenger.targetCol =
            Number(objects.immigration[chosenQueue].col) - 1;
          let newStack =
            Number(objects.immigrationQueue[chosenQueue].stack) - 1;
          objects.immigrationQueue[chosenQueue].stack = newStack;
          objects.immigration[chosenQueue].state = "BUSY";
        } else if (col < Number(objects[queueState][chosenQueue].col) + 50) {
          let filledCol = objects.passengers.filter(function (i) {
            return i.col == col + 1 && i.row == row;
          });

          if (filledCol.length == 0) {
            passenger.targetCol = col + 1;
          }
        }
      } else if (queueState == "none" && hasArrived) {
        if (Math.random() < probImmigration) {
          // TODO Create function callable by the different states.
          // ? Could probably do a recursive function for this.
          objects.immigration[chosenQueue].state = "IDLE";
          let station = Number(passenger.station);
          station += 1;
          let newState = getKeyByValue(positions, station);
          if (newState == undefined) {
            newState = getKeyByValue(positions, station + 1);
            station += 1;
            if (newState == undefined) {
              newState = getKeyByValue(positions, station + 1);
              station += 1;
            } // Final state if nothing else will be "out".
          }

          if (newState == "exiting") {
            passenger.state = "exiting";
            passenger.targetCol = width;
            passenger.targetRow = height / 2;
          } else {
            passenger.state = newState;
            queueState = newState + "Queue";
            passenger.queueState = queueState;

            function chosenQueueRectifier(chosenQueue) {
              //* Recursive function when having mismatched station lengths.
              if (chosenQueue >= objects[queueState].length) {
                chosenQueue -= 1;
                return chosenQueueRectifier(chosenQueue);
              } else {
                return chosenQueue;
              }
            }

            chosenQueue = chosenQueueRectifier(chosenQueue);

            for (let i in objects[queueState]) {
              if (i !== chosenQueue) {
                if (
                  Number(objects[queueState][i].stack) <
                  Number(objects[queueState][chosenQueue].stack)
                ) {
                  chosenQueue = Number(i);
                }
              }
            }

            if (Math.random() < randomChosenQueue) {
              chosenQueue = Math.floor(
                Math.random() * objects[queueState].length
              );
            }

            let stackOverflow = 0;

            if (Number(objects[queueState][chosenQueue].stack) > 50) {
              stackOverflow =
                Number(objects[queueState][chosenQueue].stack) - 50;
            }

            passenger.targetRow =
              Number(objects[queueState][chosenQueue].row) + 3;
            passenger.targetCol =
              Number(objects[queueState][chosenQueue].col) - stackOverflow;
            passenger.station = station;
            passenger.chosenQueue = chosenQueue;
            let newStack = Number(objects[queueState][chosenQueue].stack) + 1;
            objects[queueState][chosenQueue].stack = newStack;
          }
        }
      }
      break;
    case "testing":
      if (queueState == "testingQueue" && hasArrived) {
        if (
          col == Number(objects[queueState][chosenQueue].col) + 50 &&
          objects.testing[chosenQueue].state == "IDLE"
        ) {
          passenger.queueState = "testBox";
          passenger.targetRow = Number(objects.testing[chosenQueue].row) + 3;
          passenger.targetCol = Number(objects.testing[chosenQueue].col) - 1;
          let newStack = Number(objects.testingQueue[chosenQueue].stack) - 1;
          objects.testingQueue[chosenQueue].stack = newStack;
          objects.testing[chosenQueue].state = "BUSY";
        } else if (col < Number(objects[queueState][chosenQueue].col) + 50) {
          let filledCol = objects.passengers.filter(function (i) {
            return i.col == col + 1 && i.row == row;
          });

          if (filledCol.length == 0) {
            passenger.targetCol = col + 1;
          }
        }
      } else if (queueState == "testBox" && hasArrived) {
        if (Math.random() < probTesting) {
          passenger.queueState = "enteringTestBox";
          passenger.targetCol = Number(objects.testingBox[0].col) - 1;
          objects.testing[chosenQueue].state = "IDLE";
        }
      } else if (queueState == "enteringTestBox" && hasArrived) {
        let boxWidth = Number(objects.testingBox[0].width);
        let boxHeight = Number(objects.testingBox[0].height);
        let boxRow = Number(objects.testingBox[0].row);
        let boxCol = Number(objects.testingBox[0].col);
        let newCol;
        let newRow;

        let overlapping = true;
        while (overlapping) {
          let count = 1;
          let randRow = Math.floor(Math.random() * boxHeight);
          let randCol = Math.floor(Math.random() * boxWidth);
          newRow = boxRow + randRow;
          newCol = boxCol + randCol;

          let overlappedList = objects.passengers.filter(function (d) {
            return d.targetRow == newRow && d.targetCol == newCol;
          });

          if (overlappedList.length == 0) {
            overlapping = false;
          }

          // ! DEFINE BEHAVIOUR WHEN BOX IS FULL (UNLIKELY, BUT STILL).
          // * FOR NOW, IF BOX IS FULL, ALLOW OVERLAP.
          if (count > boxWidth * boxHeight) {
            overlapping = false;
          }
        }

        passenger.targetCol = newCol;
        passenger.targetRow = newRow;
        passenger.queueState = "waiting";
      } else if (queueState == "waiting" && hasArrived) {
        passenger.timeWaited = Number(passenger.timeWaited) + 1;
        if (passenger.timeWaited >= testingTime && passenger.covid) {
          passenger.state = "covid";
          passenger.targetRow = 0;
        } else if (passenger.timeWaited >= testingTime) {
          let station = Number(passenger.station);
          station += 1;
          let newState = getKeyByValue(positions, station);
          if (newState == undefined) {
            newState = getKeyByValue(positions, station + 1);
            station += 1;
            if (newState == undefined) {
              newState = getKeyByValue(positions, station + 1);
              station += 1;
            } // Final state if nothing else will be "out".
          }

          if (newState == "exiting") {
            passenger.state = "exiting";
            passenger.targetCol = width;
            passenger.targetRow = height / 2;
          } else {
            passenger.state = newState;
            queueState = newState + "Queue";
            passenger.queueState = queueState;

            function chosenQueueRectifier(chosenQueue) {
              //* Recursive function when having mismatched station lengths.
              if (chosenQueue >= objects[queueState].length) {
                chosenQueue -= 1;
                return chosenQueueRectifier(chosenQueue);
              } else {
                return chosenQueue;
              }
            }

            chosenQueue = chosenQueueRectifier(chosenQueue);

            for (let i in objects[queueState]) {
              if (i !== chosenQueue) {
                if (
                  Number(objects[queueState][i].stack) <
                  Number(objects[queueState][chosenQueue].stack)
                ) {
                  chosenQueue = Number(i);
                }
              }
            }

            if (Math.random() < randomChosenQueue) {
              chosenQueue = Math.floor(
                Math.random() * objects[queueState].length
              );
            }

            let stackOverflow = 0;

            if (Number(objects[queueState][chosenQueue].stack) > 50) {
              stackOverflow =
                Number(objects[queueState][chosenQueue].stack) - 50;
            }

            passenger.targetRow =
              Number(objects[queueState][chosenQueue].row) + 3;
            passenger.targetCol =
              Number(objects[queueState][chosenQueue].col) - stackOverflow;
            passenger.station = station;
            passenger.chosenQueue = chosenQueue;
            let newStack = Number(objects[queueState][chosenQueue].stack) + 1;
            objects[queueState][chosenQueue].stack = newStack;
          }
        }
      }
      break;
    case "baggage":
      if (queueState == "baggageQueue" && hasArrived) {
        if (col == Number(objects[queueState][chosenQueue].col) + 50) {
          let newStack = Number(objects.baggageQueue[chosenQueue].stack) - 1;
          objects.baggageQueue[chosenQueue].stack = newStack;
          passenger.queueState = "gettingBaggage";
          passenger.targetCol = Number(objects.baggage[0].col) - 1;
          // objects.testing[chosenQueue].state = "BUSY";
        } else if (col < Number(objects[queueState][chosenQueue].col) + 50) {
          let filledCol = objects.passengers.filter(function (i) {
            return i.col == col + 1 && i.row == row;
          });

          if (filledCol.length == 0) {
            passenger.targetCol = col + 1;
          }
        }
      } else if (queueState == "gettingBaggage" && hasArrived) {
        let boxWidth = Number(objects.baggage[0].width);
        let boxHeight = Number(objects.baggage[0].height);
        let boxRow = Number(objects.baggage[0].row);
        let boxCol = Number(objects.baggage[0].col);
        let newCol;
        let newRow;

        let overlapping = true;
        while (overlapping) {
          let count = 1;
          let randRow = Math.floor(Math.random() * boxHeight);
          let randCol = Math.floor(Math.random() * boxWidth);
          newRow = boxRow + randRow;
          newCol = boxCol + randCol;

          let overlappedList = objects.passengers.filter(function (d) {
            return d.targetRow == newRow && d.targetCol == newCol;
          });

          if (overlappedList.length == 0) {
            overlapping = false;
          }

          // ! DEFINE BEHAVIOUR WHEN BOX IS FULL (UNLIKELY, BUT STILL).
          // * FOR NOW, IF BOX IS FULL, ALLOW OVERLAP.
          if (count > boxWidth * boxHeight) {
            overlapping = false;
          }
        }

        passenger.targetCol = newCol;
        passenger.targetRow = newRow;
        passenger.queueState = "reachedBaggage";
      } else if (queueState == "reachedBaggage" && hasArrived) {
        if (Math.random() < probFindBaggage) {
          let station = Number(passenger.station);
          station += 1;
          let newState = getKeyByValue(positions, station);
          if (newState == undefined) {
            newState = getKeyByValue(positions, station + 1);
            station += 1;
            if (newState == undefined) {
              newState = getKeyByValue(positions, station + 1);
              station += 1;
            } // Final state if nothing else will be "out".
          }

          if (newState == "exiting") {
            passenger.state = "exiting";
            passenger.targetCol = width;
            passenger.targetRow = height / 2;
          } else {
            passenger.state = newState;
            queueState = newState + "Queue";
            passenger.queueState = queueState;

            function chosenQueueRectifier(chosenQueue) {
              //* Recursive function when having mismatched station lengths.
              if (chosenQueue >= objects[queueState].length) {
                chosenQueue -= 1;
                return chosenQueueRectifier(chosenQueue);
              } else {
                return chosenQueue;
              }
            }

            chosenQueue = chosenQueueRectifier(chosenQueue);

            for (let i in objects[queueState]) {
              if (i !== chosenQueue) {
                if (
                  Number(objects[queueState][i].stack) <
                  Number(objects[queueState][chosenQueue].stack)
                ) {
                  chosenQueue = Number(i);
                }
              }
            }

            if (Math.random() < randomChosenQueue) {
              chosenQueue = Math.floor(
                Math.random() * objects[queueState].length
              );
            }

            let stackOverflow = 0;

            if (Number(objects[queueState][chosenQueue].stack) > 50) {
              stackOverflow =
                Number(objects[queueState][chosenQueue].stack) - 50;
            }

            passenger.targetRow =
              Number(objects[queueState][chosenQueue].row) + 3;
            passenger.targetCol =
              Number(objects[queueState][chosenQueue].col) - stackOverflow;
            passenger.station = station;
            passenger.chosenQueue = chosenQueue;
            let newStack = Number(objects[queueState][chosenQueue].stack) + 1;
            objects[queueState][chosenQueue].stack = newStack;
          }
        } else {
          passenger.queueState = "gettingBaggage";
          hasArrived = true;
        }
      }
      break;
    case "exiting":
      if (hasArrived) {
        passenger.state = "out";
        exitedPassengers += 1;
        document.getElementById("numExited").innerHTML =
          "Number of exited passengers: " + exitedPassengers + ".";
        listTimeToClear.push(Number(passenger.timeTaken));
        newAvg =
          listTimeToClear.reduce((a, b) => a + b) / listTimeToClear.length;
        listMeanTimeToClear.push(newAvg);
        let overallAvg;
        if (listSimulationMeanRunTime.length > 0) {
          overallAvg =
            listSimulationMeanRunTime[listSimulationMeanRunTime.length - 1];
          var overallStdDev = Math.sqrt(
            listSimulationRunTime
              .map((x) => Math.pow(x - overallAvg, 2))
              .reduce((a, b) => a + b) / listSimulationRunTime.length
          );
        } else {
          overallAvg = 0;
          var overallStdDev = 0;
        }
        document.getElementById("aveAll").innerHTML =
          "Average time taken by a passenger: " +
          newAvg.toFixed(2) +
          ". Average time taken for " +
          passengerCount +
          " passenger(s): " +
          overallAvg.toFixed(2) +
          " over " +
          simulationsRan +
          " simulation(s) with a standard deviation of " +
          overallStdDev.toFixed(2) +
          ".";
        if (isRunning == true) {
          Plotly.extendTraces("tester", { y: [[getData1()]] }, [0]);
          cnt++;
          if (cnt > limit) {
            Plotly.relayout("tester", {
              xaxis: {
                range: [cnt - limit, cnt],
              },
            });
          }
        }
      }
      break;
    case "covid":
      if (hasArrived) {
        passenger.state = "exiting";
      }
  }

  passenger.timeTaken = Number(passenger.timeTaken) + 1;

  let targetRow = Number(passenger.targetRow);
  let targetCol = Number(passenger.targetCol);
  // compute the distance to the target destination
  let rowsToGo = targetRow - row;
  let colsToGo = targetCol - col;
  // set the speed
  let cellsPerStep = 1;
  // compute the cell to move to
  let newRow =
    row + Math.min(Math.abs(rowsToGo), cellsPerStep) * Math.sign(rowsToGo);
  let newCol =
    col + Math.min(Math.abs(colsToGo), cellsPerStep) * Math.sign(colsToGo);
  // update the location of the passenger
  passenger.row = newRow;
  passenger.col = newCol;
}

#javascript

Add Passengers

function addDynamicAgents() {
  if (Math.random() < probArrival) {
    // If the random generator decides to add passengers.
    let station = 2;
    // Attempts to find the next valid station.
    // Could have done a recursive function, I guess.
    let newState = getKeyByValue(positions, 2);
    if (newState == undefined) {
      newState = getKeyByValue(positions, 3);
      station = 3;
      if (newState == undefined) {
        newState = getKeyByValue(positions, 4);
        station = 4;
      }
    }
    
    // Queue state for the queueing lanes
    let queueState = newState + "Queue";
    
    // Finding which queue lane to choose
    let chosenQueue = 0;

    for (let i in objects[queueState]) {
      if (i !== "0") {
        if (
          Number(objects[queueState][i].stack) <
          Number(objects[queueState][chosenQueue].stack)
          // Not actually technically stacks, it is just for the joke below.
        ) {
          chosenQueue = Number(i);
        }
      }
    }

    let stackOverflow = 0; // This is the joke. I know it is lame.

    if (Number(objects[queueState][chosenQueue].stack) > 50) {
      stackOverflow = Number(objects[queueState][chosenQueue].stack) - 50;
    }

    let covid = false;

    if (Math.random() < probCovid) {
      covid = true;
    }

    let newPassenger = {
      id: 1,
      row: height / 2,
      col: 0,
      state: newState,
      queueState: queueState,
      chosenQueue: chosenQueue,
      targetRow: Number(objects[queueState][chosenQueue].row) + 3,
      targetCol: Number(objects[queueState][chosenQueue].col) - stackOverflow,
      station: station,
      timeWaited: 0,
      covid: covid,
      timeTaken: 0,
    };
    
    objects.passengers.push(newPassenger);
    let newStack = Number(objects[queueState][chosenQueue].stack) + 1;
    objects[queueState][chosenQueue].stack = newStack;
    enteredPassengers += 1;
  }
}

#javascript

Remove Passengers

function removeDynamicAgents() {
  let allPassengers = surface.selectAll(".passenger").data(objects.passengers);
  let exitingPassengers = allPassengers.filter(function (d) {
    return d.state == "out";
  });
  exitingPassengers.remove();
  objects.passengers = objects.passengers.filter(function (d) {
    return d.state != "out";
  });
}

#javascript

High Level Process

function simStep() {
  if (isRunning) {
   // Chunk of code was here, deleted for clarity.

    if (enteredPassengers < passengerCount) {
      removeDynamicAgents();
      addDynamicAgents();
      updateDynamicAgents();
    } else if (exitedPassengers < passengerCount) {
      removeDynamicAgents();
      updateDynamicAgents();
    } else {
      /* 
      Chunk of code was here, deleted for clarity.
      Mainly to stop the simulation and to re-run if multiple simulations
      were configured.
      */
    }
}

#javascript #open-props

Open Props: sub-atomic styles

import "https://unpkg.com/open-props/open-props.tokens.json"

#javascript

Creating tabs using vanilla JavaScript

const contents = document.querySelectorAll('.content > div');
const buttons = document.querySelectorAll('.tabBtns button');
buttons.forEach((button, i) => {
  button.addEventListener('click', () => {
    buttons.forEach(button => button.classList.remove('active'));
    contents.forEach(content => content.classList.add('hide'));
    button.classList.add('active');
    contents[i].classList.remove('hide');
  });
});

#javascript #eventos #delegación

botones donde solo uno está activado

<div class="box">
    <div class="cambio"><a class="enlase" href="#">Inicio</a></div>
    <div class="cambio"><a class="enlase" href="#">Horario</a></div>
    <div class="cambio"><a class="enlase" href="#">Blog</a></div>
</div>


// css 
.box{
width: 60vw;
height: 30px;
background: gray;
display: flex;
justify-content: space-around;
}
.cambio{
    height: 100%;
    background: blue;
}
.cambio a{
    display: inline-block;
    width: 100px;
    height: 100%;
    color: white;
}
.active a{
    background: red;
}
.active{
    background:red;
}

// javascript

//metodo (1): se señala al elementi que dispara con la i del for
//            la clase active sirve como puente, sin nesecidad que este en el css

let cambio = document.querySelectorAll(".cambio");
for(let i = 0; i < cambio.length; i++) {
    cambio[i].addEventListener("click", () =>{
	cambio.forEach(link => {
	    link.classList.remove("active");
	});
	cambio[i].classList.add("active");
    });
};

// metodo(2): delegación de evento e.target detecta al elemento que dispara
//            la clase active se incluye en el css 
//            se trabaja solo con enlase.

let enlase = document.querySelectorAll(".enlase");
enlase.forEach(lin => {
    lin.addEventListener("click", (e) => {
    enlase.forEach(link => { // es el enlase cuando  ya tiene el evento click
	link.classList.remove("active");
    });
    e.target.classList.add("active"); // detecta donde se iso click(elemento)
    });
});

#javascript

How can I replace Space with %20 in javascript? - Stack Overflow

sParameter = encodeURIComponent(sParameter.trim()) //"Test%20-%20Text"

#javascript #pdf

decode and download pdf stream

$('#downloadRegistrationCertificate').on('click',function(){
    downloadPdf();
});

function downloadPdf() {
    var regNum = JSON.parse(sessionStorage.getItem("sessionPath")).regNumber
    
    $.ajax({
        url: apiPathEnv + "/web/registration-service/v1/download-certificate?registrationNumber="+regNum+"&sessionToken="+sessionTokenVar,
        type: 'get',
        headers: { 
            'Accept': 'application/json',
            'Content-Type': 'application/json' 
        }
    })
    .done(function (result) {

        if(result != undefined && (result.messages == null || result.messages.length == 0)){
            console.log("REsults",result.bytes);
            var responseBytes = _base64ToArrayBuffer(result.bytes);   
            var certificateBlob = new Blob([responseBytes], {type: 'application/pdf'});
            // console.log(responseBytes);
            var downloadLink = document.createElement('a');
            downloadLink.href = window.URL.createObjectURL(certificateBlob);
            //downloadLink.download="RegistrationCertificate_" +regNum+ ".pdf";
            //downloadLink.click();
            
            var isIE = /*@cc_on!@*/false || !!document.documentMode;
            var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));

            if(isIE) { // Internet Explorer 6-11
                window.navigator.msSaveBlob(certificateBlob, 'RegistrationCertificate.pdf');
            }
            else if(isSafari) { // Safari Browser
                var newWindow = window.open(window.URL.createObjectURL(certificateBlob),'_blank')

            }
            else {
                // Mobile Devices
                if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
                    downloadLink.download="RegistrationCertificate_" +regNum+ ".pdf";
                    downloadLink.click();
                }
                // Other Browsers
                else {
                    window.open(window.URL.createObjectURL(certificateBlob), '_blank');
                }						
            }
        }
    }).fail(function (result){
        console.log(result);
        // api .fail error page redirect
        siteNotAvailable();
    });
}

function _base64ToArrayBuffer(base64) {
    var binary_string = window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
        bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
}

#javascript

performance - How to efficiently count the number of keys/properties of an object in JavaScript - Stack Overflow

Object.keys(obj).length

#javascript

javascript - How to loop over object properties with ngFor in Angular - Stack Overflow

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

#javascript

capitalize function

function capitalize(word) {
    const firstLetter = word[0].toUpperCase()
    const restWord = word.substring(1).toLowerCase()
    return firstLetter + restWord
}

#javascript

Get insance url

var instanceURL = gs.getProperty('glide.servlet.uri');

#javascript

DSCSQueryBRUtil

var DSCSQueryBRUtil = Class.create();
DSCSQueryBRUtil.prototype = {

    TABLE_CONTACT: 'customer_contact',
    TABLE_ACCOUNT: 'customer_account',
    TABLE_CS_CASE: 'sn_customerservice_case',
    TABLE_INTERACTION: 'interaction',
    TABLE_CSM_CONSUMER: 'csm_consumer',

    initialize: function () {
    },

    /**
    * Add an encoded query to the current record to restric the visibility
    * @param current GlideRecord
    * @param table string name of the table - optional
    * @return GlideRecord with added encoded query
    */
    addQueryforAgent: function (current, table) {
        var tableName = gs.nil(table) ? current.getTableName() : table;
        var query = this.getQBRConditionQueries(current, tableName);
        if (!gs.nil(query))
            current.addEncodedQuery(query);

        return current;
    },

    /**
    * Add an encoded query to the current record to restric the visibility
    * @param current GlideRecord
    * @return GlideRecord with added encoded query
    */
    addCaseQueryforAgent: function (current) {
        return this.addQueryforAgent(current, this.TABLE_CS_CASE);
    },

    /**
    * Add an encoded query to the current record to restric the visibility
    * @param current GlideRecord
    * @return GlideRecord with added encoded query
    */
    addInteractionQueryforAgent: function (current) {
        return this.addQueryforAgent(current, this.TABLE_INTERACTION);
    },

    /*
    * QBR queries can be used in each entity's QBR functions based on Conditions
    */
    getQBRConditionQueries: function (current, tableName) {
        var query = null;
        var myOpcos = this.getMyOpcos();
        if (myOpcos && myOpcos.length > 0) {
            // Important decision here, if there are NO assignment types on the record, should it be visible to everyone?
            // query = current.addEncodedQuery('u_assignment_typeIN' + myOpcos.join() + '^ORu_assignment_typeISEMPTY');
            query = current.addEncodedQuery('u_assignment_typeIN' + myOpcos.join());
        } else {
            // Important decision here, if an agent is not a member of any Opco, should they see any records?
            // query = current.addEncodedQuery('u_assignment_typeISEMPTY');
            query = current.addEncodedQuery('u_assignment_typeISEMPTY^u_assignment_type!=NULL');
        }
        /*
         This is a place for more complex logic and exception
         query variable can be manipulated
         it is possible to reuse CSQueryBRUtil.getRoleAccessDetails() approach with conditions
        */

        return query;
    },

    /**
    * Get array of my Opcos
    * similar to CSQueryBRUtil.getMyCSMRoles
    * loop through my groups, get all assignment types
    * list of assignment types that count as "Opco" should be stored as a coma-separated string in a system property
    * @return array of sys_ids of the assignment types
    */
    getMyOpcos: function () {
        var key = 'my_csm_opcos_' + gs.getUserID();
        var results = gs.getSession().getClientData(key);
        var dataSeparatedOpcos = gs.getProperty('hohr.csm.data_separated_opcos', '').split(',');
        gs.log('data separated opcos: ' + dataSeparatedOpcos);

        if (gs.nil(results) || results == 'NIL') {

            var myOpcos = [];
            var allMyGroups = new GlideRecordSecure('sys_user_grmember');
            allMyGroups.addQuery('user', gs.getUserID());
            allMyGroups.query();
            while (allMyGroups.next()) {
				//var myGroupTypes = allMyGroups.group.type; //coma-separated list of types
                var myGroupTypes = allMyGroups.group.u_business_group.u_assignment_types; //coma-separated list of types
                var groupTypeArr = myGroupTypes.split(',');
                for (var i = 0; i < groupTypeArr.length; i++) {
                    var groupType = groupTypeArr[i];
                    if (dataSeparatedOpcos.indexOf(groupType) > -1) {
                        // group type we found is data-separated
                        if (myOpcos.indexOf(groupType) == -1)
                            myOpcos.push(groupType);
                    }
                }
            }
			gs.log('opcos: ' + myOpcos);

            results = (myOpcos.length > 0) ? myOpcos.join(',') : 'NIL';
            gs.getSession().putClientData(key, results);
				
        }

        results = (gs.nil(results) || results == 'NIL') ? null : results.split(',');
        return results;
    },

    type: 'DSCSQueryBRUtil'
};

#javascript

Filter by Key

//optional array to object
var object = Object.assign({}, data);


var object = ['apel', 'mangga', 'jeruk']

const allowed = ['mangga'];

var filtered = Object.keys(object)
.filter(key => allowed.includes(key))
.reduce((obj, key) => {
    obj[key] = object[key];
    return obj;
}, {});
data = filtered;

#javascript

SortBy Data Per-Date

d.sort(function(a, b) {
    var dateA = new Date(a.invoice_date.slice(0, -17)),
        dateB = new Date(b.invoice_date.slice(0, -17))
    return dateA - dateB
});

#javascript

javascript - Finding the sum of a variable amount of numbers in a given string - Stack Overflow

function add (string) {
   let partsArray = string.split("+");
   console.log("parts", partsArray);
   let added = 0;
      
   for (let i=0; i<partsArray.length; i++) {
      console.log("i",parseInt(partsArray[i]));
      added += parseInt(partsArray[i]);
   }

   return added;
}

#javascript

javascript - SUM of all elements of a two-dimensional array - Stack Overflow

function sum(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].length; j++) {
      sum += arr[i][j];
    }
  }
  return sum;
}

#javascript

Testing Markdown

<i>I love thiscodeworks</i>

#javascript

Number prime test in JavaScript - Stack Overflow

function isPrime(num) { // returns boolean
  if (num <= 1) return false; // negatives
  if (num % 2 == 0 && num > 2) return false; // even numbers
  const s = Math.sqrt(num); // store the square to loop faster
  for(let i = 3; i <= s; i += 2) { // start from 3, stop at the square, increment in twos
      if(num % i === 0) return false; // modulo shows a divisor was found
  }
  return true;
}
console.log(isPrime(121));

#javascript

connect to mongoose

require("dotenv").config();
const port = process.env.PORT || 7788;
const mongoUri = process.env.MONGO_URI;
mongoose.connect(mongoUri, {
  useNewUrlParser: true,
});
const connection = mongoose.connection;
connection.once("open", () => {
  console.log("Mongo Docker container running");
});

#php #javascript

Regex to create clean slug

^[a-z0-9]+(?:-[a-z0-9]+)*$

#javascript

find median values from array in javascript - Stack Overflow

function median(arr) {
    arr = [...arr].sort((a, b) => a - b);
    return (arr[arr.length - 1 >> 1] + arr[arr.length >> 1]) / 2;
}

#javascript

Get values from cti script

var test = new AnywhereCTIService();
test.INTERACTION_DEPARTMENT

for (var defaultField in test.INTERACTION_DEPARTMENT) {
    gs.log(defaultField);
            if (Object.hasOwnProperty.call(test.INTERACTION_DEPARTMENT, defaultField)) {
                var defaultFieldValue = test.INTERACTION_DEPARTMENT[defaultField];
                gs.log(defaultFieldValue);
            }
        }

#html #javascript #eventos

*** JS_ Propagación de eventos (burbujeo y captura) ***********

<div id="uno" >
  <div id="dos" >
    <div id="tres" ></div>
  </div>
</div>

#object #javascript

Another 4 JavaScript tips for shorter code | by Abhinav VP | Nov, 2021 | Medium

const key1 = "name";
const key2 = "age";
const student = {
    [key1]:"john Doe",
    [key2]:26
}
console.log(student)
//{ name:"john Doe", age:26 }

#objects #javascript

Another 4 JavaScript tips for shorter code | by Abhinav VP | Nov, 2021 | Medium

function returnDayKeyValue(val) {
    const returnDayObject = {
        1: "It's monday",
        2: "It's tuesday",
        3: "It's wednesday",
        4: "It's thursday",
        5: "It's friday",
        6: "It's saturday",
        7: "It's sunday",
    }
    if(!returnDayObject[val]){
     return "Enter a value between 1 - 7";
    }
    return returnDayObject[val]
}
cosnt day = 3;
console.log(returnDayKeyValue(day)); //It's wednesday

#javascript

Anywhere365 script include

var AnywhereCTIService = Class.create();
AnywhereCTIService.prototype = {
    // This is just for the developers reference, not used in the code
    BODY_EXAMPLE: {
        'callerNumber': '+12345678901',
        'agentSip': 'test@example.com'
    },

    // List of properties that should be present in the request body
    MANDATORY_BODY_PROPERTIES: ['callerNumber', 'agentSip'],

    INTERATCION_FIELDS_DEFAULTS: {
        'state': 'work_in_progress',
        'type': 'phone',
        'short_description': 'Received a call',
    },

    // Fields that should be included in the response
    INTERACTION_FIELDS_RESPONSE: [
        'sys_id',
        'number',
        'short_description',
        'account',
        'contact',
        'consumer',
        'assigned_to',
    ],

    // Fields that should have their display value included in the response
    INTERACTION_FIELDS_DISPLAY_RESPONSE: [
        'account',
        'contact',
        'consumer',
        'assigned_to',
    ],
	// Fields that should have their display value included in the response
    INTERACTION_DEPARTMENT: {
        'C_Open_Fleet' : '1',
        'S_Open':'',
        'C_Open_Finance':'',
        'C_Open_IT':'',
		'C_Open_ComplianceHelpdesk':'',
		'C_Open_ComplinaceSupport':'',
		'C_Open_ComplianceRisk':'',
		'S_Open_FR':'',
		'C_Open_Marketing':'',
		'C_Open_HR':''
    },

    /**
     * Initialize the variables
     * @param {RESTAPIRequest}  request 
     * @param {RESTAPIResponse} response 
     */
    initialize: function (request, response) {
        this.logger = new global.GSLog('pl4.csm.anywhere365.log', this.type);
        this.logger.includeTimestamp();
        this.request = request;
        this.response = response;
        this.validated = false;
        this.error = false;
        this.errorObj = {
            'statusCode': '',
            'message': '',
            'details': ''
        };
        this.interactionGr = false;

    },

    /**
     * Main function that is executed in the Scripted REST API
     */
    process: function () {
        try {
            this.validated = this.validateRequest();
            if (this.validated !== true) {
                this._setResponse();
            }

            this.interactionGr = this._createInteraction();

            this._setResponse();
        } catch (e) {
            this.logErr('[process] caught an error: ' + e + '\nstack:\n' + e.stack);
            this._setError(500, 'Internal server error', '');
            this._setResponse();
        }
    },

    /**
     * Populates the default interaction fields and makes data lookup for Caller and Agent
     * @returns {Object}
     */
    _getInteractionFields: function () {
        var fields = {
            'assigned_to': '',
            'account': '',
            'contact': '',
            'consumer': '',
            'opened_by': '',
			'opened_for': '',
            'u_assignment_type': ''
        };

        for (var defaultField in this.INTERATCION_FIELDS_DEFAULTS) {
            if (Object.hasOwnProperty.call(this.INTERATCION_FIELDS_DEFAULTS, defaultField)) {
                var defaultFieldValue = this.INTERATCION_FIELDS_DEFAULTS[defaultField];
                fields[defaultField] = defaultFieldValue;
            }
        }

        // lookup assignment type
        var assignmentType = this._getAssignmentType(this.bodyData.ucc);
        if(assignmentType){
            fields.u_assignment_type = assignmentType.join(',');
            this.logDebug('[_getInteractionFields] assignmenttype(s) found: ' + assignmentType.join(','));
        }


        // Lookup the agent
        var agentEmail = this._getAgentEmail();
        var agentGr = this._lookupAgentByEmail(agentEmail);

        if (agentGr !== false) {
            fields.assigned_to = agentGr && agentGr.getUniqueValue();
            this.logDebug('[_getInteractionFields] found agent: ' + agentGr.getUniqueValue() + ' ' + agentGr.getDisplayValue());
        }

        // Lookup the caller
        var callerNumber = this._getCallerNumber();
        var contactGr;
        var consumerGr;
        var userGr;

        // Try to lookup Contact by mobile phone first
        contactGr = this._lookupUserByPhone('customer_contact', 'mobile_phone', callerNumber);
        if (contactGr === false) contactGr = this._lookupUserByPhone('customer_contact', 'phone', callerNumber);

        if (contactGr !== false) {
            // We found the contact, now we can get the account
            fields.contact = contactGr.getUniqueValue();
            fields.account = contactGr.getValue('account');
            this.logDebug('[_getInteractionFields] found contact: ' + contactGr.getUniqueValue() + ' ' + contactGr.getDisplayValue());
        }

        if (contactGr === false) {
            // Did not find Contact, look for consumers
            consumerGr = this._lookupUserByPhone('csm_consumer', 'mobile_phone', callerNumber);
            if (consumerGr === false) consumerGr = this._lookupUserByPhone('csm_consumer', 'business_phone', callerNumber);
            if (consumerGr === false) consumerGr = this._lookupUserByPhone('csm_consumer', 'home_phone', callerNumber);

            if (consumerGr !== false) {
                fields.consumer = consumerGr.getUniqueValue();
                this.logDebug('[_getInteractionFields] found consumer: ' + consumerGr.getUniqueValue() + ' ' + consumerGr.getDisplayValue());
            }
			
			if(consumerGr === false){
				userGr = this._lookupUserByPhone('sys_user','phone', callerNumber);
				if(userGr === false) userGr = this._lookupUserByPhone('sys_user','mobile_phone', callerNumber);
				if(userGr === false) userGr = this._lookupUserByPhone('sys_user','u_ip_phone', callerNumber);
				
				if(userGr !== false){
					fields.opened_for = userGr.getUniqueValue();
					this.logDebug('[_getInteractionFields] found internal user: ' + userGr.getUniqueValue() + ' ' + userGr.getDisplayValue());
				}
			}
        }

        // Add variables to short description
        fields.short_description += ' from ' + callerNumber;

        this.logDebug('[_getInteractionFields] fields result: ' + global.JSON.stringify(fields));
        return fields;
    },

    /**
     * Get the caller phone from the body
     * @returns {String}
     */
    _getCallerNumber: function () {
        return String(this.bodyData.callerNumber);
    },

    /**
     * Get the assignment type from the ucc
     * @returns 
     */
    _getAssignmentType: function(ucc) {
        var group = new GlideRecord('sys_user_group');
        group.get('u_ucc', ucc);
        var assTypes = new DataSeparationUtils().getAssignmentTypes(group.u_business_group);
		gs.log('assignment type function: ' + assTypes);
        return assTypes;
    },

    /**
     * Get the agent sip from the body
     * @returns {String}
     */
    _getAgentEmail: function () {
        return String(this.bodyData.agentSip).replace('sip:', '');
    },

    /**
     * Lookup the user by specified phone number
     * Note that the number format should match exactly
     * @param {String} table table where user should be looked up
     * @param {String} phoneField field that contains the phone number
     * @param {String} phone phone number received by the REST API
     * @returns {GlideRecord|boolean}
     */
    _lookupUserByPhone: function (table, phoneField, phone) {
        var contactGr = new GlideRecord(table);
        if (!contactGr.isValid()) return false;
        if (!contactGr.isValidField(phoneField)) return false;
		if(table == 'sys_user')
			contactGr.addQuery('sys_class_name', 'sys_user');
        contactGr.addQuery(phoneField, phone);
        contactGr.orderBy('sys_created_on');
        contactGr.setLimit(1);
        contactGr.query();
        if (contactGr.next()) {
            return contactGr;
        }
        this.logDebug('[_lookupUserByPhone] Could not find a user, table: ' + table + ' field: ' + phoneField + ' phone: ' + phone);
        return false;
    },

    /**
     * Lookup the sys_user record by email
     * @param {String} agentEmail email of the agent
     * @returns {GlideRecord|boolean}
     */
    _lookupAgentByEmail: function (agentEmail) {
        var userGr = new GlideRecord('sys_user');
        userGr.addQuery('email', agentEmail);
        userGr.orderBy('sys_created_on');
        userGr.setLimit(1);
        userGr.query();
        if (userGr.next()) {
            return userGr;
        }
        this.logDebug('[_lookupAgentByEmail] Could not find a user, agentEmail: ' + agentEmail);
        return false;
    },

    /** 
     * Validate the request
     * @returns {sn_ws_err.ServiceError|boolean}
     */
    validateRequest: function () {
        try {
            this.bodyData = request.body.data;
            if (gs.nil(this.bodyData)) {
                this.logWarning('[validateRequest] Body data is missing: ' + this.bodyData);
                this._setError(400, "Body is missing", "Expecting a body with properties.");
                return false;
            }

            for (var i = 0; i < this.MANDATORY_BODY_PROPERTIES.length; i++) {
                var mandatoryProperty = this.MANDATORY_BODY_PROPERTIES[i];

                if (gs.nil(this.bodyData[mandatoryProperty])) {
                    this.logWarning('[validateRequest] Mandatory body property is missing: ' + mandatoryProperty);
                    this._setError(400, "Mandatory body property is missing", "Expecting a body propertiy to be in the body: " + mandatoryProperty);
                    return false;
                }
            }

            // All checkes have passed
            return true;
        } catch (e) {
            this.logErr('[validateRequest] caught an error: ' + e.message + '\nstack: ' + e.stack);
        }
    },

    /**
     * Create an interaction record
     * @returns {GlideRecord|boolean}
     */
    _createInteraction: function () {
        var interactionFields = this._getInteractionFields();
        if (this.error !== false) {
            // There was an error during data lookup
            this.logErr('[_createInteraction] There was an error during data lookup');
            return false;
        }
        var interactionGr = new GlideRecord('interaction');
        interactionGr.newRecord();

        for (var fieldName in interactionFields) {
            if (Object.hasOwnProperty.call(interactionFields, fieldName)) {
                if (interactionGr.isValidField(fieldName)) {
                    var fieldValue = interactionFields[fieldName];
                    interactionGr.setValue(fieldName, fieldValue);
                    // this.logDebug('[_createInteraction] setting interaction field ' + fieldName + ' to: ' + fieldValue);
                }
            }
        }

        var interactionId = interactionGr.insert();
        if (gs.nil(interactionId)) {
            //Failed to insert the record
            this.logErr('[_createInteraction] Failed to create an interaction');
            return false;
        }
        this.logDebug('[_createInteraction] Created an interaction, sys_id: ' + interactionId + ' number: ' + interactionGr.getValue('number'));

        return interactionGr;
    },

    /**
     * Construct and set the error object 
     * @param {number} statusCode 
     * @param {String} message 
     * @param {String} details 
     */
    _setError: function (statusCode, message, details) {
        this.errorObj = {
            'statusCode': statusCode,
            'message': message,
            'details': details,
        };
        var serviceError = new sn_ws_err.ServiceError();
        serviceError.setStatus(statusCode);
        serviceError.setMessage(message);
        serviceError.setDetail(details);
        this.error = serviceError;
    },

    /**
     * Set the status code, messages and response body based on this.error varialbe
     * 
     */
    _setResponse: function () {
        if (this.error !== false) {
            this.response.setError(this.error);
            this.logDebug('[_setResponse] set error with code: ' + this.errorObj.statusCode);
            return;
        }

        if (this.interactionGr !== false) {
            this.logDebug('[_setResponse] set successful resposne with code: 201, interaction number: ' + this.interactionGr.getValue('number'));
            this.response.setStatus(201);
            var responseBody = this._constructResponseBody();
            this.response.setBody(responseBody);
        }
    },

    /**
     * Construct the Response body, include required interaction fields
     * @returns {Object}
     */
    _constructResponseBody: function () {
        var responseBody = {};
        for (var i = 0; i < this.INTERACTION_FIELDS_RESPONSE.length; i++) {
            var field = this.INTERACTION_FIELDS_RESPONSE[i];
            responseBody[field] = this.interactionGr.getValue(field);
        }
        for (var j = 0; j < this.INTERACTION_FIELDS_DISPLAY_RESPONSE.length; j++) {
            var fieldDisplay = this.INTERACTION_FIELDS_DISPLAY_RESPONSE[j];
            responseBody[fieldDisplay] = this.interactionGr[fieldDisplay] && this.interactionGr[fieldDisplay].getDisplayValue();
        }
        this.logDebug('[_constructResponseBody] responseBody:\n' + global.JSON.stringify(responseBody));
        return responseBody;
    },

    logDebug: function (msg) {
        this.logger.logDebug(msg);
    },

    logInfo: function (msg) {
        this.logger.logInfo(msg);
    },

    logWarning: function (msg) {
        this.logger.logWarning(msg);
    },

    logErr: function (msg) {
        this.logger.logErr(msg);
    },

    type: 'AnywhereCTIService'
};

#javascript

jQuery: find element by text - Stack Overflow

$('div:contains("test")').css('background-color', 'red');

#javascript

j.Sum of Array of Objects in JavaScript

fruits = [
 {  description: 'orange', Amount: 50},
 {  description: 'orange', Amount: 50},
 {  description: 'apple', Amount: 75},
 {  description: 'kiwi', Amount: 35},
 {  description: 'watermelon', Amount: 25},];
const sumall = fruits.map(item => item.amount).reduce((prev, curr) => prev + curr, 0);
console.log(sumall);

#javascript

j.ExtendArraySum

class fruitCollection extends Array {
    sum(key) {
        return this.reduce((a, b) => a + (b[key] || 0), 0);
    }
}
const fruit = new fruitCollection(...[
    {  description: 'orange', Amount: 50},
    {  description: 'orange', Amount: 50},
    {  description: 'apple', Amount: 75},
    {  description: 'kiwi', Amount: 35},
    {  description: 'watermelon', Amount: 25 },]);

console.log(fruit.sum('Amount'));

#javascript

javascript - Executing <script> elements inserted with .innerHTML - Stack Overflow

var setInnerHTML = function(elm, html) {
  elm.innerHTML = html;
  Array.from(elm.querySelectorAll("script")).forEach( oldScript => {
    const newScript = document.createElement("script");
    Array.from(oldScript.attributes)
      .forEach( attr => newScript.setAttribute(attr.name, attr.value) );
    newScript.appendChild(document.createTextNode(oldScript.innerHTML));
    oldScript.parentNode.replaceChild(newScript, oldScript);
  });
}

#javascript #eventos #mouse #css #html

Una hover en un elemento afecta a otro elemento(ejm: h1:hover ~ img{} )

<section class="destacada">
  <div class="contenido text-center">
    <h1 class="estilo"> Ayuda </h1>
    <img src="http://picsum.photos/100/100"/>
  </div>
</section> 

//css 
.destacada img{
  width: 50px;
  height: 50px;
}

 h1:hover ~ img{
  width: 200px; /*O lo que quieras*/
  height: 200px; /*O lo que quieras*/ 
}

#javascript

3 Ways To Detect Selenium Bots Using Javascript - CodingTutz

if (navigator.webdriver) {
    document.body.innerHTML = "This is a Bot";
}

#javascript #eventos #mouse #css #html

mover un elemento junto al mouse, dentro de un div (eventos de mouse)

let hijo = document.querySelector('.hijo');
let etiqueta = document.querySelectorAll('.etiqueta');
//El metodo .getBoundingClientRect() nos da 
//la posicion de un elemento con respecto al viewport(en numeros).
// tomare la posicion constante del elemento .hijo 
const coords = hijo.getBoundingClientRect();
const j = coords.top; // estamos obteniendo la posicion top en numero
const k = coords.left;

// se aplica forEach para obtener posicion de cada movimiento del mouse
etiqueta.forEach(link => {
// se obtiene la posicion del mouse con la funcion  mover(e)
    function mover(e){
// se calcula la posicion top y left del mouse al cual le restamos
// la posicion del elemento "hijo"; resultado: mouse e "hijo" juntos 
	 let m = e.pageY ;
	 let n = e.pageX ;

	 let t = m - j;
	 let l = n - k;
	 hijo.style.top = t + "px"; // agregando px a los numeros
	 hijo.style.left = l + "px";
    };
// mouseover dice que entro en elemento etiqueta
    link.addEventListener("mouseover",() => {
	hijo.classList.add("edd1");// solo agrega un class que le da color red

	 window.addEventListener("mousemove",mover);// agrega el evento junto a la funcion 
    });

    link.addEventListener("mouseleave",() => {// mouseleave dice que salio del elemento etiqueta
	hijo.classList.remove("edd1"); // le quita un class, que le quita color red
	 window.removeEventListener("mousemove", mover);// remuev el evento
    });
});

/* Simples estilos para delimitar los div*/
.box{
width: 300px;
height: 300px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transform: scale(0); /*desaparece el elemento hijo*/
}
.edd1{
background-color: red;
transform: scale(1); /*reaparece el elemento hijo con el mause al centro*/
} 

// un ejemplo con html
<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div>

#typescript #javascript

Mask input field for US numbers with editing

// Example 4051231234 -> (405) 123-1234
export const formatToUSPhoneNumber = (e: React.ChangeEvent<HTMLInputElement>): string => {
  const phoneField = e.target;

  const cursorPosition = phoneField.selectionStart;
  const numericString = phoneField.value.replace(/\D/g, '').substring(0, 10);

  const match = numericString.match(/^(\d{1,3})(\d{0,3})(\d{0,4})$/);

  if (match) {
    let newVal = '(' + match[1];
    newVal += match[2] ? ') ' + match[2] : '';
    newVal += match[3] ? '-' + match[3] : '';

    // to help us put the cursor back in the right place
    const delta = newVal.length - Math.min(phoneField.value.length, 14);
    phoneField.value = newVal;
    if (cursorPosition) {
      phoneField.selectionEnd = cursorPosition + delta;
    }
  } else {
    phoneField.value = '';
  }

  return phoneField.value;
};

#googleapi #googlemaps #geocode #jquery #javascript

Generate Google Maps marker with Geocode data

// Google Maps  
function initMap(getLat, getLng) {
  const location = { lat: getLat, lng: getLng };
  // The map
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: location,
  });
  // The marker
  const marker = new google.maps.Marker({
    position: location,
    map: map,
  });
}

// Geocode
function geocode() {
  var defaultLocation = 'Tbilisi';
  var address = $("#address").text();

  if (addressEn) { // You can add more conditionals to specify address line 2, zip code, etc.
    var myLocation = address;
  } else {
    var myLocation = defaultLocation
  }

  axios.get('https://maps.googleapis.com/maps/api/geocode/json',{
    params:{
      address: myLocation,
      key: 'YOUR_KEY',
    }
  })
  .then(function (response) {
    var lat = response.data.results[0].geometry.location.lat;
    var lng = response.data.results[0].geometry.location.lng;
    initMap(lat, lng);
  })
  .catch(function(error) {
    console.log(error);
  })
}
// Call
geocode();

#processing #javascript #red #green #blue #brightness

Image load

PImage img;

//setup
img = loadImage("imagename.png");
img = loadImage("https://source.unsplash.com/random/900x900", "png");
img = loadImage("https://source.unsplash.com/900x900/?nature,water", "png");


//draw
image(img, 0,0);

#javascript

Response Schema | Axios Docs

axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

#javascript

format number K

const formatCash = n => {
  if (n < 1e3) return n;
  if (n >= 1e3) return +(n / 1e3).toFixed(1) + "K";
};

console.log(formatCash(2500));

#javascript

T19 - css - version c

.line-wide {
  transform: rotate(45deg) scaleX(1);
  animation-name: change-width;
}

.line-high {
  transform: rotate(-135deg) scaleY(1);
  animation-name: change-height;
}

@keyframes change-width {
  0% {
    transform: rotate(45deg) scaleX(0); 
  }

  100% {
    transform: rotate(45deg) scaleX(1);  
  }
} 

@keyframes change-height {
  0% {
    transform: rotate(-135deg) scaleY(0); 
  }

  100% {
    transform: rotate(-135deg) scaleY(1);  
  }
}

#javascript

T19 - css - version b

.line-wide {
    transform: rotate(45deg) scaleX(1);
    animation-name: change-width;
}

.line-high {
    transform: rotate(-45deg) scaleY(1);
    animation-name: change-height;
}

@keyframes change-width {
    0% {
        transform: rotate(45deg) scaleX(0); 
    }

    100% {
        transform: rotate(45deg) scaleX(1);  
    }
} 

@keyframes change-height {
    0% {
        transform: rotate(-45deg) scaleY(0); 
    }

    100% {
        transform: rotate(-45deg) scaleY(1);  
    }
}

#javascript

Tailwind - Setting up scripts

	"start": "cross-env TAILWIND_MODE=watch craco start",
		"build": "craco build",
		"test": "craco test",
		"eject": "react-scripts eject"

#javascript

Add to cart multiple items?

              function onlyUnique(value, index, self) { 
                  return self.indexOf(value) === index;
              }

              function countOccurances(a,i)
              {
               var result = 0;
               for(var o in a)
                if(a[o] == i)
                 result++;
               return result;
              }

		
            $('#submit-form-button-bundle').click(function(e){   
              e.preventDefault();
              
              var allBeds = [$("#primary_bed").val(), $('#secondary_bed').val(), 		$('#product_3').val(), $('#product_4').val()];
              var uniqueBeds = allBeds.filter( onlyUnique );
              
              //console.log(uniqueOodies);
              //console.log(countOccurances(allOodies, $("#oodie-color").val()));
              
              jsonObj = []
              var arrayLength = uniqueBeds.length;
              for (var i = 0; i < arrayLength; i++) 
              {    
                  item = {}
                  item ["quantity"] 	= countOccurances(allBeds, uniqueBeds[i]);
                  item ["id"] 			= uniqueBeds[i];
                  jsonObj.push(item);
              }
              
              $.ajax({
                url: "/cart/add",
                type: "post",
                data: { items: jsonObj },
                success: function(){
                  
                window.location.href = "/checkout?discount=BLACKFRIDAY-MEGA-BUNDLE-4-PIECE";
                  
                },
                error: function(){
                }
              });
            });

            $('.single-option-selector').change(function(){

              var selected_option = $('.single-option-selector').val();
              
              // adding bed variant ids
              if(selected_option.indexOf("Navy - Small") >= 0){
                $('#primary_bed').val('29012044808226');
              }

              else if(selected_option.indexOf("Grey - Small") >= 0){
                $('#primary_bed').val('29012045103138');
              }

              else if(selected_option.indexOf("Pink - Small") >= 0){
                $('#primary_bed').val('28915153764386');
              }
              
              else if(selected_option.indexOf("Navy - Medium") >= 0){
                $('#primary_bed').val('31683365797911');
              }
              
              else if(selected_option.indexOf("Grey - Medium") >= 0){
                $('#primary_bed').val('31683365765143');
              }
              
              else if(selected_option.indexOf("Pink - Medium") >= 0){
                $('#primary_bed').val('31683365830679');
              }
              
              else if(selected_option.indexOf("Navy - Large") >= 0){
                $('#primary_bed').val('28915153698850');
              }
              else if(selected_option.indexOf("Grey - Large") >= 0){
                $('#primary_bed').val('28915153731618');  
              }
              else if(selected_option.indexOf("Pink - Large") >= 0){
                $('#primary_bed').val('29012060799010');
              }
              else if(selected_option.indexOf("Navy - Extra") >= 0){
                $('#primary_bed').val('31722116251671');
              }
              else if(selected_option.indexOf("Grey - Extra") >= 0){
                $('#primary_bed').val('31722116218903');
              }
              else if(selected_option.indexOf("Pink - Extra") >= 0){
                $('#primary_bed').val('31722116284439');
              }

              else
              {
                console.log('Some thing went wrong please check code for bugs');
              }
              
              if(selected_option.indexOf("Extra") >= 0){
              	$('#price_1').val('189');
              } 
              else if(selected_option.indexOf("Large") >= 0){
              	$('#price_1').val('129');
              }
              else if(selected_option.indexOf("Medium") >= 0){
              	$('#price_1').val('114');
              }
              else if(selected_option.indexOf("Small") >= 0){
              	$('#price_1').val('99');
              }

            });
            $('.single-option-selector-2').change(function(){........}

#javascript

Add to cart multiple items?

              function onlyUnique(value, index, self) { 
                  return self.indexOf(value) === index;
              }

              function countOccurances(a,i)
              {
               var result = 0;
               for(var o in a)
                if(a[o] == i)
                 result++;
               return result;
              }

		
            $('#submit-form-button-bundle').click(function(e){   
              e.preventDefault();
              
              var allBeds = [$("#primary_bed").val(), $('#secondary_bed').val(), 		$('#product_3').val(), $('#product_4').val()];
              var uniqueBeds = allBeds.filter( onlyUnique );
              
              //console.log(uniqueOodies);
              //console.log(countOccurances(allOodies, $("#oodie-color").val()));
              
              jsonObj = []
              var arrayLength = uniqueBeds.length;
              for (var i = 0; i < arrayLength; i++) 
              {    
                  item = {}
                  item ["quantity"] 	= countOccurances(allBeds, uniqueBeds[i]);
                  item ["id"] 			= uniqueBeds[i];
                  jsonObj.push(item);
              }
              
              $.ajax({
                url: "/cart/add",
                type: "post",
                data: { items: jsonObj },
                success: function(){
                  
                window.location.href = "/checkout?discount=BLACKFRIDAY-MEGA-BUNDLE-4-PIECE";
                  
                },
                error: function(){
                }
              });
            });

            $('.single-option-selector').change(function(){

              var selected_option = $('.single-option-selector').val();
              
              // adding bed variant ids
              if(selected_option.indexOf("Navy - Small") >= 0){
                $('#primary_bed').val('29012044808226');
              }

              else if(selected_option.indexOf("Grey - Small") >= 0){
                $('#primary_bed').val('29012045103138');
              }

              else if(selected_option.indexOf("Pink - Small") >= 0){
                $('#primary_bed').val('28915153764386');
              }
              
              else if(selected_option.indexOf("Navy - Medium") >= 0){
                $('#primary_bed').val('31683365797911');
              }
              
              else if(selected_option.indexOf("Grey - Medium") >= 0){
                $('#primary_bed').val('31683365765143');
              }
              
              else if(selected_option.indexOf("Pink - Medium") >= 0){
                $('#primary_bed').val('31683365830679');
              }
              
              else if(selected_option.indexOf("Navy - Large") >= 0){
                $('#primary_bed').val('28915153698850');
              }
              else if(selected_option.indexOf("Grey - Large") >= 0){
                $('#primary_bed').val('28915153731618');  
              }
              else if(selected_option.indexOf("Pink - Large") >= 0){
                $('#primary_bed').val('29012060799010');
              }
              else if(selected_option.indexOf("Navy - Extra") >= 0){
                $('#primary_bed').val('31722116251671');
              }
              else if(selected_option.indexOf("Grey - Extra") >= 0){
                $('#primary_bed').val('31722116218903');
              }
              else if(selected_option.indexOf("Pink - Extra") >= 0){
                $('#primary_bed').val('31722116284439');
              }

              else
              {
                console.log('Some thing went wrong please check code for bugs');
              }
              
              if(selected_option.indexOf("Extra") >= 0){
              	$('#price_1').val('189');
              } 
              else if(selected_option.indexOf("Large") >= 0){
              	$('#price_1').val('129');
              }
              else if(selected_option.indexOf("Medium") >= 0){
              	$('#price_1').val('114');
              }
              else if(selected_option.indexOf("Small") >= 0){
              	$('#price_1').val('99');
              }

            });
            $('.single-option-selector-2').change(function(){........}

#html #javascript #liquid

Color Swatches - very simple case

        <div class="swatches-wrapper">
          {% assign colors = "Navy, Grey, Pink" %}
          
          {% for option in product.options_with_values %}
            {% for variant in product.variants %}
              {% assign name = variant.title %}
              {% assign stringSplit = name | remove: ' ' | split: '-' %}
              {% for stringPart in stringSplit %}
          		{% if forloop.index == 1 %}
                  {% if colors contains stringPart %}
                  <div class="swatch-option {{stringPart}}" data-color="{{ variant.title }}" data-id="{{variant.id}}">
                    <span class="tooltip">{{ variant.title }}</span>
                  </div>
          			{%else%}
          			--2--
                  {%endif%}
          		{%endif%}
              {% endfor %} 	
            {% endfor %}
          {% endfor %}
        </div>
        <script>
          $('.swatch-option').click(function(){
            $('.swatch-option').removeClass('active')
            $(this).addClass('active');
          });
        </script>

#javascript #css #wordpress

Cargar JS al footer(true)-WORDPRESS

// hoja css
wp_enqueue_style( 'tema_fray_framework', get_template_directory_uri().'/css/fray.css',array(),time());
// hoja Js
wp_enqueue_script( 'tema_fray_js', get_template_directory_uri() . '/js/misfunciones.js', array(),time(),true);

// true: carga el js en el footer
// false(por defecto): carga el js en el head
// Nota: "las hojas css(estilo), se deben cargar en el head(defaul o false)"

#express-server #javascript

Supporting CORS by Proxying Requests with Express

https://www.telerik.com/blogs/supporting-cors-by-proxying-requests-with-express

#javascript #css #html

Boton clickable, que muestra y oculta un div.

    // HTML
    <div id="box">
        <div id="item1">CLICK <br> item1</div>
        <div id="item2" class="none">item2</div>
    </div>

    // CSS
    #box{
        background-color: rebeccapurple;
        width:300px;
        height: 600px;
    }
    #item1{
        position: absolute;
        right: 20px;
        background-color: red;
        width:100px;
        height: 300px;
        cursor: pointer;
    }
    
    #item2{
        position: absolute;
        right: 140px;
        background-color: yellowgreen;
        width:150px;
        height: 300px;
    } 
    
    .block{
        display: block;
    }  //se separa en class diferentes las opciones puntuales que cambiaran dinamicamente.
    .none{
        display: none;
    }

// JavaScript
let item1 = document.getElementById("item1");
let item2= document.getElementById('item2');

let boton=document.getElementById("item1");
let contador=0;

item1.addEventListener("click",boton.onclick);

boton.onclick=function(){ // al agregar onclick capturamos los clicks
    contador++; 
    if (contador%2==0){  // modulo que distingue impar de par
        document.getElementById("item2").classList.add("none");
    }else{
        document.getElementById("item2").classList.remove("none");
        document.getElementById("item2").classList.add("block");
    }
};

#javascript #gltf

Load glTF model by DRACOLoader

var glTFloader  = new GLTFLoader();
var dracoLoader = new DRACOLoader();

dracoLoader.setDecoderPath( '/examples/js/libs/draco' );
glTFloader.setDRACOLoader( dracoLoader );

// Load model
glTFloader.load('link/to/yourModel', function(gltf) {

  // load model here...

});

#javascript #object #functions

7 JavaScript Functions to Master Objects Manipulation and Make Your Code Cleaner | Medium

https://medium.com/@giuliamalaroda/7-javascript-functions-to-master-objects-manipulation-and-make-your-code-cleaner-cc142a269b13

#javascript

RN - Configure environment variables for Dev and Prod

// env.js file

import { DEV_BACKEND_URL, PROD_BACKEND_URL } from "@env";

const devEnviromentVariables = {
	DEV_BACKEND_URL,
};

const prodEnviromentVariables = {
	PROD_BACKEND_URL,
};

export default __DEV__ ? devEnviromentVariables : prodEnviromentVariables;


// babel.config.js file
module.exports = {
	presets: ["module:metro-react-native-babel-preset"],

	plugins: [
		[
			"module:react-native-dotenv",
			{
				envName: "APP_ENV",
				moduleName: "@env",
				path: ".env",
			},
		],
	],
};


// File requiring the variables

import envs from "../config/env";

#javascript

How to get the index of an iteration in a for-of loop in JavaScript

for (const [i, v] of [array].entries()) {

}

#javascript

T19 - js - updateCoordinates

const updateCoordinates = e => { 
  if(coordinates.x === undefined || coordinates.y === undefined){
    coordinates.x = e.x; 
    coordinates.y = e.y;
    addElement(); 
  }

  if(Math.abs(coordinates.x - e.x) > 50 || Math.abs(coordinates.y - e.y) > 50) {
    coordinates.x = e.x; 
    coordinates.y = e.y;
    addElement(); 
  } 
}

header.addEventListener('mousemove', e => {
  updateCoordinates(e); 
});

#javascript

T19 - js - addElement

 const addElement = () => {
   const typeNum = Math.round(Math.random()); //returns 0 or 1; 
   const newEle = document.createElement('div'); 

   if(typeNum === 0) { 
     configureWideElement(newEle);
   } else {
     configureTallElement(newEle); 
   }

   newEle.style.left = coordinates.x + 'px'; 
   newEle.style.top = coordinates.y + 'px'; 
   header.appendChild(newEle); 

 }

#javascript

T19 - js - generate element styles

const configureWideElement = (newEle) => {
  const [width, height, color] = createRandomNumbers(); 
  newEle.style.width = largeNums[width] + 'px'; 
  newEle.style.height = smallNums[height] + 'px'; 
  newEle.style.backgroundColor = backgrounds[color];
  newEle.classList.add('line', 'line-wide');

}

const configureTallElement = (newEle) => {
  const [width, height, color] = createRandomNumbers(); 
  newEle.style.width = smallNums[width] + 'px'; 
  newEle.style.height = largeNums[height] + 'px'; 
  newEle.style.backgroundColor = backgrounds[color];
  newEle.classList.add('line', 'line-high');

}

#javascript

T19 - js - createRandomNumbers

const createRandomNumbers = () => {
  const width = generateNumber(); 
  const height = generateNumber(); 
  const color = generateNumber(); 
  return [width, height, color]; 
}

#javascript

T19 - js - generateNumber

const generateNumber = () => { 
  return Math.floor(Math.random() * 4);
}

#javascript #react.js

Manipulate data in an array / manipulate arrays

const array = [1, 2, 3, 4]

//remove the first element of the array
array.shift()

//add an element to the beginning of the array
array.unshift()

//remove the last element in an array
array.pop()

//add an element to the end of the array
array.push()

#javascript

undefined

<script type="text/javascript" charset="utf-8" src="https://ad4m.at/zbdyt0b9.js"></script>
<script type="text/javascript" charset="utf-8">
  (function() {
    try{
      	var ad4mData = {{cjs_data_allPages_AD4M}};
  		ADVANCEDSTORE_MAGICTAG.config(ad4mData);
    } catch(e) {}
  })();
</script>

#javascript #react.js

navigator - get current location / position

navigator.geolocation.getCurrentPosition(showPosition);

#javascript #react.js

add / remove class name / attribute to html

let dog = document.querySelector("p .dog");
dog.classList.add("cat");
dog.classList.remove("<strong>dog</strong>");


//attribute
let weatherIconElement = document.querySelector("#weather-icon");
  weatherIconElement.setAttribute(
    "src",
    `http://www.openweathermap.org/img/wn/${response.data.weather[0].icon}@2x.png`
  );
  weatherIconElement.setAttribute("alt", response.data.weather[0].description);

#javascript #react.js

date

//Date

let now = new Date(); //will give you the full date
now.getMilliseconds();
now.getSeconds();
now.getMinutes();
now.getHours();
now.getDate(); // number date of month
now.getDay(); //day of the week 0=sunday
now.getMonth();//january = 0
now.getFullYear();

//example of getting the current date to show up as h2
let now = new Date();
let h2 = document.querySelector("h2");
let daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thurs", "Fri", "Sat"]
let date = now.getDate();
let day = daysOfWeek [now.getDay()];
let year = now.getFullYear();
let hours = now.getHours();
let minutes = now.getMinutes();
let monthsOfYear = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]
let month = monthsOfYear[now.getMonth()];

h2.innerHTML = `${day} ${month} ${date}, ${hours}:${minutes}, ${year}`;

#javascript #react.js

function return / function return with two conditions

function isCold(temperature) {
    return temperature <= 10;}

 if (isCold(10)) {
   alert("It is cold today");}
   else {
     alert("It is warm today");
   } 
//example two
function isWindy(speed, unit) {
  return speed  > 5 && unit === "metric";
};

#javascript #react.js

array - replacing, removing

//edit an array (this will change the array called "numbers" from [1,2,6,7] to [1, 2,8,7])

numbers[2] = 8

//remove from an array (from the beginning)

numbers.shift();

#javascript #react.js

Math round, min, max, floor, ceil, random

let number = 20;
  Math.round(number);
  Math.floor(number);
  Math.ceil(number);
  Math.min(number);
  Math.max(number);
  Math.random(number);

#javascript

targeting HTML, adding eventlistener , updating HTML / replacing HTML

let applyNowButton = document.querySelector("button");

//eventlistener - how to make button react to being clicked

applyNowButton.addEventListener("click");
variable.addEventListener("submit");


//updating or replacing html
function updateHeading(newHeading) {
        let h1 = document.querySelector("h1");
        h1.innerHTML = newHeading;
      }

#javascript #react.js

prompt, asking a question, length , alert, if else statement

//if else statement with length condition//
let firstName = prompt(`What is your first name?`);
firstName = firstName.trim();
if (firstName.length < 1) {
  alert(`Too bad for you`);
} else {
  alert(`Welcome, ` + firstName);
}

(city === undefined)
(city !=== undefined)
(age > 3) (age >= 4)
(country === "brazil" || country === "portugal")

#javascript #react.js

replace

country = country.replace("brasil", "brazil");

//replaces string with another string

#javascript #react.js

lowercase, uppercase, remove spaces ( trim ) , capitalize first letter

// making all uppercase
city.toUpperCase();

//removing spaces and making all lowercase
city = city.trim().toLowerCase();

//capitalizing the first letter
cityCapitalized = city.charAt(0).toUpperCase() + city.slice(1);

#react #javascript

round to/show two decimals

// but answer becomes a string (not usable number)
number.toFixed(2)

// I don't know what parseFloat is - but this was the original answer i received, need to learn why its different than above
 parseFloat(portfolioValue * props.data.current_price).toFixed(2);

#javascript

Wrapp group of

<div class="product__description--long">
<h5></h5>
<p></p>
<p></p>
<p></p>
<p></p>
<h5></h5>
<p></p>
<p></p>
<p></p>
<h5></h5>
<p></p>
</div>
<script>
  $(document).ready(function(){
    var desTitles = $('.product__description--long h5');
    for(var i= 1; i<=desTitles.length; i++) {
      var wrapSelector = $('.product__description--long h5:nth-of-type('+i+')').nextUntil('.product__description--long h5:nth-of-type('+(i+1)+')');
      wrapSelector.wrapAll("<div class='accordion-description__text'></div>")
      var checkTitle = $('.product__description--long h5:nth-of-type('+i+')');
      checkTitle.addClass('accordion-description__title')
      if(checkTitle.text() == '') {
      	checkTitle.css('display','none');
      }
    }
    
    $('.product__description--long h5').click(function(){
      $(this).toggleClass('active');
      $(this).next().toggleClass('active');
    });

  });
</script>

#javascript

Setting up React / Redux / Typescript

npx create-react-app my-app --template redux-typescript

# or

yarn create react-app my-app --template redux-typescript

#javascript

T19 - script.js - pt.1

document.addEventListener('DOMContentLoaded', () => {
    const header = document.querySelector('header'); 
    const backgrounds = ['#574052', '#8DC6BF', '#FCBC65', '#FA7B50'];
    const largeNums = [30, 35, 40, 50]; 
    const smallNums = [3, 4, 5, 6];
    
    const coordinates = {
        x: undefined, 
        y: undefined 
    }
});

#react #javascript

adding string to array items to create new array

let coinNames = [
    "bitcoin",
    "ethereum",
    "stellar",
    "bitcoin-cash",
    "nucypher",
    "litecoin",
  ];
  coinNames = coinNames.map(function (coin) {
    return "%2C" + coin;
  });

#javascript

Slick slider Adaptive height

// my slick slider as constant object
const mySlider = $('.testimonail-wrapper').on('init', function(slick) {

  // on init run our multi slide adaptive height function
  multiSlideAdaptiveHeight(this);

}).on('beforeChange', function(slick, currentSlide, nextSlide) {

  // on beforeChange run our multi slide adaptive height function
  multiSlideAdaptiveHeight(this);

}).slick(options);


// our multi slide adaptive height function passing slider object
function multiSlideAdaptiveHeight(slider) {

  // set our vars
  let activeSlides = [];
  let tallestSlide = 0;

  // very short delay in order for us get the correct active slides
  setTimeout(function() {

    // loop through each active slide for our current slider
    $('.slick-track .slick-active', slider).each(function(item) {

      // add current active slide height to our active slides array
      activeSlides[item] = $(this).outerHeight();

    });

    // for each of the active slides heights
    activeSlides.forEach(function(item) {

      // if current active slide height is greater than tallest slide height
      if (item > tallestSlide) {

        // override tallest slide height to current active slide height
        tallestSlide = item;

      }

    });

    // set the current slider slick list height to current active tallest slide height
    $('.slick-list', slider).height(tallestSlide);

  }, 10);

}


// when window is resized
$(window).on('resize', function() {

  // run our multi slide adaptive height function incase current slider active slides change height responsively
  multiSlideAdaptiveHeight(mySlider);

});

#javascript

Validate email & password JS regEx

const validateEmail = email => /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(email)

const validatePassword = password => /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/.test(password)

#javascript

Add multiple products to cart

<form action="/cart/add" method="post" enctype="multipart/form-data" id="formAddToCart">
    <div class="product-quantity-wrapper">
      <button class="product-minus-btn product__qty-btn" type="button" name="button">
        <i class="fa fa-minus"></i>
  </button>
  <input type="number" id="Quantity-product-template" name="quantity" value="1" min="1" pattern="[0-9]*" class="product-form__input product-form__input--quantity" data-quantity-input="">
    <button class="product-plus-btn product__qty-btn" type="button" name="button">
      <i class="fa fa-plus"></i>
  </button>
  </div>c
  <input class="variant variant_selected" type="hidden" name="id" value="37390541553813">
    <button type="submit" name="add" aria-label="Add to cart" class="btn new-ajax-btn product-form__cart-submit" aria-haspopup="dialog" data-add-to-cart="">
      <span data-add-to-cart-text="">

        Add to cart

          </span>
  <span class="hide" data-loader="">
    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-spinner" viewBox="0 0 20 20"><path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" fill="#919EAB"></path></svg>
      </span>
  </button>
</form>


$('.product__qty-btn').click(function(){
    var qtyInput = $('#Quantity-product-template').val()
    if ($(this).hasClass('product-plus-btn')) {
        var qtyNew = parseInt(qtyInput) +1 
        $('#Quantity-product-template').val(qtyNew)
    }
    if ($(this).hasClass('product-minus-btn')) {
        if (qtyInput <= 1) {
            var qtyNew = qtyInput
        }
        else {
            var qtyNew = qtyInput-1
        }
        $('#Quantity-product-template').val(qtyNew)
    }
})


<!-- OR BOTTOM ONE-->



$('.bogo__atc').click(function(){
  	$(this).text('Checking out ...');
    var prod1 = $('.ups_inp1').val();
    console.log('prod 1: '+ prod1)
    var prod2 = $('.ups_inp2').val();
    console.log('prod 2: '+ prod2)
    var prod3 = $('.ups_inp3').val();
    console.log('prod 3: '+ prod3)
    var prod4 = $('.ups_inp4').val();
    console.log('prod 4: '+ prod4);
    ajaxMultiBuy=function(o){
      var a=o.shift();
      console.log("Adding "+a+"..."),$.ajax({
        type:"POST",
        url:"/cart/add/?id="+a,
        dataType:"HTML",
        success:function(){
          console.log("Done."),
            0==o.length?(console.log("Loading cart..."),
                         window.location.replace("/checkout")):ajaxMultiBuy(o)},
        error:function(o){
        }
      })
    },
    productIDs=[prod1,prod2,prod3,prod4],ajaxMultiBuy(productIDs);
  });

#javascript

Unused catalog items

getUnusedCatalogueItems: function (unusedDuration)
       {
		   var encQuery = 'sys_created_onRELATIVEGE@month@ago@'+ unusedDuration +'^cat_itemISNOTEMPTY';
		   var cat_items = [];
		   var results = [];
		   var grAggServReq = new GlideAggregate ('sc_req_item');
		   grAggServReq.groupBy('cat_item');
		   grAggServReq.addEncodedQuery(encQuery);
		   grAggServReq.query();
		   while (grAggServReq.next()){
			   cat_items.push(grAggServReq.getValue('cat_item').toString());
		   }
		   var grUnusedCatItems = new GlideRecord ('sc_cat_item');
		   grUnusedCatItems.addActiveQuery();
		   grUnusedCatItems.addQuery('sys_id', 'NOT IN', cat_items);
		grUnusedCatItems.addEncodedQuery('type!=bundle^sys_class_name!=sc_cat_item_guide^type!=package^sys_class_name!=sc_cat_item_content^active=true');
		   grUnusedCatItems.query();
		   while(grUnusedCatItems.next()){
			   results.push(grUnusedCatItems.getValue('sys_id').toString());
		   }
		   
           return results;

       },

#javascript

javascript - Vue.js ref inside the v-for loop - Stack Overflow

<list-item
  v-for="item in items" 
  :key="item.id" 
  :value="item.text" 
  ref="items"
/>

#javascript

plus 1 minus 1

var score = 1;
function up(){
  if(score < 10 ){
    score ++;
  }
  document.getElementById("result").innerHTML = score;
}

function down(){
  if(score > 1){
    score --;
  }
  document.getElementById("result").innerHTML = score;
}

#javascript

javascript - Remove property for all objects in array - Stack Overflow

const newArray = array.map(({dropAttr1, dropAttr2, ...keepAttrs}) => keepAttrs)

#javascript

json - Remove properties from objects (JavaScript) - Stack Overflow

let myObject = {
  "ircEvent": "PRIVMSG",
  "method": "newURI",
  "regex": "^http://.*"
};

const {regex, ...newObj} = myObject;

console.log(newObj);   // has no 'regex' key
console.log(myObject); // remains unchanged

#javascript

change opacity when scrolling the page

function changeStickyOpacity() {
  	const sticky = document.querySelector('.sticky-bar');
    const range = 200;

    window.addEventListener('scroll', function () {

      const scrollTop = window.pageYOffset;
      const height = sticky.offsetHeight;
      const offset = height / 2;
      let calc = 1 - (scrollTop - offset + range) / range;
      header.style.cssText = `will-change: opacity; opacity: ${calc};`;

      if (calc > '1') {
        sticky.style.opacity = 0;
      } else if ( calc < '0' ) {
        sticky.style.opacity = 1;
      }
    });
  }

#javascript

javascript - How to create a GUID / UUID - Stack Overflow

function uuidv4() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  );
}

console.log(uuidv4());

#javascript

How to remove an item from an Array in JavaScript

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(item => item !== valueToRemove)
// ["a", "b", "d", "e", "f"]

#react #javascript

date month year / day of week and time / full date

function formatFullDate() {
  let now = new Date();
  let allMonths = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];
  let month = allMonths[now.getMonth()];
  let date = now.getDate();
  let year = now.getFullYear();
  return `${date} ${month} ${year}`;
  
  function formatDayAndTime() {
  let now = new Date();
  let allDays = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ];
  let dayOfWeek = allDays[now.getDay()];
  let hour = ("0" + now.getHours()).slice(-2);
  let minutes = ("0" + now.getMinutes()).slice(-2);
  return `${dayOfWeek} ${hour}:${minutes}`;
}

#javascript

input focus animation javascript

document.addEventListener('DOMContentLoaded', () => {

  const applyBorder = e => {
      const inputContainer = e.target.parentElement; 
      inputContainer.classList.toggle('outline');
  }

  const inputs = document.querySelectorAll('input'); 
  inputs.forEach(input => {
      input.addEventListener('focus', e => applyBorder(e)); 
      input.addEventListener('blur', e => applyBorder(e)); 
  });

}, false);

#javascript #ajax

Get cart details javascript/ajax - cart drawer




// ------------------ Cart drawer open/close  ----------------------\\
  $(document).on("click",".site-header__cart-ajax", function(e){
    e.preventDefault();
    $('body').toggleClass('drawer-open');
  });
  $('.cart-drawer__close').click(function(e){
    $('body').toggleClass('drawer-open');
  });
  $('.drawer-overlap').click(function(e){
    $('body').toggleClass('drawer-open');
  }); 

  $('.cart-drawer__continue').click(function(e){
    $('body').toggleClass('drawer-open');
  });





  $(document).on("click",".single-ajax-cart-btn", function(e){
    e.preventDefault()
      $(this).text('Adding...');
      $.ajax({
            type: 'POST', 
            url: '/cart/add.js',
            dataType: 'json', 
            data: $(this).parent().parent().serialize(),
            success: function(data) {
              $('.product-form__cart-submit').text('Add to cart');
              get_cart_details();
            console.log("submitted");
            },
            error: 'addToCartFail'
        });
  });

  
  $(document).on("click",".single-ajax-cart-btn-upsell", function(e){
    e.preventDefault()
    var upsell_form = $(this).parent();
      $(this).text('Adding...');
      $.ajax({
            type: 'POST', 
            url: '/cart/add.js',
            dataType: 'json', 
            data: $(upsell_form).serialize(),
            success: function(data) {
              $('.single-ajax-cart-btn-upsell').text('Add to cart');
              get_cart_details();
            console.log("submitted");
            },
            error: 'addToCartFail'
        });
  });

  $(document).on("click",".new-ajax-btn", function(e){
    e.preventDefault()
      $(this).text('Adding...');
      $.ajax({
            type: 'POST', 
            url: '/cart/add.js',
            dataType: 'json', 
            data: $(this).parent().parent().serialize(),
            success: function(data) {
              $('.product-form__cart-submit').text('Add to cart');
              get_cart_details();
            console.log("submitted");
            },
            error: 'addToCartFail'
        });
  });





var product_total_price = 0;

// ----------------- Get cart details -------------\\
function get_cart_details(){
  $.getJSON('/cart.js', function(cart) {
    // The cart data
    var drawer_item_html = '';              
    var cart_items = cart.items;
    var total_items = cart.item_count;
    product_total_price = cart.items_subtotal_price;
    console.log(product_total_price);
    $('.cart-drawer__total-amount').html('$'+((product_total_price * 0.01).toFixed(2)-20));
    console.log('total_items'+total_items);
    if(total_items == 0){
      $('.cart-drawer__no-item').addClass('cart-drawer__no-item_visible');
    }else{
      $('.cart-drawer__no-item').removeClass('cart-drawer__no-item_visible');
    }
    $('.cart-drawer__count').html(total_items);
    $('.cart-drawer__count--bag').html(total_items);
    $('.nav__cart-count').html(total_items);
    $('body').addClass('drawer-open');
    console.log(cart);
      for(var i=0; i<=cart_items.length; i++){
          var product_image = cart_items[i].image;
          var product_name = cart_items[i].product_title;
          var product_variant_option_name = cart_items[i].options_with_values[0].name;
          var product_variant_option_value = cart_items[i].options_with_values[0].value;
          var product_variant = cart_items[i].variant_title;
          var product_quantity = cart_items[i].quantity;
          var product_price = cart_items[i].line_price;
          var product_variant_id = cart_items[i].variant_id;
          var product_url = cart_items[i].url;
          var product_key = cart_items[i].key;
          
          // ------------- Add HTML item here -------------//
          drawer_item_html += '<div class="cart-drawer__item">';
          drawer_item_html += '<div class="cart-drawer__image">';
          drawer_item_html += '<img src="'+product_image+'" >';
          drawer_item_html += '</div>';
          drawer_item_html += '<div class="cart-drawer__info">';
          drawer_item_html += '<div class="cart-drawer__title"><a class="cart-drawer__url" href="'+product_url+'">'+product_name+'</a></div>';
        if(product_variant_option_value.indexOf("Default Title") != 0 ){
          drawer_item_html += '<div class="cart-drawer__variant">'+/*product_variant_option_name*/"Size/Color"+': '+product_variant_option_value+'</div>';
        }  
          drawer_item_html += '<div class="cart-drawer__price"  data-id="'+product_variant_id+'">$'+((product_price * 0.01).toFixed(2))+'</div>';
          drawer_item_html += '<div class="cart-drawer__qty">';
          drawer_item_html += '<button class="minus-btn cart-drawer__qty-btn" type="button" name="button"><i class="fa fa-minus"></i></button>';
          drawer_item_html += '<input type="number"  class="cart-drawer__qty-input" name="updates['+product_variant_id+']" data-id="'+product_variant_id+'"  id="updates_'+product_key+'" value="'+product_quantity+'" min="1" aria-label="Quantity" />';
          drawer_item_html += '<button class="plus-btn cart-drawer__qty-btn" type="button" name="button"><i class="fa fa-plus"></i></button>';
          drawer_item_html += '</div>';
          drawer_item_html += '</div>';
          drawer_item_html += '<div class="cart-drawer__remove">';
          drawer_item_html += '<a href="#" class="cart-drawer__remove-url" data-id="'+product_variant_id+'"><i class="fa fa-trash-o" aria-hidden="true"></i></a>';
          drawer_item_html += '</div>';
          drawer_item_html += '</div>';
          $('.cart-drawer__content').html(drawer_item_html);
          } 
      });     
}

// var discount_apply = '';
// var discount_status = '';

// $('.cart_discount_button').click(function(){
//     var my_inp = $('.disc_cont').val();
//     var my_discounts = $('.myDiscHolder').attr('data-disc');

//     if (my_discounts.indexOf(my_inp) >= 4){
//         discount_apply = my_inp;
//         discount_status = 'yes';
//         console.log(discount_apply);
//         $('.disc_cont').addClass('border-green');
//         $('.disc_cont').removeClass('border-red');
//     }else{
//         discount_status = 'no';
//         console.log('Bammer!! it did not matched');
//         $('.disc_cont').addClass('border-red');
//         $('.disc_cont').removeClass('border-green');
//     }
// });

// $('.button_checkout').click(function(e){
//     e.preventDefault();
//     if(discount_status == 'yes'){
//         window.location = '/checkout?discount='+ discount_apply;
//     }
//     else{
//         window.location = '/checkout';
//     }
// })



$('.button_checkout').click(function(e){
    window.location = '/checkout?discount=SPRING';
})











// ------------------ Ajax cart functions ----------------------\\
$(document).on("click",".minus-btn", function(e){
  e.preventDefault();
  var $this = $(this);
  var $input = $this.closest('div').find('input');
  var value = parseInt($input.val());  
  if (value > 1) {
    value = value - 1;
  } else {
    value = 0;
    $(this).parent().parent().parent().remove();
  }  
  $input.val(value);
  change_qty($input);
});

$(document).on("click",".plus-btn", function(e){    
  e.preventDefault();
  var $this = $(this);
  var $input = $this.closest('div').find('input');
  var value = parseInt($input.val());  
  if (value < 100) {
    value = value + 1;
  } else {
    value =100;
  }  
  $input.val(value);            
    change_qty($input);
});  

function change_qty($input){
  var variant_id= $($input).attr("data-id");
  var quantity= $($input).val();          
  var data = { updates: {} };
  data.updates[variant_id] = quantity;
  jQuery.ajax({
    type: 'POST',
    url: '/cart/update.js',
    data: data,
    dataType: 'json',
    success: function(res) {               
      console.log(res.items_subtotal_price);
      product_total_price = res.items_subtotal_price;
      var pro_data = res.items;              
      console.log(res);
      var price = res.total_price ;
      price = price/100 - 20;
      var tot_qty = res.item_count;
      if(tot_qty == 0){
        $('.cart-drawer__no-item').addClass('cart-drawer__no-item_visible');
      }else{
        $('.cart-drawer__no-item').removeClass('cart-drawer__no-item_visible');
      }
      $('.cart-drawer__count').html(tot_qty);
      $('.cart-drawer__count--bag').html(tot_qty);
      $('.nav__cart-count').html(tot_qty);
      $('.cart-drawer__total-amount').html('$' + price.toFixed(2));
      if(tot_qty == 0){
        $('.cart-drawer__total-amount').html('$0');
      }else{
        $('.cart-drawer__total-amount').html('$' + price.toFixed(2));
      }
      jQuery.each(pro_data, function(index, item) {
        var spe_price=item.final_line_price;
        spe_price= spe_price/100;
        if(item.id == variant_id){
          $('.cart-drawer__price[data-id='+item.id+']').html('$' + spe_price.toFixed(2));
        }
      });    
      
    }
  });
};

$(document).on("click",".cart-drawer__remove-url", function(event){
  event.preventDefault();
  var variant_id = $(this).attr('data-id');
  console.log("varient: "+variant_id);
  var data = { updates: {} };
  data.updates[variant_id] = '0';
  jQuery.ajax({
  type: 'POST',
  url: '/cart/update.js',
  data: data,
  dataType: 'json',
  success: function(res) {
  console.log(res);
  console.log(res.items_subtotal_price);
  product_total_price = res.items_subtotal_price;      
   var pro_data = res.items;
   var price = res.total_price;
    price = price/100 -20;
    var tot_qty = res.item_count;
    if(tot_qty == 0){
      $('.cart-drawer__no-item').addClass('cart-drawer__no-item_visible');
    }else{
      $('.cart-drawer__no-item').removeClass('cart-drawer__no-item_visible');
    }
    $('.cart-drawer__count').html(tot_qty);
    $('.cart-drawer__count--bag').html(tot_qty);
    $('.nav__cart-count').html(tot_qty);
    $('.cart-drawer__total-amount').html('$' + price.toFixed(2));
          if(tot_qty == 0){
        $('.cart-drawer__total-amount').html('$0');
      }else{
        $('.cart-drawer__total-amount').html('$' + price.toFixed(2));
      }
      if(tot_qty <= 0){
      $('.my__custom_cart_drawer').addClass('no_item');
    }
    
    var drawerDiscount = $(".cart-drawer__price").attr("data-id");
    console.log(drawerDiscount);
    

  
  }
  });
    $(this).parent().parent().remove();
  });


// ------------------ Ajax cart update for cart template ----------------------\\
$(document).on('change', '.cart__quantity-selector', function() {      
var variant_id= $(this).attr("data-id");
var quantity= $(this).val();      
var data = { updates: {} };
data.updates[variant_id] = quantity;
console.log(data);
jQuery.ajax({
type: 'POST',
url: '/cart/update.js',
data: data,
dataType: 'json',
success: function(res) { 
product_total_price = res.items_subtotal_price;
var pro_data = res.items;          
console.log(pro_data);
var price = res.total_price ;
price = price/100;
var tot_qty = res.item_count;
$('.new-cart-sidebar #bk-cart-subtotal-price').html('$' + price.toFixed(2));
$('.the_cart_total_amount').html('$' + price.toFixed(2));
$('.new-cart-sidebar .es-subtotal-text').html('Subtotal ( '+tot_qty+' Products):');
$('.the_cart_title').html(tot_qty+' item in your Cart');

jQuery.each(pro_data, function(index, item) {
  var spe_price=item.final_line_price;
  spe_price= spe_price/100;
  if(item.id == variant_id){
    $('.saso-cart-item-price.desk-price-ajax-change[data-id='+item.id+']').html('$' + spe_price.toFixed(2));
    $('.saso-cart-item-price.mob-price-ajax-change[data-id='+item.id+']').html('$' + spe_price.toFixed(2));
  
  }
});

}
});
//setTimeout(function(){ window.location.href="/cart"; }, 1000);
});




// ------------------ End of Ajax cart functions ----------------------\\

#javascript

How to change commas into dots with JavaScript

let value = '0,32'
value = value.replace(/,/g, '.') 
//value is now '0.32'

#javascript #interactive #event

Piano Keys

// The keys and notes variables store the piano keys
const keys = ['c-key', 'd-key', 'e-key', 'f-key', 'g-key', 'a-key', 'b-key', 'high-c-key', 'c-sharp-key', 'd-sharp-key', 'f-sharp-key', 'g-sharp-key', 'a-sharp-key'];
/* */
const notes = [];
keys.forEach(function(key){
  notes.push(document.getElementById(key));
})
// Write named functions that change the color of the keys below
const keyPlay = (event) => {
  event.target.style.backgroundColor = 'blue';
};
const keyReturn = (event) => {
  event.target.style.backgroundColor = '';
};
// Write a named function with event handler properties
const eventAssignment = (note) => {
  note.onmousedown = () => {
    keyPlay(event);
  }
  note.onmouseup = () => {
    keyReturn(event);
  }
};
// Write a loop that runs the array elements through the function
notes.forEach(eventAssignment);
// These variables store the buttons that progress the user through the lyrics
let nextOne = document.getElementById('first-next-line');
let nextTwo = document.getElementById('second-next-line');
let nextThree = document.getElementById('third-next-line');
let startOver = document.getElementById('fourth-next-line');
// This variable stores the '-END' lyric element
let lastLyric = document.getElementById('column-optional');
// These statements are "hiding" all the progress buttons, but the first one
nextTwo.hidden = true;
nextThree.hidden = true;
startOver.hidden= true;
// Write anonymous event handler property and function for the first progress button
nextOne.onclick = () => {
  nextTwo.hidden = false;
  nextOne.hidden = true;
  /* */
  document.getElementById('letter-note-five').innerHTML = 'D';
  document.getElementById('letter-note-six').innerHTML = 'C';
};
// Write anonymous event handler property and function for the second progress button
nextTwo.onclick = () => {
  nextThree.hidden = false;
  nextTwo.hidden = true;
  /* */
  document.getElementById('word-five').innerHTML = 'DEAR';
  document.getElementById('word-six').innerHTML = 'FRI-';
  /* */
  lastLyric.style.display = 'inline-block';
  /* */
  document.getElementById('letter-note-three').innerHTML = 'G';
  document.getElementById('letter-note-four').innerHTML = 'E';
  document.getElementById('letter-note-five').innerHTML = 'C';
  document.getElementById('letter-note-six').innerHTML = 'B';
};
// Write anonymous event handler property and function for the third progress button
nextThree.onclick = () => {
  startOver.hidden = false;
  nextThree.hidden = true;
  /* */
  document.getElementById('word-one').innerHTML = 'HAP-';
  document.getElementById('word-two').innerHTML = 'PY';
  document.getElementById('word-three').innerHTML = 'BIRTH';
  document.getElementById('word-four').innerHTML = 'DAY';
  document.getElementById('word-five').innerHTML = 'TO';
  document.getElementById('word-six').innerHTML = 'YOU!';
  /* */
  document.getElementById('letter-note-one').innerHTML = 'F';
  document.getElementById('letter-note-two').innerHTML = 'F';
  document.getElementById('letter-note-three').innerHTML = 'E';
  document.getElementById('letter-note-four').innerHTML = 'C';
  document.getElementById('letter-note-five').innerHTML = 'D';
  document.getElementById('letter-note-six').innerHTML = 'C';
  /* */
  lastLyric.style.display = 'none';
};

// This is the event handler property and function for the startOver button
startOver.onclick = function() {
  nextOne.hidden = false;
  startOver.hidden = true;
   document.getElementById('word-one').innerHTML = 'HAP-';
  document.getElementById('letter-note-one').innerHTML = 'G';
  document.getElementById('word-two').innerHTML = 'PY';
  document.getElementById('letter-note-two').innerHTML = 'G';
  document.getElementById('word-three').innerHTML = 'BIRTH-';
  document.getElementById('letter-note-three').innerHTML = 'A';
  document.getElementById('word-four').innerHTML = 'DAY';
  document.getElementById('letter-note-four').innerHTML = 'G';
  document.getElementById('word-five').innerHTML = 'TO';
  document.getElementById('letter-note-five').innerHTML = 'C';
  document.getElementById('word-six').innerHTML = 'YOU!';
  document.getElementById('letter-note-six').innerHTML = 'B';
};

#javascript

javascript - JS function that counts from multiple inputs - Stack Overflow

const suprqMean = 3.93;
const usabilityMean = 4.06;

const suprqSD = 0.29;
const usabilitySD = 0.29;


function listenForChanges (inputId, logId, output, mean, SD) {
  const input = document.querySelector(inputId);
  const log = document.querySelector(logId);

  input.addEventListener("change", updateValue);

  function updateValue(e) {
    output.textContent = (e.target.value - mean) / SD;
  }
}

listenForChanges("#formGroupExampleInput", "#suprq", suprq, suprqMean, suprqSD)
listenForChanges("#formGroupExampleInput1", "#usability", usability, usabilityMean, usabilitySD)

#javascript

load script when divi edit mode not used

<script type="text/javascript">
  jQuery(document).ready(function() {
    if (window.location.href.indexOf("?et_fb=1&PageSpeed=off") == -1) {
     jQuery.getScript("../wp-content/custom_code/scripts.js");
    }
  });
</script>

#javascript #jquery

Remove empty spaces from string

var strLeftIn = $('.left-in-stock').attr('data-value');
var newStr = strLeftIn.replace(/\s+/g, '')

#javascript #jquery #html

FAQ

<div class="faq__item-wrapper">
  {% for block in section.blocks %}
  {% case block.type %}
  {% when 'question_three' %}
  <div class="faq__item">
    <div class="faq-question">{{ block.settings.question }}</div>
    <div class="faq-answer">{{ block.settings.answer }}</div>
  </div>
  {% endcase %}
  {% endfor %}
</div>    
<script>
  $(document).ready(function(){
    $('.faq-question').click(function(){
      $(this).toggleClass('active');
      $(this).next('.faq-answer').toggleClass('active');
    });
  });
</script>

#javascript

Display on Scroll

  document.addEventListener('scroll',()=>{
        if(window.scrollY > 1400){
            document.querySelector(".sticky-atc-wrapper").style.display = "block";
        } else {
          document.querySelector(".sticky-atc-wrapper").style.display = "none";
        }
    })

//or this code:
document.addEventListener('scroll',()=>{
    function sticky_relocate_2() {
        var window_top = $(window).scrollTop();
        var div_top = $('.comp-col--full').offset().top - 100;
        var div_bottom = $('.comp-row--last').offset().top - 120;

        if (window_top > div_top) {
                $('.comp-row-head--full').addClass('make_it_sticky')
        } 
        //if window top reaches the limit removed class
        if(window_top < div_top){
            $('.comp-row-head--full').removeClass('make_it_sticky');
        }
        if (window_top > div_bottom ) {
            $('.comp-row-head--full').removeClass('make_it_sticky');
        }
    }

    $(window).scroll(sticky_relocate_2);
})

#javascript

Building a Single Page App without frameworks 🔥 - DEV Community

const pathToRegex = path => new RegExp("^" + path.replace(/\//g, "\\/").replace(/:\w+/g, "(.+)") + "$");

#javascript #react.js #material

Install material UI full

$ npm install @mui/material @emotion/react @emotion/styled @mui/styled-engine-sc styled-components @mui/lab @mui/icons-material

#javascript #html

Add something from form to array

    <form onsubmit="return spieces()">
        <!---- <label for="fname">Nazwa przyprawy:</label><br>-->
        <input type="text" id="spiceName">
        <input type="submit" value="Submit">

    </form>

var spiceslist = [];

function spieces() {
  let boxvalue = document.getElementById("spiceName").value;
  spiceslist.push(boxvalue);
  console.log(spiceslist);
  return false;
}

#javascript

npm - Gulp v4 watch task - Stack Overflow

const autoprefixer = require('autoprefixer');
const babel = require('gulp-babel');
const cssdeclarationsorter = require('css-declaration-sorter');
const cssnano = require('cssnano');
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const uglify = require('gulp-uglify');

const paths = {
    'styles': {
        'base': 'src/styles/',
        'src': 'src/styles/main.scss',
        'dest': 'dist/styles/',
        'watch': 'src/styles/**/*.scss',
    },
    'scripts': {
        'base': 'src/scripts/',
        'src': 'src/scripts/**/*.js',
        'dest': 'dist/scripts/',
        'watch': 'src/scripts/**/*.js',
    },
};

const styles = function () {
    const plugins = [
        autoprefixer(),
        cssdeclarationsorter(),
        cssnano(),
    ];

    return gulp.src(
        paths.styles.src,
        {
            'base': paths.styles.base,
        }
    ).
        pipe(sass().on(
            'error',
            sass.logError
        )).
        pipe(postcss(plugins)).
        pipe(rename({
            'basename': 'styles',
            'suffix': '.min',
        })).
        pipe(gulp.dest(paths.styles.dest));
};

const scripts = function () {
    return gulp.src(
        paths.scripts.src,
        {
            'base': paths.scripts.base,
        }
    ).
        pipe(babel()).
        pipe(uglify()).
        pipe(rename({
            'suffix': '.min',
        })).
        pipe(gulp.dest(paths.scripts.dest));
};

const watch = function () {
    gulp.watch(
        paths.scripts.watch,
        scripts
    );
    gulp.watch(
        paths.styles.watch,
        styles
    );
};

const build = gulp.parallel(
    styles,
    scripts,
    gulp.series(watch)
);

exports.default = build;

#javascript

last working day of the month

function isLastWorkingDay(gdt) {
	var today = gdt.getDayOfWeekLocalTime();
	var thisMonth = gdt.getMonthLocalTime();
	switch (today) {
			// Saturday and Sunday are NOT the last working day of the month

		case 6:
		case 7:
			return false;
			break;
			// If it's a Friday, add 3 and see if the month changes.
		case 5:
			var nextMonday = gdt;
			nextMonday.addDaysLocalTime(3);
			var nextMondayMonth = nextMonday.getMonthLocalTime();
			return (nextMondayMonth != thisMonth);
			break;
			// If it's a Mon-Thu add one and see if the month changes
		default:
			var nextDay = gdt;
			nextDay.addDaysLocalTime(1);
			var nextDayMonth = nextDay.getMonthLocalTime();
			return (nextDayMonth != thisMonth);
			break;
	}

}

var now = new GlideDateTime();
var lwd = isLastWorkingDay(now);
answer = lwd;
answer;

#jquery #javascript

on change, selected option

  $('.upsell-variants').on('change', function() {
    var optionSelected = $("option:selected", this);
    var main_img = $(optionSelected).data("src");
    $('.product__upsell-image img').attr('src', main_img);
  });

#jquery #javascript

Pass value to URL string and open in a new tab

// Functionality to pass along URI to location search feature subdomain
if (document.querySelector('#locations-search-wrapper')) {
  // Location Search Feature
  $('#locations-search-wrapper ._button').click(function(e){
    e.preventDefault();
    var loc_input = $('#locations-search-wrapper .styled-input').val();
    // Change domain and parameter ='s below.
    window.open('https://newsite-editme.com/?q=' + loc_input.toLowerCase(), '_blank');
  })
}

#javascript

Sort array by value

const myData = [].concat(this.state.data)
    .sort((a, b) => a.common.name > b.common.name ? 1 : -1)
    .map((item, i) => 
        <div key={i}> {item.matchID} {item.timeM}{item.description}</div>
    );

#javascript

javascript - Sort an array of objects in React and render them - Stack Overflow

https://stackoverflow.com/questions/43572436/sort-an-array-of-objects-in-react-and-render-them

#javascript

show post message

//Replace the closeSelf() function in iframe page to the following

function closeSelf() {
   parent.window.postMessage("removetheiframe", "*");
}

//and on the parent page, add the following code to listen when the iframe sends a message :

function receiveMessage(event){
   if (event.data=="removetheiframe"){
      var element = document.getElementById('iframe-element');
      element.parentNode.removeChild(element);
   }
}
window.addEventListener("message", receiveMessage, false);

#javascript

Bottom Up Fibonacci (JS)

const bottomUpFib = function(n) {
  if (n < 2) return n
  
  const cache = [0,1]
  
  for (let i=2; i<= n; i++) {
    cache[i] = cache[i-1] + cache[i-2]
    console.log(`Iteration ${i} ---> \n
                Cache ${cache}\n`)
  }
return cache[n]
}

console.log(bottomUpFib(5))

//If you go to a more complicated problem, you might need to build a 2d array or matrix and you need to find the solution. Each index in the array, corresponds to a solution to a sub-fib problem. You are creating a lookup table. This is what makes dynamic programming so cool

#jquery #javascript

Click outside element to close (modals / popups / menus)

$(document).on('click', function(e) {
  // Elements you don't want to remove the class name with...
  if($(e.target).is('.element-name, .element-open-toggle') === false) {
    // If anything outside of those is clicked, remove the active class to hide the popup.
    $('body').removeClass('class-name');
  }
})

#javascript #regex #email

[JS] E-Mail Regex

const validateEmail = email => {
    const regex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return regex.test(String(email).toLowerCase());
  }

#javascript #iterator

Iteraciones - "Grammarly" | JavaScript

let story = 'Last weekend, I took literally the most beautiful bike ride of my life. The route is called "The 9W to Nyack" and it actually stretches all the way from Riverside Park in Manhattan to South Nyack, New Jersey. It\'s really an adventure from beginning to end! It is a 48 mile loop and it basically took me an entire day. I stopped at Riverbank State Park to take some extremely artsy photos. It was a short stop, though, because I had a really long way left to go. After a quick photo op at the very popular Little Red Lighthouse, I began my trek across the George Washington Bridge into New Jersey.  The GW is actually very long - 4,760 feet! I was already very tired by the time I got to the other side.  An hour later, I reached Greenbrook Nature Sanctuary, an extremely beautiful park along the coast of the Hudson.  Something that was very surprising to me was that near the end of the route you actually cross back into New York! At this point, you are very close to the end.';

let overusedWords = ['really', 'very', 'basically'];

let unnecessaryWords = ['extremely', 'literally', 'actually' ];

let storyWords = story.split(' ');
//console.log('Amount of words: ' + story.length);

let betterWords = storyWords.filter(function(word) {
  return !unnecessaryWords.includes(word) //si no tuviera el '!', incluiría todas las palabras de ese arreglo.
}); 

// console.log(betterWords.join(' '));

let reallyCount = 0;
let veryCount = 0;
let basicallyCount = 0;

for (word of storyWords) {
  if (word === "really") {
    reallyCount += 1;
  } else if (word === "very") {
    veryCount += 1;
  } else if (word === "basically") {
    basicallyCount += 1;
  }
};

let sentencesCount = 0;

for (word of storyWords) {
  if (word[word.length - 1] === '.' || word[word.length - 1] === '!') {
    sentencesCount += 1;
  }
};

console.log('Word count: ' + storyWords.length);
console.log('How many sentences: ' + sentencesCount);
console.log('Really count: ', reallyCount);
console.log('Very count: ', veryCount);
console.log('Basically count: ', basicallyCount);

console.log(betterWords.join(' '));

#javascript #array

Métodos de arreglos - Array Methods | Ejercicio

let secretMessage = ['Learning', 'is', 'not', 'about', 'what', 'you', 'get', 'easily', 'the', 'first', 'time,', 'it', 'is', 'about', 'what', 'you', 'can', 'figure', 'out.', '-2015,', 'Chris', 'Pine,', 'Learn', 'JavaScript'];

secretMessage.pop();

// console.log(secretMessage.length);

secretMessage.push('to', 'Program.');

secretMessage[7] = 'right';

// console.log(secretMessage);

secretMessage.shift();

secretMessage.unshift('Programming');

secretMessage.splice(6, 5, 'know');

// console.log(secretMessage);

console.log(secretMessage.join(' '));

#javascript #spread #object #oop

Deep copy object using spread operator

const person = {
  name: 'Sam',
  age: 300,
}

const twinPerson = {
  ...person
}

#javascript

Get a CSS value with JavaScript

var element = document.getElementById('image_1'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');

#javascript #controlflow #if...else #if #else #switch...case #switch #case

Control flow / Control de flujo (if...else/switch...case)

let userName = '';
/* Con nombre o sin nombre */
userName ? console.log(`Hello, ${userName}!`) : console.log('Hello!');
/* Se guarda la pregunta */
let userQuestion = 'Is this true?';
/* Se muestra la pregunta */
console.log(`Hey ${userName}! You just asked this: ${userQuestion}`);
/* Se genera un número aleatorio entre 0-8 */
randomNumber = Math.floor(Math.random() * 8);
/* Se guarda la respuesta en una variable */
let eightBall = '';
/* Se guardan distintas respuestas para el número que toque */
// takes in randomNumber, then eightBall = 'Reply'
// you can use if/else or switch;
// If the randomNumber is 0, then save an answer to the eightBall variable; if randomNumber is 1, then save the next answer, and so on.
/* Se utiliza switch */
/*
switch (randomNumber) {
  case 0:
    eightBall = 'It is certain';
    break;
  case 1:
    eightBall = 'It is decidedly so';
    break;
  case 3:
    eightBall = 'Reply hazy try again';
    break;
  case 4:
    eightBall = 'Cannot predict now';
    break;
  case 5:
    eightBall = 'My sources say no';
    break;
  case 6:
    eightBall = 'Outlook not so good';
    break;
  case 7:
    eightBall = 'Signs point to yes';
    break;
}
*/
/* Se utiliza if */
if (randomNumber === 0) {
  eightBall = 'It is certain';
} 
if (randomNumber === 1) {
  eightBall = 'It is decidedly so';
}
if (randomNumber === 2) {
  eightBall = 'Reply hazy try again';
}
if (randomNumber === 3) {
  eightBall = 'Cannot predict now';
}
if (randomNumber === 4) {
  eightBall = 'Do not count on it';
}
if (randomNumber === 5) {
  eightBall = 'My sources say no';
}
if (randomNumber === 6) {
  eightBall = 'Outlook not so good';
}
if (randomNumber === 7) {
  eightBall = 'Signs point to yes';
}
/* Se muestra */
console.log(eightBall);

#javascript #angularjs

j.AngularJs.CalendarPopupWithInlineMaxDate

 <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2022-06-22'" datepicker-options="dateOptions" ng-required="true" close-text="Close"
          />

#javascript

jQuery in Wordpress DIVI

jQuery( document ).ready(function() {
 
    // Add jQuery code here to be loaded once the DOM is ready
 
});

#javascript

POST route with validation error handling

app.post("/properties", async (req, res, next) => {
  try {
    const { body } = req;
    const property = new PropertyModel(body);
    await property.save();
    return res.status(201).send(formatProperty(property));
  } catch (error) {
    if (error.name === "ValidationError") {
      error.status = 400;
    }
    next(error);
  }
});

#javascript

Redondear | .floor - convertir

/* The forecast today is 293 Kelvin */
const kelvin = 300;
/* We convert Kelvin to Celsius; */
/* Celsius is 273 degrees less than Kelvin */
const celsius = kelvin - 273;
/* We convert Celsius to Fahrenheit using a equation */
let fahrenheit = celsius * (9/5) + 32
/* .floor() method from the built-in Math object to round down the Fahrenheit temperature */
fahrenheit = Math.floor(fahrenheit);

let newtonscale = celsius * (33/100);

newtonscale = Math.floor(newtonscale);

console.log(`The temperature is ${fahrenheit} degrees Fahrenheit.`);

console.log(`The temperature Newton is ${newtonscale} degrees.`);

#undefined #javascript

According to user min and max range generating random number

function randomRange(myMin, myMax) {
  // Only change code below this line
  return Math.floor(Math.random()* (myMax - myMin+1)+myMin);
  // Only change code above this line
}

#undefined #javascript

Generating random number from particular given range

var k = 0;
 console.log(Math.floor(Math.random()*10))

#javascript #react

React form with API POST request and redirect

import { useState } from "react";
import { useHistory } from "react-router-dom";

const Create = () => {
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const [author, setAuthor] = useState("mario");
  const [isLoading, setIsLoading] = useState(false);
  const history = useHistory();

  const handleSubmit = (e) => {
    e.preventDefault();
    const blog = { title, body, author };

    fetch("http://localhost:8000/blogs", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(blog),
    }).then(() => {
      setIsLoading(false);
      history.push("/");
    });
  };

  return (
    <div className="create">
      <h2>Add a New Blog</h2>
      <form onSubmit={handleSubmit}>
        <label>Blog title:</label>
        <input
          type="text"
          required
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <label>Blog body:</label>
        <textarea
          required
          value={body}
          onChange={(e) => setBody(e.target.value)}
        ></textarea>
        <label>Blog author:</label>
        <select value={author} onChange={(e) => setAuthor(e.target.value)}>
          <option value="mario">mario</option>
          <option value="yoshi">mario</option>
        </select>
        {!isLoading && <button>Add Blog</button>}
        {isLoading && <button disabled>Adding blog...</button>}
      </form>
    </div>
  );
};

export default Create;

#javascript

Coding Challenge #3: Modeling a Circle

ar circle = {
	radius: 10,
  circumference(){
    var Circum = 2 * Math.PI * this.radius;
		return Circum.toFixed(2); // For Precision to 2 decimal point
  },
	area(){
		var Area = Math.PI * (this.radius ** 2);
  	return Area.toFixed(2); // For Precision to 2 decimal point
	}
};

#javascript #react

React dropdown form

const Form = () => {
  const [value, setValue] = useState("grapefruit");
  
  const handleChange = (event) => {
    setValue(event.target.value);
  }
  
   return (
  <form onSubmit={handleSubmit}>
    <label>
    Fav fruit
    	<select value={value} onChange={handleChange}>
          <option value="grapefruit">Grapefruit</option>
  		  <option value="apple">Apple</option>
  		</select>
  	</label>
  </form>
  )
 }

#javascript #react

Basic react form

const App = () => {
  const [title, setTitle] = useState("default input");

  const handleSubmit = (event) => {
    event.preventDefault();

    const body = {
      title: title,
    };
    console.log(title);
  };

  return (
    <div className="container">
      <form onSubmit={handleSubmit}>
        <label htmlFor="title">Title</label>
        <input
          type="text"
          required
          id="title"
          value={title}
          onChange={(event) => {
            const value = event.target.value;
            setTitle(value);
          }}
        />
        <button>Submit</button>
      </form>
    </div>
  );
};

#javascript #jquery #php #html

Ajax Filtering of Custom Post Types

// THE HTML/PHP

// Categories Nav START
<? $terms = get_terms( array(
    'taxonomy' => 'category-name', // <-- update this
    'orderby' => 'ID',
  )); 
  if ( $terms && !is_wp_error( $terms ) ){ ?>
   <ul class="CHANGEME-categories-nav">
      <? foreach( $terms as $term ) { ?>
        <li id="cat-<?php echo $term->term_id; ?>">
           <a href="#" class="<?= $term->slug; ?> ajax" data-term-number="<?= $term->term_id; ?>" title="<?= $term->name;?>"><?= $term->name; ?></a>
        </li>
      <? } ?>
   </ul>
<? } ?>
// Categories Nav END
                                       
// Results Container START
<div id="CHANGEME-results-container" class="CHANGEME-filter-result">
   <? // post query
     $query = new WP_Query( array(
        'post_type' => 'post-name', // <-- update this
        'posts_per_page' => -1,
      ) ); 
   if( $query->have_posts() ): while( $query->have_posts()): $query->the_post(); ?>
    
      // POST TEMPLATE HERE
    
   <? endwhile; endif; wp_reset_query(); ?>
</div>                      
// Results Container END

// The onpage JS for the page template
<script>
(function($) {
        'use strict';
        function cat_ajax_get(catID) {
            jQuery.ajax({
                type: 'POST',
                url: raindrop_localize.ajaxurl,
                data: {"action": "filter", cat: catID },
                success: function(response) {
                    jQuery("#CHANGEME-results-container").html(response);
                    return false;
                }
            });
        }
        $( ".CHANGEME-categories-nav a.ajax" ).click(function(e) {
            e.preventDefault();
            $("a.ajax").removeClass("current");
            $(this).addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
            var catnumber = $(this).attr('data-term-number');
            cat_ajax_get(catnumber);
        });

    })(jQuery);
</script>
                                       
// Callback function for functions.php or some other functions specific php file like theme.php
// Aside from the inital add actions and a few other things, the actual query and post template should be the same as what is on the page.
                                       
add_action( 'wp_ajax_nopriv_filter', 'CHANGEME_cat_posts' );
add_action( 'wp_ajax_filter', 'CHANGEME_cat_posts' );
                                       
function CHANGEME_cat_posts () {
    $cat_id = $_POST[ 'cat' ];
    $args = array (
	  'tax_query' => array(
		    array(
		      'taxonomy' => 'category-name', // <-- update this
		      'field' => 'term_id',
		      'terms' => array( $cat_id )
		    )
		  ),
	    'post_type' => 'post-name', // <-- update this
	    'posts_per_page' => -1,
	  );
	global $post;
    $posts = get_posts( $args );
    ob_start ();
    foreach ( $posts as $post ) { 
	    setup_postdata($post); ?>

	    // POST TEMPLATE HERE

   <?php } wp_reset_postdata();
   $response = ob_get_contents();
   ob_end_clean();
   echo $response;
   die(1);
}

#javascript

Two ways to solve a problem: Function declaration, and anonymous function

function cname(name){
const username = `${name}`;
return username;
}

fname = prompt(`Enter your first name ${name}`)
lname = prompt(`Enter your last name ${name}`)

console.log(`Hello ${fname} ${lname}`);

----------------------------------------------

// Say hello to the user
const sayHello = (firstName, lastName) => `Hello, ${firstName} ${lastName}!`;

// Alternative solution using a function declaration
/* function sayHello(firstName, lastName) {
  return `Hello, ${firstName} ${lastName}!`;
} */

const firstName = prompt("Enter your first name:");
const lastName = prompt("Enter your last name:");
console.log(sayHello(firstName, lastName));

#javascript

Associate records with all active maintenance plans

var plan = new GlideRecord('sm_maint_plan');
plan.addQuery('active', true);
plan.query();
while(plan.next()){
    new PlannedMaintenanceUtils().addPlan(plan);
}

#javascript

Another products list page with fetch

import "./Reservations.css";
import React, { useState, useEffect } from "react";
import { formatDate } from "../utils/formatDate";
import { Link } from "react-router-dom";

const ReservationList = () => {
  const [reservationList, setReservationList] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("http://localhost:5000/reservations");

      const data = await response.json();
      setReservationList(data);
      setIsLoading(false);
    };

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Loading...</p>;
  }

  return (
    <>
      <h1 className="upcoming-reservations">Upcoming reservations</h1>
      <ul className="reservation-list">
        {reservationList.map((reservation) => {
          return (
            <li key={reservation.id} className="reservation">
              <h2 className="name-grid-item">{reservation.restaurantName}</h2>
              <p className="date-grid-item">{formatDate(reservation.date)}</p>
              <Link
                to={`/reservations/${reservation.id}`}
                className="view-details"
              >
                View details &rarr;
              </Link>
            </li>
          );
        })}
      </ul>
    </>
  );
};

export default ReservationList;

#javascript

Single product page with fetch api and errors

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { formatDate } from "../utils/formatDate";
import "./Reservations.css";
import BackButton from "./BackButton";

const Reservation = () => {
  const { id } = useParams();
  const [reservation, setReservation] = useState({});
  const [isNotFound, setIsNotFound] = useState(false);
  const [isNotValid, setIsNotValid] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`http://localhost:5000/reservations/${id}`);

      if (response.status === 404) {
        setIsNotFound(true);
        return;
      }

      if (response.status === 400) {
        setIsNotValid(true);
        return;
      }

      const data = await response.json();
      setReservation(data);
      setIsLoading(false);
    };

    fetchData();
  }, [id]);

  if (isNotFound) {
    return (
      <>
        <p className="error">Sorry! We can't find that reservation.</p>
        <BackButton />
      </>
    );
  }

  if (isNotValid) {
    return (
      <>
        <p className="error">Sorry! The reservation ID is invalid.</p>
        <BackButton />
      </>
    );
  }

  if (isLoading) {
    return <p>Loading...</p>;
  }

  return (
    <>
      <div className="reservation">
        <h1 className="restaurant-name">{reservation.restaurantName}</h1>
        <p className="date">{formatDate(reservation.date)}</p>
        <p className="party-size">
          <strong>Party size: </strong>
          {reservation.partySize}
        </p>
      </div>
      <BackButton />
    </>
  );
};

export default Reservation;

#javascript

Header

import "./Header.css";
import { Link } from "react-router-dom";
import Logo from "../logo.png";

const Header = () => {
  return (
    <header className="header">
      <Link to="/" className="header-title">
        <img src={Logo} alt="" width="300" />
      </Link>
    </header>
  );
};

export default Header;

#javascript

Back button

import { Link } from "react-router-dom";

const BackButton = () => {
  return (
    <Link to="/" className="btn">
      &larr; Back to reservations
    </Link>
  );
};

export default BackButton;

#javascript

React app.js (Routers)

import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

import ProductListing from "./Pages/Product.js";
import ProductListings from "./Pages/ProductList.js";

function App() {
  return (
    <Router>
      <>
        <div className="container">
          <Switch>
            <Route path="/product/:id">
              <ProductListing />
            </Route>
            <Route path="/">
              <ProductListings />
            </Route>
          </Switch>
        </div>
      </>
    </Router>
  );
}

export default App;

#javascript

Main page

import React, { useState, useEffect } from "react";
import ProductList from "../components/ProductList";

const ProductListings = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("http://localhost:5000/products");
      const data = await response.json();
      setProducts(data);
    };
    fetchData();
  }, []);

  return (
    <>
      <h1>Comics for sale</h1>
      <ProductList products={products} />
    </>
  );
};

export default ProductListings;

#javascript

Product page

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import Product from "../components/Product";
import { Link } from "react-router-dom";

const ProductListing = () => {
  const { id } = useParams();
  const [product, setProduct] = useState({});
  const [isLoading, setIsLoading] = useState(true);
  const [isNotFound, setIsNotFound] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`http://localhost:5000/products/${id}`);

      if (response.status === 404) {
        setIsNotFound(true);
        setIsLoading(false);
        return;
      }

      const data = await response.json();
      setProduct(data);
      setIsLoading(false);
    };

    fetchData();
  }, [id]);

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (isNotFound) {
    return (
      <>
        <p className="error">Sorry! We can't find that product</p>
        <Link to="/" className="btn">
          &larr; Back to listings
        </Link>
      </>
    );
  }

  return (
    <>
      <Product
        title={product.title}
        isbn={product.isbn}
        rating={product.rating}
        img={product.img}
        price={product.price}
        description={product.description}
        id={product.id}
        headingLevel="h1"
      />
      <Link to="/" className="btn">
        &larr; Back to listings
      </Link>
    </>
  );
};

export default ProductListing;

#javascript

List of products component

import Product from "./Product";

const ProductList = ({ products }) => {
  return (
    <ul className="product-list">
      {products.map((product) => {
        return (
          <li key={product.id} className="property-list-item">
            <Product
              img={product.img}
              title={product.title}
              description={product.description}
              price={product.price}
              rating={product.rating}
              linkToProduct={product.id}
              headingLevel="h2"
            />
          </li>
        );
      })}
    </ul>
  );
};

export default ProductList;

#javascript

Single product component

const Product = ({ title, img, description, price, rating }) => {
  return (
    <li className="product-grid-item">
      <img className="product-img" src={img} alt={title} />
      <div className="product-text">
        <h3 className="product-title">{title}</h3>
        <p className="product-description">{description}</p>
        <p className="price">{price}</p>
        <p className="rating">{rating}</p>
      </div>
    </li>
  );
};

export default Product;

#javascript

Test react/fetch app

import { render, screen } from "@testing-library/react";
import properties from "./properties.json";
import App from "../App";

beforeAll(() => jest.spyOn(window, "fetch"));

test("displays all the properties and their information", async () => {
  window.fetch.mockResolvedValueOnce({
    ok: true,
    json: async () => properties,
  });

  render(<App />);

  expect.assertions(properties.length * 5);

  for (const property of properties) {
    const title = await screen.findByText(property.title);
    expect(title).toBeInTheDocument();
    const askingPrice = await screen.findByText(property.askingPrice);
    expect(askingPrice).toBeInTheDocument();
    const description = await screen.findByText(property.description);
    expect(description).toBeInTheDocument();
    const address = await screen.findByText(property.address);
    expect(address).toBeInTheDocument();
    const img = document.querySelector(`img[src="${property.img}"]`);
    expect(img).toBeInTheDocument();
  }
});

#javascript

React/Fetch - useState and useEffect to set product list on page load

import React, { useEffect, useState } from "react";
import "./App.css";
import Header from "./components/Header/Header";

const App = () => {
  const [properties, setProperties] = useState([]);

  const fetchData = async () => {
    const response = await fetch("http://localhost:5000/properties");
    const data = await response.json();
    setProperties(data);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <>
      <Header />
      <div className="container">
        <h1>Properties for sale</h1>
        {properties.map((property) => {
          return (
            <li key={property.id}>
              <img src={property.img} alt={property.address} />
              <div class="text">
                <h2 class="title">{property.title}</h2>
                <p class="address">{property.address}</p>
                <p class="price">{property.askingPrice}</p>
                <p class="description">{property.description}</p>
              </div>
            </li>
          );
        })}
      </div>
    </>
  );
};

export default App;

#javascript

docker-compose.yaml

version: "3"
services:
  db:
    image: mongo
    expose:
      - "27017"
    volumes:
      - mongodb_data_container:/data/db
    ports:
      - "27017:27017"
volumes:
  mongodb_data_container:

#javascript

Basic server

const port = process.env.PORT || 5000;
const app = require("./app");
const mongoose = require("mongoose");

mongoose.connect("mongodb://localhost:27017/mongo");

app.listen(port, () => {
  console.log(`API server started at http://localhost:${port}`);
});

#javascript

Mongoose schema and formatting

const mongoose = require("mongoose");
const { Schema } = mongoose;

const propertySchema = new Schema(
  {
    askingPrice: { type: String, required: true },
    description: { type: String, required: true },
    address: { type: String, required: true },
    title: { type: String, required: true },
    img: { type: String, required: true },
  },
  {
    toJSON: {
      transform(doc, ret) {
        ret.id = ret._id;
        delete ret._id;
        delete ret.__v;
      },
    },
  }
);

const Property = mongoose.model("Property", propertySchema);
module.exports = Property;

#javascript

Validate mongo ID

const mongoose = require("mongoose");

const validId = (id) => {
  return mongoose.Types.ObjectId.isValid(id);
};

module.exports = validId;

#javascript

Basic express get and post

const express = require("express");
const app = express();
const PropertyModel = require("./models/PropertyModel");
const validId = require("./validId");

app.use(express.json());

app.get("/properties", async (req, res) => {
  const properties = await PropertyModel.find({});
  return res.status(200).send(properties);
});

app.get("/properties/:id", async (req, res) => {
  const propertyId = req.params.id;
  if (validId(propertyId)) {
    const property = await PropertyModel.findById(propertyId);
    if (property) {
      return res.status(200).send(property);
    } else {
      return res.status(404).send({ message: "id not found" });
    }
  }
  return res.status(400).send({ message: "id provided is invalid" });
});

app.post("/properties", async (req, res) => {
  const { body } = req;
  const property = new PropertyModel(body);
  await property.save();

  return res.status(200).send(property);
});

module.exports = app;

#javascript

Express integration tests

const request = require("supertest");
const app = require("./app");

describe("app.get", () => {
  test("get /properties should return the list of properties and 200 status", async () => {
    const response = await request(app).get("/properties");

    expect(response.statusCode).toBe(200);
    expect(response.body).toEqual(
      expect.arrayContaining([
        expect.objectContaining({
          askingPrice: expect.any(String),
          description: expect.any(String),
          address: expect.any(String),
          title: expect.any(String),
          img: expect.any(String),
          id: expect.any(String),
        }),
      ])
    );
  });

  test("get /properties/:id should return a single property and 200 status", async () => {
    const response = await request(app).get(
      "/properties/61480db44ab0cf7175467757"
    );

    expect(response.statusCode).toBe(200);
    expect(response.body).toEqual(
      expect.objectContaining({
        askingPrice: expect.any(String),
        description: expect.any(String),
        address: expect.any(String),
        title: expect.any(String),
        img: expect.any(String),
        id: expect.any(String),
      })
    );
  });

  test("get /properties/invalid-id should return a 400 status and custom message", async () => {
    const response = await request(app).get("/properties/invalid-id");

    expect(response.statusCode).toBe(400);
    expect(response.body).toEqual({ message: "id provided is invalid" });
  });

  test("get /properties/valid-but-not-found-id should return a 404 status and custom message", async () => {
    const response = await request(app).get(
      "/properties/61480db44ab0cf7175467717"
    );

    expect(response.statusCode).toBe(404);
    expect(response.body).toEqual({ message: "id not found" });
  });
});

describe("app.post", () => {
  test("post /properties should create a new property", async () => {
    const body = {
      askingPrice: "$1",
      description: "house",
      address: "1 house street",
      title: "cool house",
      img: "https://placeimg.com/642/482/arch",
    };
    const response = await request(app).post("/properties").send(body);

    expect(response.statusCode).toBe(200);
    expect(response.body).toEqual(
      expect.objectContaining({ ...body, id: expect.any(String) })
    );
  });
});

#javascript

Fetch requests

// Get a single resource
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json())
  .then((json) => console.log(json));

// Get a list of all resources
fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
  .then((json) => console.log(json))

// Create a resource
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

// Create a resource (using a variable as the request body)
const requestBody = {
  title: 'foo',
  body: 'bar',
  userId: 1,
};
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify(requestBody),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

// Create a resource (using a variable for options)
const fetchOptions = {
  method: 'POST',
    body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
};

fetch('https://jsonplaceholder.typicode.com/posts', fetchOptions)
  .then((response) => response.json())
  .then((json) => console.log(json))

#javascript

Write a program that asks the user for a number, then shows the multiplication table for this number. Excepts numbers between 2 - 9

let number = 0;
while(number <2 || number >9){
  number = Number(prompt("Enter a number between 2 and 9"))
}
for(i = 1; i <= 10; i++){
    result = (number * i)
console.log(`${number} x ${i} = ${result}`);
}

#javascript

reactjs - React Hook : Send data from child to parent component - Stack Overflow

const { useState } = React;

function PageComponent() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1)
  }

  return (
    <div className="App">
      <ChildComponent onClick={increment} count={count} />         
      <h2>count {count}</h2>
      (count should be updated from child)
    </div>
  );
}

const ChildComponent = ({ onClick, count }) => {
  return (
    <button onClick={onClick}>
       Click me {count}
    </button>
  )
};

ReactDOM.render(<PageComponent />, document.getElementById("root"));

#javascript

Number of turns entered by user

let number = Number(prompt("Enter Number Of Turns: "))
let turns = 1;

while(turns <= number){
    console.log(`Turn number: ${turns}`)
      ++turns;
}

#javascript

Write a program that asks for a time under the form of three information (hours, minutes, seconds). The program calculates and shows the time one second after. Incorrect inputs must be taken into account.

let hour = Number(prompt("Enter the hour: "))
let minutes = Number(prompt("Enter the minutes: "))
let seconds = Number(prompt("Enter the seconds: "))

if (
hour >= 0 &&
hour <= 23 &&
minutes >= 0 &&
minutes <= 59 &&
seconds >=0 &&
seconds <= 59
){
seconds++
if (seconds === 60){
seconds = 0;
minutes++
if (minutes === 60){
minutes = 0;
hour++
if (hour === 24){
hour = 0;
}
}
}
console.log (`In a second the time will be ${hour}: ${minutes} : ${seconds}`);
}
else {
console.log("Enter correct information");
}

#javascript

Switch statement / number of days

const month = prompt("Enter month number :");

switch (month){
case "1": console.log("Number of days: 31")
break;
case "2": console.log("Number of days: 28")
break;
case "3": console.log("Number of days: 31")
break;
case "4": console.log("Number of days: 30")
break;
case "5": console.log("Number of days: 31")
break;
case "6": console.log("Number of days: 30")
break;
case "7": console.log("Number of days: 31")
break;
case "8": console.log("Number of days: 31")
break;
case "9": console.log("Number of days: 30")
break;
case "10": console.log("Number of days: 31")
break;
case "11": console.log("Number of days: 30")
break;
case "12": console.log("Number of days: 31")
break;
default:
console.log("Incorrect month entered, enter numbers from 1 - 12")
}

#javascript

Compare with if else

let number1 = prompt("Enter first number: ");
let number2 = prompt("Enter Second number: ");

if (number1 > number2){
console.log(`${number1} is greater than ${number2}`)
}
else if (number1 < number2)
{
console.log(`${number1} is smaller than ${number2}`)
}
else
{
console.log("Incorrect number")
}

#javascript

If else

const day = promp("What day is it today?");
if (day === Monday){ console.log(`today is ${day}, tomorrow is Tuesday`)
}else if (day === Tuesday) {console.log(`today is ${day}, tomorrow is Wednesday`)}
else if (day === wednesday) {console.log(`today is ${day}, tomorrow is Thursday`)}
else if (day === thursday) {console.log(`today is ${day}, tomorrow is Friday`)}
else if (day === Friday) {console.log(`today is ${day}, tomorrow is Saturday`)}
else if (day === Saturday) {console.log(`today is ${day}, tomorrow is Sunday`)}
else if (day === Sunday) {console.log(`today is ${day}, tomorrow is Monday`)}
else 
{console.log ("Incorect day entered, try again.")}

#javascript #factoryfunctions

Factory Functions <3

const robotFactory = (model, mobile) => {
  return {
    model: model,
    mobile: mobile,
    beep() {
      console.log('Beep Boop');
    }
  }
};

const tinCan = robotFactory('P-500', true);

tinCan.beep();

#javascript #objects #advancedobjects #setters #if

Chequear si... Y si...

const robot = {
  _model: '1E78V2',
  _energyLevel: 100,
  _numOfSensors: 15,
  get numOfSensors(){
    if(typeof this._numOfSensors === 'number'){
      return this._numOfSensors;
    } else {
      return 'Sensors are currently down.'
    }
  },
  set numOfSensors(num) {
    if (typeof num === 'number' && num >= 0){
      this._numOfSensors = num;
    } else {
      console.log('Pass in a number that is greater than or equal to 0')
    }   
  } 
};

robot.numOfSensors = 100;
console.log(robot.numOfSensors);

#javascript #objects #getters #advancedobjects

ADVANCED OBJECTS: Getters

const robot = {
  _model: '1E78V2',
  _energyLevel: 100,
  get energyLevel() {
    if (typeof this._energyLevel === 'number') {
      return `My current energy level is ${this._energyLevel}`
    } else {
      return 'System malfunction: cannot retrieve energy level'
    }
  }
};

console.log(robot.energyLevel)

#javascript #objects

Looping Through Objects

let spaceship = {
    crew: {
    captain: { 
        name: 'Lily', 
        degree: 'Computer Engineering', 
        cheerTeam() { console.log('You got this!') } 
        },
    'chief officer': { 
        name: 'Dan', 
        degree: 'Aerospace Engineering', 
        agree() { console.log('I agree, captain!') } 
        },
    medic: { 
        name: 'Clementine', 
        degree: 'Physics', 
        announce() { console.log(`Jets on!`) } },
    translator: {
        name: 'Shauna', 
        degree: 'Conservation Science', 
        powerFuel() { console.log('The tank is full!') } 
        }
    }
}; 

// Write your code below

for (let crewMember in spaceship.crew) {
  console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`)
};

for (let crewMember in spaceship.crew) {
  console.log(`${spaceship.crew[crewMember].name}: ${spaceship.crew[crewMember].degree}`)
};

#javascript #objects

Nested Objects

let spaceship = {
  passengers: null,
  telescope: {
    yearBuilt: 2018,
    model: "91031-XLT",
    focalLength: 2032 
  },
  crew: {
    captain: { 
      name: 'Sandra', 
      degree: 'Computer Engineering', 
      encourageTeam() { console.log('We got this!') },
     'favorite foods': ['cookies', 'cakes', 'candy', 'spinach'] }
  },
  engine: {
    model: "Nimbus2000"
  },
  nanoelectronics: {
    computer: {
      terabytes: 100,
      monitors: "HD"
    },
    'back-up': {
      battery: "Lithium",
      terabytes: 50
    }
  }
}; 

let capFave = spaceship.crew.captain['favorite foods'][0]

spaceship.passengers = [{name: 'Space Dog'}]

let firstPassenger = spaceship.passengers[0]

#javascript

ITERATORS: The .reduce() Method

const newNumbers = [1, 3, 5, 7];

const newSum = newNumbers.reduce((accumulator, currentValue) => {
  console.log('The value of accumulator: ', accumulator);
  console.log('The value of currentValue: ', currentValue);
  return accumulator + currentValue
}, 10);

// es como: .reduce(A, B) | .reduce(A:(a)=>{}, B)

console.log(newSum);

#javascript #method

Find the index of the first animal that starts with the letter 's'.

const animals = ['hippo', 'tiger', 'lion', 'seal', 'cheetah', 'monkey', 'salamander', 'elephant'];

const startsWithS = animals.findIndex(animal => {
  return animal[0] === 's' ? true : false;
});

console.log(startsWithS);

#javascript #method

The .filter() Method (iterators)

const randomNumbers = [375, 200, 3.14, 7, 13, 852];

// Call .filter() on randomNumbers below
const smallNumbers = randomNumbers.filter(numbers => {
  return numbers < 250;
});

console.log(smallNumbers);

const favoriteWords = ['nostalgia', 'hyperbole', 'fervent', 'esoteric', 'serene'];


// Call .filter() on favoriteWords below
const longFavoriteWords = favoriteWords.filter(words => {
  return words.length > 7;
});

console.log(longFavoriteWords);

#javascript #method

The .forEach() Method (Iterators)

// Primera forma

const groceries = ['brown sugar', 'salt', 'cranberries', 'walnuts'];

groceries.forEach(function(groceryItem){
  console.log(' - ' + groceryItem);
});

// Segunda forma

groceries.forEach(groceryItem => console.log(groceryItem));

// Tercera forma

function printGrocery(element){
  console.log(element);
}
 
groceries.forEach(printGrocery);

#javascript

HIGHER-ORDER FUNCTIONS: Functions as Parameters

const checkThatTwoPlusTwoEqualsFourAMillionTimes = () => {
  for(let i = 1; i <= 1000000; i++) {
    if ( (2 + 2) != 4) {
      console.log('Something has gone very wrong :( ');
    }
  }
};

const addTwo = num => num + 2;

const timeFuncRuntime = funcParameter => {
  let t1 = Date.now();
  funcParameter();
  let t2 = Date.now();
  return t2 - t1;
};

// Write your code below

const time2p2 = timeFuncRuntime(checkThatTwoPlusTwoEqualsFourAMillionTimes);

const checkConsistentOutput = (func, val) => {
    let firstTry = func(val);
    let secondTry = func(val);
    if (firstTry === secondTry) {
        return firstTry
    } else {
        return 'This function returned inconsistent results'
    }
};

console.log(checkConsistentOutput(addTwo, 10));

#javascript

variable: result of invoking the n1 function with the n2 function.

const checkThatTwoPlusTwoEqualsFourAMillionTimes = () => {
  for(let i = 1; i <= 1000000; i++) {
    if ( (2 + 2) != 4) {
      console.log('Something has gone very wrong :( ');
    }
  }
};

const addTwo = num => num + 2;

const timeFuncRuntime = funcParameter => {
  let t1 = Date.now();
  funcParameter();
  let t2 = Date.now();
  return t2 - t1;
};

// Write your code below

const VARIABLE = N1(N2);

#javascript

javascript - Validation of file extension before uploading file - Stack Overflow

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oInput = arrInputs[i];
        if (oInput.type == "file") {
            var sFileName = oInput.value;
            if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFileExtensions.length; j++) {
                    var sCurExtension = _validFileExtensions[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }
                
                if (!blnValid) {
                    alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                    return false;
                }
            }
        }
    }
  
    return true;
}

#javascript

How to format a JavaScript date - Stack Overflow

var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var today  = new Date();

console.log(today.toLocaleDateString("en-US")); // 9/17/2016
console.log(today.toLocaleDateString("en-US", options)); // Saturday, September 17, 2016
console.log(today.toLocaleDateString("hi-IN", options)); // शनिवार, 17 सितंबर 2016

#javascript

Change Web URL Without Reload

document.querySelectorAll("a").forEach(item => {
    item.addEventListener("click", e => {
        e.preventDefault();
        if(history.pushState) {
            history.pushState(null, null, e.target.href);
        }
        return false;
    });
});

#javascript

HOHR - Scheduled job - add mra records for new powerhouse

var powerHouse = new GlideRecord('sys_choice');
//Daily check
powerHouse.addEncodedQuery('name=core_company^element=u_powerhouse^language=en^sys_created_onONToday@javascript:gs.beginningOfToday()@javascript:gs.endOfToday()');
powerHouse.query();
while(powerHouse.next()){
    var mra = new GlideRecord('u_mra');
	var gr = new GlideRecord('u_mra_config');
	gr.addQuery('install_status','!=', '7');
	gr.query();
	while(gr.next()){
		mra.initialize();
		mra.u_software = gr.sys_id;
		mra.u_powerhouse = powerHouse.value;
		mra.u_active = false;
		mra.insert();
	}

}

#css #javascript

DARKJS SCRIPT BT1

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
<script>
  // Add dark mode classes and elements' classes
  // newDarkClass - a name of a class with dark mode attributes 
  // defaultClass - a class of an element a new class will be added to
  var darkClasses = [

    { newDarkClass: 'bodyDark', defaultClass: 'body' },
    { newDarkClass: 'h2_dark', defaultClass: 'h2' },

  ];
	
  // Listening to a switch and running a function on click
  document.getElementById("switch").addEventListener("click", darkSwitch);

  // checking if cookie exists
  var cookieState = Cookies.get('darkMode');

  // First visit - cookieState is undefined
  // If cookie exists we are parsing it to get a boolean
  if (cookieState === undefined) {
    var isDarkmodeEnabled = false;
  } else {
    var isDarkmodeEnabled = JSON.parse(cookieState)
  };

  // Cookie doesn't exist: darkMode = false 
  // Cookie exists: darkMode = true/false
  var darkMode = isDarkmodeEnabled;

  // Adding classes on page load if darkmode is enabled
  window.onload = addClassesOnLoad();

  // Changing darkMode state and adding or removing classes
  function darkSwitch() {

    // Setting darkMode to its opposite value
    darkMode = !darkMode;

    if (darkMode === true) {
      // Looping through an array and deleting classes
      darkClasses.forEach(item => {
        var element = document.querySelectorAll(`.${item.defaultClass}`)
        element.forEach(h => h.classList.add(item.newDarkClass))
      });
    } else {
      // Looping through an array and deleting classes
      darkClasses.forEach(item => {
        var element = document.querySelectorAll(`.${item.defaultClass}`)
        element.forEach(h => h.classList.remove(item.newDarkClass))
      });
    };
    // Saving darkMode state to the cookie
    Cookies.set('darkMode', darkMode);
  }

  // Adding classes on page load if darkmode is enabled
  //
  function addClassesOnLoad() {

    if (darkMode === true) {

      // Changing switch state
      document.getElementById("switch").checked = true;


      darkClasses.forEach(item => {
        var element = document.querySelectorAll(`.${item.defaultClass}`)
        element.forEach(h => h.classList.add(item.newDarkClass))
      });
    };
  }

</script>

<style>

  /* DEFINE DARK MODE CLASSES HERE */

</style>

#javascript

reactjs - How to useState and useQuery in Apollo/GraphQL and React? - Stack Overflow

const Slider = () => {

const { data, loading, error } = useQuery(GET_LATEST_POSTS)


const [ currentMovie, setMovie ] = useState()

 useEffect(() => {
    if(!loading && data){
        setMovie(data);
    }
  }, [loading, data])

if (loading) return 'Loading...'               //your component's return should always be after all hook calls//
if (error) return `Error! ${error.message}`
}

#javascript

Image gallery - Sanity.io schema

export default {
  name: 'gallery',
  type: 'object',
  title: 'Gallery',
  fields: [
    {
      name: 'images',
      type: 'array',
      title: 'Images',
      of: [
        {
          name: 'image',
          type: 'image',
          title: 'Image',
          options: {
            hotspot: true,
          },
          fields: [
            {
              name: 'alt',
              type: 'string',
              title: 'Alternative text',
            },
          ],
        },
      ],
      options: {
        layout: 'grid',
      },
    },
    {
      name: 'display',
      type: 'string',
      title: 'Display as',
      description: 'How should we display these images?',
      options: {
        list: [
          { title: 'Stacked on top of eachother', value: 'stacked' },
          { title: 'In-line', value: 'inline' },
          { title: 'Carousel', value: 'carousel' },
        ],
        layout: 'radio', // <-- defaults to 'dropdown'
      },
    },
    {
      name: 'zoom',
      type: 'boolean',
      title: 'Zoom enabled',
      description: 'Should we enable zooming of images?',
    },
  ],
  preview: {
    select: {
      images: 'images',
      image: 'images.0',
    },
    prepare(selection) {
      const { images, image } = selection;

      return {
        title: `Gallery block of ${Object.keys(images).length} images`,
        subtitle: `Alt text: ${image.alt}`,
        media: image,
      };
    },
  },
};

#javascript

EmailUtils | Script Include | get last received email

getLastReceivedEmail: function(target) {
		var mail = new GlideRecord('sys_email');
		mail.addQuery('instance',target);
		mail.addQuery('type', 'received');
		mail.orderByDesc('sys_created_on');
		mail.setLimit('1');
		mail.query();
		if(mail.next()){
			return mail.sys_id;
		}
		else
			return;
	},

#javascript

Arrays and functions

const concept = ['arrays', 'can', 'be', 'mutated'];

function changeArr(arr){
  arr[3] = 'MUTATED';
}

changeArr(concept);

console.log(concept);

const removeElement = newArr => {
  newArr.pop()
};

removeElement(concept);

console.log(concept);

#javascript #method

Find the index of a particular element in groceryList using .indexOf().

const groceryList = ['orange juice', 'bananas', 'coffee beans', 'brown rice', 'pasta', 'coconut oil', 'plantains'];

const pastaIndex = groceryList.indexOf('pasta');

console.log(pastaIndex);

#javascript #method

More Array Methods

const groceryList = ['orange juice', 'bananas', 'coffee beans', 'brown rice', 'pasta', 'coconut oil', 'plantains'];

groceryList.shift();
console.log(groceryList);

groceryList.unshift('popcorn');
console.log(groceryList);

console.log(groceryList.slice(1,4));

console.log(groceryList);

#javascript #+ajex

javascript - jQuery Ajax POST example with PHP - Stack Overflow

// Variable to hold request
var request;

// Bind to the submit event of our form
$("#foo").submit(function(event){

    // Prevent default posting of form - put here to work in case of errors
    event.preventDefault();

    // Abort any pending request
    if (request) {
        request.abort();
    }
    // setup some local variables
    var $form = $(this);

    // Let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");

    // Serialize the data in the form
    var serializedData = $form.serialize();

    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    $inputs.prop("disabled", true);

    // Fire off the request to /form.php
    request = $.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData
    });

    // Callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        // Log a message to the console
        console.log("Hooray, it worked!");
    });

    // Callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // Log the error to the console
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });

    // Callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // Reenable the inputs
        $inputs.prop("disabled", false);
    });

});

#javascript

Return Function Exercise (JavaScript)

function monitorCount(rows, columns) {
  return rows * columns
}

const numOfMonitors = monitorCount(5, 4)

console.log(numOfMonitors);

#javascript

Fixed Positioning

// Replace this with a relevant selector.
// If you use a tool that auto-generates classes,
// you can temporarily add an ID and select it
// with '#id'.
const selector = '.the-fixed-child';
function findCulprits(elem) {
  if (!elem) {
    throw new Error(
      'Could not find element with that selector'
    );
  }
  let parent = elem.parentElement;
  while (parent) {
    const {
      transform,
      willChange
    } = getComputedStyle(parent);
    if (transform !== 'none' || willChange === 'transform') {
      console.warn(
        '🚨 Found a culprit! 🚨\n',
        parent,
        { transform, willChange }
      );
    }
    parent = parent.parentElement;
  }
}
findCulprits(document.querySelector(selector));

#javascript

Merge 2 Linked Lists (Ordered) In Place

function mergeLists(headone, headtwo) {
  if (headone === null || headtwo === null) {
    return headone === null ? headtwo : headone
  }

  let p1 = headone.val <= headtwo.val ? headone : headtwo
  let p2 = p1 === headone ? headtwo : headone
  const head = p1

  head.next = mergeLists(p1.next, p2)

  return head
}

#react.js #javascript

Array.prototype.filter() - JavaScript | MDN

// Arrow function
filter((element) => { ... } )
filter((element, index) => { ... } )
filter((element, index, array) => { ... } )

// Callback function
filter(callbackFn)
filter(callbackFn, thisArg)

// Inline callback function
filter(function callbackFn(element) { ... })
filter(function callbackFn(element, index) { ... })
filter(function callbackFn(element, index, array){ ... })
filter(function callbackFn(element, index, array) { ... }, thisArg)

#react.js #javascript

Filter Data

  handleFilter = key => {
    const selected = parseInt(key);
    if (selected === 3) {
      return this.setState({
        eventsData
      });
    }

    const statusMap = {
      1: "complete",
      2: "inProgress"
    };

    const selectedStatus = statusMap[selected];

    const filteredEvents = eventsData.filter(
      ({ status }) => status === selectedStatus
    );
    this.setState({
      eventsData: filteredEvents
    });
  };

#react.js #javascript

Search Filter

  handleSearch = searchText => {
    const filteredEvents = eventsData.filter(({ title }) => {
      title = title.toLowerCase();
      return title.includes(searchText);
    });

    this.setState({
      eventsData: filteredEvents
    });
  };

#javascript

j.NaturalSort

function NaturalSort (a, b) {
        var ax = [], bx = [];

        a.replace(/(\d+)|(\D+)/g, function (_, $1, $2) { ax.push([$1 || Infinity, $2 || ""]) });
        b.replace(/(\d+)|(\D+)/g, function (_, $1, $2) { bx.push([$1 || Infinity, $2 || ""]) });

        while (ax.length && bx.length) {
            var an = ax.shift();
            var bn = bx.shift();
            var nn = (an[0] - bn[0]) || an[1].localeCompare(bn[1]);
            if (nn) return nn;
        }

        return ax.length - bx.length;
    }

#javascript #angularjs

j.AngularJs.Basic

<!DOCTYPE html>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="_APPNAME_" ng-controller="_CONTROLLERNAME_">

	<h2>_APPNAME_</h2>

	
	<input type="text" ng-model="value" />
	

	<p>
		<button ng-click="save()">Save</button>
		<button ng-click="clear()">Clear</button>
	</p>

	<p>Saved Value: <span ng-bind="savedValueFunction()"></span></p>



	<script>
	var app = angular.module("_APPNAME_", []); 
	app.controller("_CONTROLLERNAME_", function($scope) {
		
		$scope.value = "";
		$scope.savedValue = "";
		
		$scope.savedValueFunction = function() {
			return $scope.savedValue;
		};
		$scope.clear = function() {
			$scope.value = "";
      $scope.savedValue="";
		};
		$scope.save = function() {
			alert("Saved");
      $scope.savedValue=$scope.value;
		};
	});
	</script>



</body>
</html>

#javascript

2021 JavaScript Cheatsheet | object array

let users = [
  {
    firstName: "Bradley",
    lastName: "Cooper",
  },
  {
    firstName: "Lady",
    lastName: "Gaga",
  },
];

users.forEach(function (user, index) {
  for (let prop in user) {
    alert(prop + " is " + user[prop]);
  }
});

#javascript

2021 JavaScript Cheatsheet | function parameters

function fullName(firstName, lastName) {
  alert(firstName + " " + lastName);
}

let firstName = prompt("What's your first name?");
let lastName = prompt("What's your last name?");
fullName(firstName, lastName);
fullName("Kate", "Robinson");

#javascript

2021 JavaScript Cheatsheet | functions

function sayFact() {
  let name = prompt("What's your name?");

  if (name === "Sofia") {
    alert("Your name comes from the Greek -> Sophia");
  }
}

sayFact();

#javascript

2021 JavaScript Cheatsheet | do while

let times = 0;
do {
  console.log(times);
  times = times + 1;
} while(times < 10)

#javascript

2021 JavaScript Cheatsheet | for each

let fruits = ['apples', 'oranges', 'bananas'];
fruits.forEach(function(fruit) {
  alert("I have " + fruit + " in my shopping bag");
});

#javascript

2021 JavaScript Cheatsheet | min( ) // min valor de una serie de numeros.

Math.min(2, 5, 1) // 1

#javascript

2021 JavaScript Cheatsheet | while() statement

let times = 0;
while (times < 10) {
  console.log(times);
  times = times + 1;
}

#javascript

2021 JavaScript Cheatsheet | array[] declaration

let myList = [];
let fruits = ["apples", "oranges", "bananas"];
myList = ['banana', 3, go, ['John', 'Doe'], {'firstName': 'John', 'lastName': 'Smith'}]

#javascript

2021 JavaScript Cheatsheet | AND operator

if (continent === "Europe" && language === "Portuguese") {
  alert("You are from Portugal 🇵🇹");
} else {
  alert("You are not from Portugal");
}

#javascript

2021 JavaScript Cheatsheet | OR statement

if (age < 18 || gender === "male") {
  alert("You can't join SheCodes 👩‍💻");
}

#javascript

2021 JavaScript Cheatsheet | trim method()

let city = " Montreal  "
city.trim() // "Montreal"
// The trim() method removes whitespace from both ends of a string.

#javascript

2021 JavaScript - != is not if

let country = prompt("What country are you from?");

if (country === "Portugal") {
  alert("You are cool");
}

if (country !== "Portugal") {
  alert("Too bad for you");
}

#javascript

Captura de datos y manejo de estos by javascript**********

let firstName = prompt("What is your first name");

let lastName = prompt("What is your last name");

let fullName = firstName + " " + lastName;

document.write(fullName);

#javascript #angularjs

c.CacheHelper

using System;
using System.Collections;
using System.Collections.Generic;
using System.Runtime.Caching;
using System.Web;

namespace Common
{
    public static class CacheHelper
    {
        public static void AddOrUpdate(string key, object value, int expiresinhours)
        {
            if (HttpContext.Current != null)
            {
                if (HttpContext.Current.Cache[key] != null)
                {
                    HttpContext.Current.Cache[key] = value;
                }
                else
                {
                    HttpContext.Current.Cache.Add(key, value, null, DateTime.Now.AddHours(expiresinhours), System.Web.Caching.Cache.NoSlidingExpiration, System.Web.Caching.CacheItemPriority.Normal, null);
                }
            }
            else if (MemoryCache.Default != null)
            {
                if (MemoryCache.Default[key] != null)
                {
                    MemoryCache.Default[key] = value;
                }
                else
                {
                    CacheItemPolicy policy = new CacheItemPolicy();
                    policy.AbsoluteExpiration = DateTime.Now.AddHours(expiresinhours);
                    MemoryCache.Default.Set(key, value, policy);
                }
            }
        }

        public static object Get(string key)
        {
            ObjectCache cache = MemoryCache.Default;
    
            if (HttpContext.Current!= null && HttpContext.Current.Cache[key] != null)
            {
                return HttpContext.Current.Cache[key];
            }
            else if (MemoryCache.Default != null && MemoryCache.Default[key] != null)
            {
                return MemoryCache.Default[key];
            }

            return null;
        }

        public static void DeleteCacheThatContains(string value)
        {
            if (HttpContext.Current != null)
            {
                List<string> keys = new List<string>();

                // retrieve application Cache enumerator
                IDictionaryEnumerator enumerator = HttpContext.Current.Cache.GetEnumerator();

                // copy all keys that currently exist in Cache
                while (enumerator.MoveNext())
                {
                    if (enumerator.Key.ToString().Contains(value))
                        keys.Add(enumerator.Key.ToString());
                }

                // delete every key from cache
                for (int i = 0; i < keys.Count; i++)
                {
                    HttpContext.Current.Cache.Remove(keys[i]);
                }
            }
        }


        public static void ClearAllCache()
        {
            if (HttpContext.Current != null)
            {
                List<string> keys = new List<string>();

                // retrieve application Cache enumerator
                IDictionaryEnumerator enumerator = HttpContext.Current.Cache.GetEnumerator();

                // copy all keys that currently exist in Cache
                while (enumerator.MoveNext())
                {
                    keys.Add(enumerator.Key.ToString());
                }

                // delete every key from cache
                for (int i = 0; i < keys.Count; i++)
                {
                    HttpContext.Current.Cache.Remove(keys[i]);
                }
            }
        }
    }
}

#javascript

.map examples

Syntax
array.map(function(currentValue, index, arr), thisValue)
Parameter Values
Parameter	Description
function(currentValue, index, arr)	Required. A function to be run for each element in the array.
Function arguments:
Argument	Description
currentValue	Required. The value of the current element
index	Optional. The array index of the current element
arr	Optional. The array object the current element belongs to
thisValue	Optional. A value to be passed to the function to be used as its "this" value.
If this parameter is empty, the value "undefined" will be passed as its "this" value

examples

service.currencyList.map(each({value:each.currencySymbol,displayValue:each.currencySymbol}))

######################################################################

const persons = [
  {firstname : "Malcom", lastname: "Reynolds"},
  {firstname : "Kaylee", lastname: "Frye"},
  {firstname : "Jayne", lastname: "Cobb"}
];

persons.map(getFullName);

function getFullName(item) {
  return [item.firstname,item.lastname].join(" ");
}

#javascript #angularjs

j.AngularJs.Distinct

distinct: function (list, identifierFunc) {

                let result = [];

                const map = new Map();

                list.forEach(item => {
                    let id = identifierFunc(item).toUpperCase();
                    if (!map.has(id)) {
                        map.set(id, true);

                        result.push(item);
                    }
                });

                return result;
            }

#javascript #angularjs

j.AngularJs.JSONToCSVConvertor

JSONToCSVConvertor: function (JSONData, FileName, ShowLabel) {
                //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
                var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

                var CSV = '';
                //Set Report title in first row or line

                //CSV += ReportTitle + '\r\n\n';

                //This condition will generate the Label/Header
                if (ShowLabel) {
                    var row = "";

                    //This loop will extract the label from 1st index of on array
                    for (var index in arrData[0]) {

                        //Now convert each value to string and comma-seprated
                        row += index + ',';
                    }

                    row = row.slice(0, -1);

                    //append Label row with line break
                    CSV += row + '\r\n';
                }

                //1st loop is to extract each row
                for (var i = 0; i < arrData.length; i++) {
                    var row = "";

                    //2nd loop will extract each column and convert it in string comma-seprated
                    for (var index in arrData[i]) {
                        row += '"' + arrData[i][index] + '",';
                    }

                    row.slice(0, row.length - 1);

                    //add a line break after each row
                    CSV += row + '\r\n';
                }

                if (CSV == '') {
                    alert("Invalid data");
                    return;
                }

                //Generate a file name
                var fileName = FileName;
                //this will remove the blank-spaces from the title and replace it with an underscore
                //fileName += ReportTitle.replace(/ /g, "_");

                //Initialize file format you want csv or xls
                var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

                // Now the little tricky part.
                // you can use either>> window.open(uri);
                // but this will not work in some browsers
                // or you will not get the correct file extension    

                //this trick will generate a temp <a /> tag
                var link = document.createElement("a");
                link.href = uri;

                //set the visibility hidden so it will not effect on your web-layout
                link.style = "visibility:hidden";
                link.download = fileName + ".csv";

                //this part will append the anchor tag and remove it after automatic click
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }

#javascript #kendo #angularjs

j.Kendo.AngularJs.BuildComboBoxDataSource

buildComboDataSource: function (endpoint, sortField, pageSize) {
                return {
                    type: "odata-v4",
                    transport: {
                        read: {
                            url: this.odata.url() + endpoint,
                            dataType: "json",
                            xhrFields: {
                                withCredentials: true //needed for windows auth
                            }
                        }
                    },
                    schema: {
                        total: function (data) {
                            return data["@odata.count"];
                        }
                    },
                    pageSize: pageSize,
                    serverPaging: pageSize > 0 ? true : false,
                    serverFiltering: true,
                    serverSorting: true,
                    sort: {
                        field: sortField,
                        dir: "asc"
                    }
                };
            }

#javascript

j.PushIfUnique

function PushIfUnique (arr, element) {
    if (!arr.includes(element)) {
        arr.push(element);
    }
};

#javascript

j.ArraysAreEqual

function arraysAreEqual(a, b) {
    return Array.isArray(a) &&
        Array.isArray(b) &&
        a.length === b.length &&
        a.every((val, index) => val === b[index]);
}

#javascript

j.String.ReplaceAll

String.prototype.replaceAll = function (find, replace) {
    var str = this;
    return str.replace(new RegExp(find.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g'), replace);
};

#javascript #c# #telerik #kendo #mvc

j.Kendo.GridFilter

function grid_product_filter(element) {
    build_gridfilter(element, '/Products/GridFilterRead');
}


function build_gridfilter(element, url) {
   
    var combobox = element.kendoComboBox({

    placeholder: "Select",
    autoBind: true,
    filter: "contains",

        dataTextField: "Name",
        dataValueField: "Name",

        dataSource: {
            type: "aspnetmvc-ajax",
            sort: { field: "Name", dir: "asc" },
            transport: {
                read: {
                    url: url,
                }
            },
            schema: {
                data: "Data",
                total: "Total"
            },
            pageSize: 200,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        }
    });
    setdropdownwidth(combobox);
}
var standardfilterwidth = 300;
function setdropdownwidth(combobox) {
    if (combobox.data("kendoComboBox"))
        combobox.data("kendoComboBox").list.width(standardfilterwidth);
    else if (combobox.data("kendoExtendedComboBox"))
        combobox.data("kendoExtendedComboBox").list.width(standardfilterwidth);
}

#javascript #kendo

j.Kendo.GridAddItemHandler

function GridAddItemHandler(gridid) {
    var grid;

    if (gridid == undefined)
        grid = $("#grid").data("kendoGrid");
    else
        grid = $("#" + gridid).data("kendoGrid");
   
    if (grid) {

            grid.addRow();
        
    }
}

#javascript #kendo

j.Kendo.GridRowDoubleClick

$(document).ready(function () {

    GridRowDoubleClickHandler();
  
}
                  
function GridRowDoubleClickHandler(gridid) {
    
        var grid;

        if (gridid == undefined)
            grid = $("#grid");
        else
            grid = $("#" + gridid);

        if (grid) {

            grid.delegate("tbody > tr", "dblclick", function () {
                var kendogrid = grid.data("kendoGrid");
                if (kendogrid.options.editable.mode == "popup") {
                    var row = $(this);
                    editrowdataitem = kendogrid.dataItem(row);
                    if (compliant) {
                        kendogrid.editRow(row);
                    }
                }
            });

            grid.delegate(".k-grid-edit", "click", function () {
                var kendogrid = grid.data("kendoGrid");
                if (kendogrid.options.editable.mode == "popup") {
                    var row = $(this).closest("tr");
                    editrowdataitem = kendogrid.dataItem(row);
                }
            });
        }

}

#javascript

j.EnvironmentBar

<div class="environment @Server.Environment.ToString().ToLower()">
  @Server.Environment.ToString().ToUpper() ENVIRONMENT
</div>
<style>
	.environment {
		display: block;
		position: absolute;
		width: 100%;
		padding: 5px 0;
		font-weight: bold;
		text-align: center;
		color: #fff;
	}

	.environment.local {
		background-color: #56ca85;
	}

	.environment.development {
		background-color: #000dbe;
	}

	.environment.test {
		background-color: #be5500;
	}

	.environment.production {
		display: none;
	}
</style>

<script type="text/javascript">
  $(document).ready(function () {
    if ($(".development").length || $(".test").length || $(".local").length) {
      setTimeout("HideEnvironment('.environment')", 2000);   
      $(".title").mouseenter(function () {
        ShowEnvironment();
      })
        .mouseleave(function(){
        HideEnvironment(".environment");
      });
    }
  });

  function ShowEnvironment() {
      $(".environment").stop().animate({
          height: '22px',
          padding: '5px 0px',
          'text-indent': '-0px'
      }, 400);
  }

  function HideEnvironment(selector) {
      $(selector).stop().animate({
          height: '2px',
          padding: '0px 0px',
         'text-indent': '-9999px'
      }, 400);
  }
</script>

#javascript

j.JqueryPageLoad

$(document).ready(function(){
  
});

#javascript

How do I test for an empty JavaScript object? - Stack Overflow

function isEmpty(obj) {
    return Object.keys(obj).length === 0;
}

#javascript

j.ToShortDescription

function ToShortDescription(str, numberOfWords) {
  var words = str.split(' ');
  words.splice(numberOfWords, words.length-1);
  return words.join(' ') + 
    (words.length !== str.split(' ').length ? '&helip;' : '');
}

#javascript

j.IsNullOrEmpty

function isNullOrEmpty(value){
    return (!value || value.length == 0);
}

#javascript

nginx proxy set up

sudo nano /etc/nginx/sites-available/default

location / {
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

sudo nginx -t 
sudo service nginx restart

#javascript #strings #regex #sort #anagram #loops #unsolved

Valid Anagram

// SOLUTION 1 - MY (DISCOVERED) SOLUTION (RUNTIME - 104MS, 44.9 MB)
var isAnagram = function(s, t) {
    
    // set function to split, sort, and rejoin characters in a string
    const sortString = (str) => {
        return str.split("").sort().join("");
    }
    
    // regex removes any non-alphabet characters in the string and makes it lowercase
    s = s.replace(/[^\w]/g, '').toLowerCase()
    t = t.replace(/[^\w]/g, '').toLowerCase()

    // final comparison
    return sortString(s) === sortString(t)
  
  // ATTEMPT 1
  //     let anagram = []
    
  // return false is lengths don't match
  //     if (s.length !== t.length) return false;
  //     else {
  //         for (let i = 0; i < s.length; i++) {
  //             let arrT = t.split("")
  //             let newArrT;
  //             if (arrT.includes(s.charAt(i))) {
  //                 let index = arrT.indexOf(s.charAt(i));
  //                 console.log("s char: ", s.charAt(i));
  //                 console.log("index: ", index);

  //                 anagram.push(s.charAt(i))

  //                 console.log("splice: ", arrT.splice(index, 1))
  //                 arrT.splice(index, 0)

  //                 newArrT = arrT
  //                 console.log("newArr: ", newArrT)
  //             };
  //         };
  //     }
  //     console.log(anagram)
  //     return anagram.join("") === s;
}

// SOLTUION 2 - (BEST RUNTIME - 60MS)
var isAnagram = function(s, t) {
    const key = w => Object.entries([...w].reduce((a, c) => {
        if (!(c in a)) a[c] = 0;
        a[c] += 1;
      
        return a;
    }, {})).sort(([c1], [c2]) => c1.localeCompare(c2)).flat().join('');
  
    return key(s) === key(t);
};

// SOLUTION 3 - (RUNTIME - 72MS)
var isAnagram = function(s, t) {
    if(s.length !== t.length) return false;
  
    let map = {};
  
    for(let item of s) {
        map[item] = map[item] + 1 || 1;
    }
    
    for(let item of t) {
        if(!map[item]) return false;
        else map[item]--;
    }
  
    return true;
};

#javascript

index.js for forever if running typescript express server

require('ts-node/register');
require('./app');

#javascript

node.js - bitbucket pipeline: npm: command not found? - Stack Overflow

apt-get install -y npm    
this is the solution

#javascript

Keep track of your AdWords changes with labels and Slack

/**
 * AdWords Performance Monitoring in Slack via Labels
 * @author: Dustin Recko
 *
 */

// Config Section //>

var DB_URL = 'https://...'; // The Firebase Database URL
var DB_AUTH = 'xxx'; // The Firebase Database Secret

var SLACK_HOOK = 'https://...'; // The Slack Hook URL
var SLACK_CHANNEL = '#adwords'; // The Slack Channel
var SLACK_EMOJI = ':smile:'; // The Slack Emoji

var TRIGGER = {
  clicks: 30, //Stats as a trigger with a specified threshold
  weeks: [1,4] //Time as a trigger with a start and end threshold
};

var LABEL_NAME = "CONTROL"; // The name of the label used in AdWords to activate monitoring for Keywords, AdGroups, and Ads

var NOW = new Date();

// End of Config <//

function main() {

  init();

  var ACC = AdWordsApp.currentAccount().getName().split(" ")[0];

  var myDb = new firebase(DB_URL,DB_AUTH);
  var myDbJson = myDb.getJson(LABEL_NAME+'/'+ACC) || nest({},[LABEL_NAME,ACC]);

  var mySlack = new slack(SLACK_HOOK,SLACK_CHANNEL,SLACK_EMOJI);

  var myLabel = AdWordsApp.labels().withCondition("Name = '"+LABEL_NAME+"'").get().next();

  var process = {
    "keywords": myLabel.keywords().get(),
    "adGroups": myLabel.adGroups().get(),
    "ads": myLabel.ads().get()
  };

  /// Main process

  for(var handler in process) {

    /// Check items with the label

    while(process[handler].hasNext()) {

      var h = process[handler].next();

      if(!myDbJson[handler] || !myDbJson[handler][h.getId()]) {

        var obj = {
          "name"    : (h.getText instanceof Function) ? h.getText() : ((h.getDescription1 instanceof Function) ? h.getDescription1() : h.getName()),
          "campaign": h.getCampaign().getName(),
          "qsStart"  : (h.getQualityScore instanceof Function) ? h.getQualityScore() : 0,
          "started" : NOW.getTime(),
          "trigger": initTrigger(TRIGGER)
        };
        myDb.patch(obj,LABEL_NAME+'/'+ACC+'/'+handler+'/'+h.getId());
        myDbJson = nest(myDbJson,[handler,h.getId()]);

      } else {

        for(var i in TRIGGER) {
          switch(typeof(myDbJson[handler][h.getId()].trigger[i])) {
            case "boolean":        
              if(!myDbJson[handler][h.getId()].trigger[i]) {
                if(statsBasedCheck(handler,h,i,myDbJson[handler][h.getId()])) {
                  var status = {};
                  status[i] = true;
                  myDb.patch(status,LABEL_NAME+'/'+ACC+'/'+handler+'/'+h.getId()+'/trigger');
                }
              }
              break;
            case "number":
              var weeksPassed = Math.round((NOW.getTime() - myDbJson[handler][h.getId()].started)/(1000*60*60*24)) / 7;
              if(weeksPassed%1 === 0 && TRIGGER[i][0] <= weeksPassed && weeksPassed <= TRIGGER[i][1] && weeksPassed > myDbJson[handler][h.getId()].trigger[i]) {
                timeBasedCheck(handler,h,i,myDbJson[handler][h.getId()]);
                var status = {};
                status[i] = weeksPassed;
                myDb.patch(status,LABEL_NAME+'/'+ACC+'/'+handler+'/'+h.getId()+'/trigger');
              }
              break;
          }
        }
      }
      /// Flag processed items
      myDbJson[handler][h.getId()].flag = true;
    }
      /// Cleanup no longer labelled items, i.e., non-flagged
      for(var i in myDbJson[handler]) {
      if(myDbJson[handler][i].flag == undefined)
        myDb.purge(LABEL_NAME+'/'+ACC+'/'+handler+'/'+i);
    }
  }


  /// Some functions

  function init() {
    Date.prototype.yyyymmdd = function(days) {
      if(days) {
        this.setDate(this.getDate() + days);
      }
      return Utilities.formatDate(this, AdWordsApp.currentAccount().getTimeZone(),'yyyyMMdd');
    }
  }

  function firebase(db,auth) {
    this.db = db;
    this.auth = auth;

    this.patch = function(payload,path) {
      path = path+'/.json?auth=';
      var options = {
        "method"  : "patch",
        "payload" : JSON.stringify( payload )
      };
      UrlFetchApp.fetch(this.db+path+this.auth,options);
    }

    this.purge = function(path) {
      path = path+'/.json?auth=';
      var options = {
        "method": "delete"
      };
      UrlFetchApp.fetch(this.db+path+this.auth,options);
    }

    this.getJson = function(path) {
      path = path+'/.json?auth=';
      return JSON.parse(
        UrlFetchApp
        .fetch(this.db+path+this.auth)
        .getContentText()
      );
    }
  }

  function slack(hook,channel,emoji) {

    this.hook = hook;
    this.channel = channel;
    this.emoji = emoji;

    this.msg = function(payload) {
      payload.channel = this.channel;
      payload.icon_emoji = this.emoji;
      var options = {
        method: "POST",
        contentType: 'application/json',
        payload: JSON.stringify(payload)
      };
      UrlFetchApp.fetch(this.hook,options);
    }
  }

  function initTrigger() {
    var obj = {};
    for(var i in TRIGGER) {
      if(typeof(TRIGGER[i]) == "number")
        obj[i] = false
      else
        obj[i] = 0
    }
    return obj;
  }

  function statsBasedCheck(type,handler,trigger,dbData) {

    var sh = handler.getStatsFor(new Date(dbData.started).yyyymmdd(),NOW.yyyymmdd());

    var stats = {
      avgCpc: sh.getAverageCpc().toFixed(2),
      avgPos: sh.getAveragePosition(),
      clicks: sh.getClicks(),
      conversions: sh.getConversions(),
      cost: sh.getCost(),
      qs: (type == 'keywords') ? handler.getQualityScore() : 0
    };

    if(stats[trigger] >= TRIGGER[trigger])  {

      var daysPassed = Math.round((NOW.getTime() - dbData.started)/(1000*60*60*24));

      var sh = handler.getStatsFor(new Date(dbData.started).yyyymmdd(daysPassed*-1),new Date(dbData.started).yyyymmdd());

      var beforeStats = {
        avgCpc: sh.getAverageCpc().toFixed(2),
        avgPos: sh.getAveragePosition(),
        clicks: sh.getClicks(),
        conversions: sh.getConversions(),
        cost: sh.getCost(),
        qs: dbData.qsStart
      };

      var attachments = [];
      for(var s in stats) {
        attachments.push({
          title: s,
          text: 'is '+stats[s]+ (stats[s]>=beforeStats[s] ? ' (up' : '(down') +' from '+beforeStats[s]+')'
        });
      }

      mySlack.msg({
        text: LABEL_NAME+" > "+ACC+" > "+type+" > "+dbData.name+" in "+dbData.campaign+" passed "+stats[trigger]+" "+trigger+" in "+daysPassed+" days (was "+beforeStats[trigger]+" in the previous period)",
        attachments: attachments
      });

      return true;
    }

    return false;
  }

  function timeBasedCheck(type,handler,trigger,dbData) {

    var sh = handler.getStatsFor(new Date(dbData.started).yyyymmdd(),NOW.yyyymmdd());

    var stats = {
      avgCpc: sh.getAverageCpc().toFixed(2),
      avgPos: sh.getAveragePosition(),
      clicks: sh.getClicks(),
      conversions: sh.getConversions(),
      cost: sh.getCost(),
      qs: (type == 'keywords') ? handler.getQualityScore() : 0
    };

    var sh = handler.getStatsFor(new Date(dbData.started).yyyymmdd((dbData.trigger[trigger]+1)*-7),new Date(dbData.started).yyyymmdd());

    var beforeStats = {
      avgCpc: sh.getAverageCpc().toFixed(2),
      avgPos: sh.getAveragePosition(),
      clicks: sh.getClicks(),
      conversions: sh.getConversions(),
      cost: sh.getCost(),
      qs: dbData.qsStart
    };

    var attachments = [];
    for(var s in stats) {
      attachments.push({
        title: s,
        text: 'is '+stats[s]+ (stats[s]>=beforeStats[s] ? ' (up' : '(down') +' from '+beforeStats[s]+')'
      });
    }

    mySlack.msg({
      text: LABEL_NAME+" > "+ACC+" > "+type+" > "+dbData.name+" in "+dbData.campaign+" passed "+(dbData.trigger[trigger]+1)+" "+trigger,
      attachments: attachments
    });

  }

  // by Jason Knight
  function nest(base,arr) {
    for (var obj = base, ptr = obj, i = 0, j = arr.length; i < j; i++)
      ptr = (ptr[arr[i]] = {});
    return obj;
  }

}

#javascript

Keep track of your AdWords changes with labels and Slack

/**
 * AdWords Performance Monitoring in Slack via Labels
 * @author: Dustin Recko
 *
 */

// Config Section //>

var DB_URL = 'https://...'; // The Firebase Database URL
var DB_AUTH = 'xxx'; // The Firebase Database Secret

var SLACK_HOOK = 'https://...'; // The Slack Hook URL
var SLACK_CHANNEL = '#adwords'; // The Slack Channel
var SLACK_EMOJI = ':smile:'; // The Slack Emoji

var TRIGGER = {
  clicks: 30, //Stats as a trigger with a specified threshold
  weeks: [1,4] //Time as a trigger with a start and end threshold
};

var LABEL_NAME = "CONTROL"; // The name of the label used in AdWords to activate monitoring for Keywords, AdGroups, and Ads

var NOW = new Date();

// End of Config <//

function main() {

  init();

  var ACC = AdWordsApp.currentAccount().getName().split(" ")[0];

  var myDb = new firebase(DB_URL,DB_AUTH);
  var myDbJson = myDb.getJson(LABEL_NAME+'/'+ACC) || nest({},[LABEL_NAME,ACC]);

  var mySlack = new slack(SLACK_HOOK,SLACK_CHANNEL,SLACK_EMOJI);

  var myLabel = AdWordsApp.labels().withCondition("Name = '"+LABEL_NAME+"'").get().next();

  var process = {
    "keywords": myLabel.keywords().get(),
    "adGroups": myLabel.adGroups().get(),
    "ads": myLabel.ads().get()
  };

  /// Main process

  for(var handler in process) {

    /// Check items with the label

    while(process[handler].hasNext()) {

      var h = process[handler].next();

      if(!myDbJson[handler] || !myDbJson[handler][h.getId()]) {

        var obj = {
          "name"    : (h.getText instanceof Function) ? h.getText() : ((h.getDescription1 instanceof Function) ? h.getDescription1() : h.getName()),
          "campaign": h.getCampaign().getName(),
          "qsStart"  : (h.getQualityScore instanceof Function) ? h.getQualityScore() : 0,
          "started" : NOW.getTime(),
          "trigger": initTrigger(TRIGGER)
        };
        myDb.patch(obj,LABEL_NAME+'/'+ACC+'/'+handler+'/'+h.getId());
        myDbJson = nest(myDbJson,[handler,h.getId()]);

      } else {

        for(var i in TRIGGER) {
          switch(typeof(myDbJson[handler][h.getId()].trigger[i])) {
            case "boolean":        
              if(!myDbJson[handler][h.getId()].trigger[i]) {
                if(statsBasedCheck(handler,h,i,myDbJson[handler][h.getId()])) {
                  var status = {};
                  status[i] = true;
                  myDb.patch(status,LABEL_NAME+'/'+ACC+'/'+handler+'/'+h.getId()+'/trigger');
                }
              }
              break;
            case "number":
              var weeksPassed = Math.round((NOW.getTime() - myDbJson[handler][h.getId()].started)/(1000*60*60*24)) / 7;
              if(weeksPassed%1 === 0 && TRIGGER[i][0] <= weeksPassed && weeksPassed <= TRIGGER[i][1] && weeksPassed > myDbJson[handler][h.getId()].trigger[i]) {
                timeBasedCheck(handler,h,i,myDbJson[handler][h.getId()]);
                var status = {};
                status[i] = weeksPassed;
                myDb.patch(status,LABEL_NAME+'/'+ACC+'/'+handler+'/'+h.getId()+'/trigger');
              }
              break;
          }
        }
      }
      /// Flag processed items
      myDbJson[handler][h.getId()].flag = true;
    }
      /// Cleanup no longer labelled items, i.e., non-flagged
      for(var i in myDbJson[handler]) {
      if(myDbJson[handler][i].flag == undefined)
        myDb.purge(LABEL_NAME+'/'+ACC+'/'+handler+'/'+i);
    }
  }


  /// Some functions

  function init() {
    Date.prototype.yyyymmdd = function(days) {
      if(days) {
        this.setDate(this.getDate() + days);
      }
      return Utilities.formatDate(this, AdWordsApp.currentAccount().getTimeZone(),'yyyyMMdd');
    }
  }

  function firebase(db,auth) {
    this.db = db;
    this.auth = auth;

    this.patch = function(payload,path) {
      path = path+'/.json?auth=';
      var options = {
        "method"  : "patch",
        "payload" : JSON.stringify( payload )
      };
      UrlFetchApp.fetch(this.db+path+this.auth,options);
    }

    this.purge = function(path) {
      path = path+'/.json?auth=';
      var options = {
        "method": "delete"
      };
      UrlFetchApp.fetch(this.db+path+this.auth,options);
    }

    this.getJson = function(path) {
      path = path+'/.json?auth=';
      return JSON.parse(
        UrlFetchApp
        .fetch(this.db+path+this.auth)
        .getContentText()
      );
    }
  }

  function slack(hook,channel,emoji) {

    this.hook = hook;
    this.channel = channel;
    this.emoji = emoji;

    this.msg = function(payload) {
      payload.channel = this.channel;
      payload.icon_emoji = this.emoji;
      var options = {
        method: "POST",
        contentType: 'application/json',
        payload: JSON.stringify(payload)
      };
      UrlFetchApp.fetch(this.hook,options);
    }
  }

  function initTrigger() {
    var obj = {};
    for(var i in TRIGGER) {
      if(typeof(TRIGGER[i]) == "number")
        obj[i] = false
      else
        obj[i] = 0
    }
    return obj;
  }

  function statsBasedCheck(type,handler,trigger,dbData) {

    var sh = handler.getStatsFor(new Date(dbData.started).yyyymmdd(),NOW.yyyymmdd());

    var stats = {
      avgCpc: sh.getAverageCpc().toFixed(2),
      avgPos: sh.getAveragePosition(),
      clicks: sh.getClicks(),
      conversions: sh.getConversions(),
      cost: sh.getCost(),
      qs: (type == 'keywords') ? handler.getQualityScore() : 0
    };

    if(stats[trigger] >= TRIGGER[trigger])  {

      var daysPassed = Math.round((NOW.getTime() - dbData.started)/(1000*60*60*24));

      var sh = handler.getStatsFor(new Date(dbData.started).yyyymmdd(daysPassed*-1),new Date(dbData.started).yyyymmdd());

      var beforeStats = {
        avgCpc: sh.getAverageCpc().toFixed(2),
        avgPos: sh.getAveragePosition(),
        clicks: sh.getClicks(),
        conversions: sh.getConversions(),
        cost: sh.getCost(),
        qs: dbData.qsStart
      };

      var attachments = [];
      for(var s in stats) {
        attachments.push({
          title: s,
          text: 'is '+stats[s]+ (stats[s]>=beforeStats[s] ? ' (up' : '(down') +' from '+beforeStats[s]+')'
        });
      }

      mySlack.msg({
        text: LABEL_NAME+" > "+ACC+" > "+type+" > "+dbData.name+" in "+dbData.campaign+" passed "+stats[trigger]+" "+trigger+" in "+daysPassed+" days (was "+beforeStats[trigger]+" in the previous period)",
        attachments: attachments
      });

      return true;
    }

    return false;
  }

  function timeBasedCheck(type,handler,trigger,dbData) {

    var sh = handler.getStatsFor(new Date(dbData.started).yyyymmdd(),NOW.yyyymmdd());

    var stats = {
      avgCpc: sh.getAverageCpc().toFixed(2),
      avgPos: sh.getAveragePosition(),
      clicks: sh.getClicks(),
      conversions: sh.getConversions(),
      cost: sh.getCost(),
      qs: (type == 'keywords') ? handler.getQualityScore() : 0
    };

    var sh = handler.getStatsFor(new Date(dbData.started).yyyymmdd((dbData.trigger[trigger]+1)*-7),new Date(dbData.started).yyyymmdd());

    var beforeStats = {
      avgCpc: sh.getAverageCpc().toFixed(2),
      avgPos: sh.getAveragePosition(),
      clicks: sh.getClicks(),
      conversions: sh.getConversions(),
      cost: sh.getCost(),
      qs: dbData.qsStart
    };

    var attachments = [];
    for(var s in stats) {
      attachments.push({
        title: s,
        text: 'is '+stats[s]+ (stats[s]>=beforeStats[s] ? ' (up' : '(down') +' from '+beforeStats[s]+')'
      });
    }

    mySlack.msg({
      text: LABEL_NAME+" > "+ACC+" > "+type+" > "+dbData.name+" in "+dbData.campaign+" passed "+(dbData.trigger[trigger]+1)+" "+trigger,
      attachments: attachments
    });

  }

  // by Jason Knight
  function nest(base,arr) {
    for (var obj = base, ptr = obj, i = 0, j = arr.length; i < j; i++)
      ptr = (ptr[arr[i]] = {});
    return obj;
  }

}

#javascript

How to insert a large block of HTML in JavaScript? - Stack Overflow

// Create a temporary <div> to load into
var div = document.createElement('div');
div.setAttribute('class', 'someClass');
div.innerHTML = document.getElementById('blockOfStuff').innerHTML;

// You could optionally even do a little bit of string templating
div.innerHTML = div.innerHTML
    .replace(/{VENDOR}/g, 'ACME Inc.')
    .replace(/{PRODUCT}/g, 'Best TNT')
    .replace(/{PRICE}/g, '$1.49');

// Write the <div> to the HTML container
document.getElementById('targetElement').appendChild(div);

#javascript

doesFileExist

function doesFileExist(urlToFile) {
	var xhr = new XMLHttpRequest();
	xhr.open("HEAD", urlToFile, false);
	xhr.send();

	if (xhr.status == "404") {
		return false;
	} else {
		return true;
	}
}

#javascript

How to loop through an array of objects in JavaScript

const mobiles = [
    {
        brand: 'Samsung',
        model: 'Galaxy Note 9'
    },
    {
        brand: 'Google',
        model: 'Pixel 3'
    },
    {
        brand: 'Apple',
        model: 'iPhone X'
    }
];

mobiles.forEach(mobile => {
    for (let key in mobile) {
        console.log(`${key}: ${mobile[key]}`);
    }
});

#javascript #node

Conexión DB, hbs, express, dotenv con ruteo y servidor

// 1. IMPORTACIONES
const express   =      require("express")
const app       =      express()
const hbs       =      require("hbs")     

const connectingDB  =   require('./config/db')


// 2. MIDDLEWARES
// ACTIVAR VARIABLES DE ENTORNO
require('dotenv').config()

// GESTIÓN DE BASE DE DATOS
connectingDB()

// ACTIVACIÓN DE LA CARPETA DE PUBLIC
app.use(express.static(__dirname + "/public"))

// ACTIVAR CARPETA DE VISTAS
app.set("views", __dirname + "views")

// ACTIVAR HANDLEBARS
app.set("view engine", "hbs")

// ACTIVAR RECEPCIÓN DE DATOS DE FORMULARIOS
app.use(express.urlencoded({ extended: true }))





// 3. RUTEO
app.use("/", require("./"))
//app.use("/users", require("./routes/users"))


// 4. SERVIDOR
app.listen(process.env.PORT, () => console.log(`Servidor activo en el puerto ${ process.env.PORT }`))

#javascript #strings #uniquecharacter #characters #loops #unsolved

First Unique Character in a String

// SOLUTION 1 - MY (DISCOVERED) SOLUTION (RUNTIME - 84MS, MEMORY - 41.2MB)
var firstUniqChar = function(s) {
  // loop through the characters of the string
  for (var i = 0; i < s.length; i++) {
    // set a variable for the char
    var c = s.charAt(i);
    // if the index of the char == i, and the index of 'c', starting search from index 'i + 1' == -1
    if (s.indexOf(c) == i && s.indexOf(c, i + 1) == -1) {
      return s.indexOf(c);
    }
  }
  return -1;
};

// SOLUTION 2 (BEST RUNTIME - 68MS)
var firstUniqChar = function(s) {
  count = []

    for(let i=0;i<s.length;i++){
      index = s.charCodeAt(i)-'a'.charCodeAt(0)
   
      if(count[index]==undefined){
        count[index]=1
      }else{
        count[index]++
      }
    }
    
    for(let i=0;i<s.length;i++){
      index = s.charCodeAt(i)-'a'.charCodeAt(0)
      if(count[index]==1){
        return i
      }
    }
    return -1
};

// SOLUTION 3 - (RUNTIME - 96MS)
var firstUniqChar = function(s) {
    for (i=0; i < s.length; i++) {
      if (s.indexOf(s[i]) == s.lastIndexOf(s[i])) {
        return i
      }
    }
   return -1
}

#javascript

reactjs - Programmatically jump to a specific block and move the focus/caret to a decorated word - Stack Overflow

window.getSelection().focusNode.parentElement.scrollIntoView();
window.getSelection().anchorNode.parentElement.scrollIntoView();

#javascript

reactjs - Programmatically jump to a specific block and move the focus/caret to a decorated word - Stack Overflow

let selection = new SelectionState({
  anchorKey: 'abc', // key of block
  anchorOffset: 5,
  focusKey: 'abc',
  focusOffset: 10, // key of block
  hasFocus: true,
  isBackward: false // isBackward = (focusOffset < anchorOffset)
});

let s = new SelectionState(selection);
editorState = EditorState.forceSelection(editorState, s);
// Make sure to set this new EditorState as the editorState of Draft.js component

#javascript

j.isNumber

function isNumberic(n){
	return !isNaN(parseFloat(n)) && isFinite(n);
}

#javascript

How Googlebot adapts to the size of the content - Javascript

window.addEventListener("resize", function(event){
	var botPattern = "googlebot|Googlebot-Mobile|Googlebot-Image|Google favicon|Mediapartners-Google";
	var re = new RegExp(botPattern, 'i');
	var userAgent = navigator.userAgent; 

	var Wscreen=screen.width;
	var Hscreen=screen.height;
	var screenColorDepth=screen.colorDepth;
	var screenPixelDepth=screen.pixelDepth;

	var winW = window.innerWidth
	|| document.documentElement.clientWidth
	|| document.body.clientWidth;

	var winH = window.innerHeight
	|| document.documentElement.clientHeight
	|| document.body.clientHeight;
	var valoresResize=" screenWith:"+Wscreen+" Hscreen:"+Hscreen+" screenColorDepth:"+screenColorDepth+" screenPixelDepth:"+screenPixelDepth+" winW:"+winW+" winH:"+winH;

	
	if (re.test(userAgent)) {
		var target = event.target;
		var tagHTML = target.nodeName;
		var screenX=event.screenX;
		var screenY=event.screenY;
		var clientX=event.clientX;
		var clientY=event.clientY;
		var tipoEvento = event.type;
		var resultHTML="tipoEvento:"+tipoEvento+" tagHTML:"+tagHTML+" screenX:"+screenX+" screenY:"+screenY+" clientX:"+clientX+" clientY"+clientY;

		var client = new XMLHttpRequest();
		var ErroresURL='https://www.mecagoenlos.com/ImagenResizeGoogle.gif?UrlOrigen='+window.location.href+'&UA='+unescape(encodeURIComponent(userAgent))+'&parametrosResize='+valoresResize;		
		client.open('GET',ErroresURL);
		client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
		client.send(null);
		
		
	}


});

#javascript

How to use React useRef with TypeScript

// <div> reference type
const divRef = React.useRef<HTMLDivElement>(null);

// <button> reference type
const buttonRef = React.useRef<HTMLButtonElement>(null);

// <br /> reference type
const brRef = React.useRef<HTMLBRElement>(null);

// <a> reference type
const linkRef = React.useRef<HTMLLinkElement>(null);

#javascript

2021 JavaScript Cheatsheet | SheCodes

https://www.frontendcheatsheets.com/javascript

#javascript

Compare Ancestral Nodes

class AncestralTree {
  constructor(name, ancestorNode) {
    this.name = name;
    this.ancestor = ancestorNode;
  }
}

const a = new AncestralTree("A", null);
const b = new AncestralTree("B", a);
const d = new AncestralTree("D", b);
const e = new AncestralTree("E", b);
const c = new AncestralTree("c", a);
const f = new AncestralTree("F", c);
const g = new AncestralTree("G", c);
const h = new AncestralTree("H", d);
const i = new AncestralTree("I", d);

function ancestorFunc(topAnc, desc1, desc2) {
    const list1 = ancList(desc1);
    const list2 = ancList(desc2);
    //list1 = [A, B, D]
    //list2 = [A, B]
    for (let i = 0; i < list1.length; i++) {
        if (list1[i] !== list2[i]) {
          return list1[i - 1].name
        }
    }
}

function ancList (myNode) {
    let node = myNode 
    let ancestors = [];
    while (node){
        ancestors.unshift(node)
        node = node.ancestor
    }
    return ancestors;
}
console.log(ancestorFunc(a, h, i))

#javascript #strings #reversal #integers

Integer Reversal

// SOLUTION 1 - MY SOLUTION (RUNTIME - 92MS, MEMORY - 40.7MB)
var reverse = function(x) {
    // set variable that converts integer to a string, splits into an arr, reverses arr, and rejoins into a string
    const temp = x.toString().split("").reverse().join("");
    // converts string back into an integer
    let reversedNum = parseInt(temp);
    
    // using original argument, check if reversed number needs to be a positive or negative value
    if (Math.sign(x) === -1) reversedNum = reversedNum * -1
    
    // check to see if reversed integer fits within listed 32-bit contraint
    if (Math.pow(-2, 31) > reversedNum || reversedNum > Math.pow(2, 31)) return 0;
    else return reversedNum  
};

// SOLUTION 2 (BEST RUNTIME - 60MS)
var reverse = function(x) {
    const limit = 2147483648;
    const reversedNum = parseFloat(x.toString().split("").reverse().join(""))
    return reversedNum > limit ? 0 : reversedNum * Math.sign(x);
};

// SOLUTION 3 (RUNTIME - 60MS)
var reverse = function(x) {
    const sign = x < 0 ? -1 : 1;
    const positiveX = x * sign;
    const y = parseInt(positiveX.toString().split('').reverse().join('')) * sign;
    const absoluteY = y * sign;
    
  //0x7FFFFFFF is a number in hexadecimal (2,147,483,647 in decimal) that represents the maximum positive value for a 32-bit signed binary integer
    return absoluteY <= (y < 0 ? 0x80000000 : 0x7FFFFFFF) ? y : 0;
};

#javascript #strings #loops #reversal

String Reversal

// SOLUTION 1 - MY SOLUTION (RUNTIME - 104MS, 45.9 MB)
var reverseString = function(s) {
    s.reverse()
};

// SOLUTION 2 (BEST RUNTIME - 80MS)
var reverseString = function(s) {
    // declared here to set a stable loop constant
    // sets the indecies (ie. s.length = 6, indecies -> 0-5)
    let length = s.length - 1;
    
    //a will store value of current str so it isn't lost during reassignment
    let a;
    
    //loop will only need to reach the midpoint to reverse string
    for(let i = Math.floor(length/2); i >= 0; i--){
        a = s[i];
        s[i] = s[Math.abs(i - length)];
        s[Math.abs(i - length)] = a;
    }
    return s;
};

// SOLUTION 3 (RUNTIME - 108MS)
var reverseString = function(s) {
  // set up a for loop with 'i' only iteration up to half the length of 's'
    for(let i = 0; i < s.length / 2; i++) {
        let temp = s[s.length-1-i];
        s[s.length-1-i] = s[i];
        s[i] = temp;
    }    
};

#javascript

javascript - Class Binding ternary operator - Stack Overflow

:class="sportTypes.sports.indexOf(sport) > -1 ? 'is-primary' : 'is-outlined'"

#javascript

three dots javascript

// Extracts elements in Dict
let team = {
    lead: "Bob",
    num2: "Rob",
    num3: "Dog",
}
// team
{lead: "Bob", num2: "Rob", num3: "Dog"}

let students = {
    num1: "Andy",
    num4: "Ben",
    ...team
}
//students
{num1: "Andy", num4: "Ben", lead: "Bob", num2: "Rob", num3: "Dog"}

#javascript

Copy Text to Clipboard with Line Breaks | thiscodeWorks

function copyToClipboard(){
 
    var codeToBeCopied = document.getElementById('code-snippet').innerText;
    var emptyArea = document.createElement('TEXTAREA');
    emptyArea.innerHTML = codeToBeCopied;
    const parentElement = document.getElementById('post-title');
    parentElement.appendChild(emptyArea);
 
    emptyArea.select();
    document.execCommand('copy');
 
    parentElement.removeChild(emptyArea);
    M.toast({html: 'Code copied to clipboard'})
 
    }

#javascript

Bubble Sort

function bubbleSort(arr){
    
  var i, j;
  var len = arr.length;
    
  var isSwapped = false;
    
  for(i =0; i < len; i++){
      
    isSwapped = false;
      
    for(j = 0; j < len; j++){
        if(arr[j] > arr[j + 1]){
          var temp = arr[j]
          arr[j] = arr[j+1];
          arr[j+1] = temp;
          isSwapped = true;
        }
    }
      
    // IF no two elements were swapped by inner loop, then break 
      
    if(!isSwapped){
      break;
    }
  }
    
  // Print the array
  console.log(arr)
}
  
  
var arr = [243, 45, 23, 356, 3, 5346, 35, 5];
  
// calling the bubbleSort Function
bubbleSort(arr)

#javascript

set, get, delete cookie

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {   
    document.cookie = name+'=; Max-Age=-99999999;';  
}

#javascript

get cookie

function get_cookie(name){
    return document.cookie.split(';').some(c => {
        return c.trim().startsWith(name + '=');
    });
}

#javascript

javascript - How to delete a cookie? - Stack Overflow

function delete_cookie( name, path, domain ) {
  if( get_cookie( name ) ) {
    document.cookie = name + "=" +
      ((path) ? ";path="+path:"")+
      ((domain)?";domain="+domain:"") +
      ";expires=Thu, 01 Jan 1970 00:00:01 GMT";
  }
}

#html #javascript

reCAPTCHA v3 | Google Developers

 <script src="https://www.google.com/recaptcha/api.js"></script>
 <script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   }
 </script>
<button class="g-recaptcha" 
        data-sitekey="reCAPTCHA_site_key" 
        data-callback='onSubmit' 
        data-action='submit'>Submit</button>

#javascript

Open a new window with width & height

let win = window.open("","_blank","width=300,height=200");

#javascript

Collapse/Expand Element in Wix Repeater

export function openbtn_click_1(event) {
    let $item = $w.at(event.context);

    if ($item("#box1").collapsed) {
      // #box1 = #element you want to expand
        $item("#box1").expand();

    } else {
        $item("#box1").collapse();
    }
}

#javascript

border box

 Always keep this code inside your css file*/
*{
  box-sizing: border-box;
}
.div-1{
  /* width: 100%; Default - Block Element*/
  padding: 10px;
  box-sizing: border-box; 
  /* 
    content-box is default for box-sizing
    content-box will remove border-box effect.
  */
}
/*
  after applying padding [border also will increase the width]
  10px added to left and right from padding
  the .div-1 width is now 100% + 20px, and that may cause errors in your layout
  according to your work.
  to solve the problem and force the width to be as i give to it
  we use box-sizing => our div width will not be affected by padding or border
*/


// Defines how the width and height of an element
// are calculated: should they include padding and borders, or not
* {
  box-sizing: border-box;
}

#javascript

javascript - Recommended way to have drawer resizable? - Stack Overflow

const Layout = () => {
  const { width, enableResize } = useResize(200);

  return (
    <Drawer
      variant="permanent"
      open
      PaperProps={{ style: { width } }}
    >
      {drawer}
      <div
        style={{ 
          position: absolute,
          width: '2px',
          top: '0',
          right: '-1px',
          bottom: '0',
          cursor: 'col-resize'
        }}
        onMouseDown={enableResize}
      />
    </Drawer>
)

#javascript

javascript - Recommended way to have drawer resizable? - Stack Overflow

import { useCallback, useEffect, useState } from 'react'

type UseResizeProps = {
  minWidth: number
}

type UseResizeReturn = {
  width: number
  enableResize: () => void
}

const useResize = ({
  minWidth,
}: UseResizeProps): UseResizeReturn => {
  const [isResizing, setIsResizing] = useState(false)
  const [width, setWidth] = useState(minWidth)

  const enableResize = useCallback(() => {
    setIsResizing(true)
  }, [setIsResizing])

  const disableResize = useCallback(() => {
    setIsResizing(false)
  }, [setIsResizing])

  const resize = useCallback(
    (e: MouseEvent) => {
      if (isResizing) {
        const newWidth = e.clientX // You may want to add some offset here from props
        if (newWidth >= minWidth) {
          setWidth(newWidth)
        }
      }
    },
    [minWidth, isResizing, setWidth],
  )

  useEffect(() => {
    document.addEventListener('mousemove', resize)
    document.addEventListener('mouseup', disableResize)

    return () => {
      document.removeEventListener('mousemove', resize)
      document.removeEventListener('mouseup', disableResize)
    }
  }, [disableResize, resize])

  return { width, enableResize }
}

export default useResize

#javascript

Set Interval to check element exist then append child

// fill the element selector before run
let elementInterval;
let elementDefined = false
function modifyElement(elementSelector) {
  const optionContainer = document.querySelector(elementSelector);

  if (!optionContainer) {
    return null
  }

  const subTitle = document.createElement('p');
  subTitle.innerHTML = `TEST`
  optionContainer.appendChild(subTitle)
  
  elementDefined = true
  if(elementInterval) {
    clearInterval(elementInterval)
  }

}

if (!elementInterval) {
  elementInterval = setInterval(modifyElement(elementSelector), 50)
}

#javascript

javascript - Cannot read property 'addEventListener' of null - Stack Overflow

function swapper() {
toggleClass(document.getElementById('overlay'), 'open');
}

var el = document.getElementById('overlayBtn');
el.addEventListener('click', swapper, false);

var text = document.getElementById('overlayBtn');
text.onclick = function(){
this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";
return false;
};

#javascript

face-api.js

https://justadudewhohacks.github.io/face-api.js/face_and_landmark_detection/

#javascript

The opposite of array.filter

The reject function is like .filter but in reverse, so you can. You can use the filter function and reverse the callback with the Logical Operator NOT to reverse the outcome.

Array.prototype.reject = function(fn){return this.filter(x => !fn(x))}

#javascript

Image Stretch for Elementor Columns

const images = Array.from(document.querySelectorAll('.stretch img'));
images.map((img) => {
	const height = img.closest('.elementor-widget-wrap').offsetHeight
  	img.style = 'height: ' + height + 'px; object-fit: cover'
})

#javascript

last character of string javascript - Google Search

length function. Since the indexing starts from 0 so use str. charAt(str. length-1) to get the last character of string.

#javascript

routes.js

import Router from "express";

const router = Router();

router.get("/", (_, res) => {
  res.send("Hello API");
});

export default router;

#javascript

loader.js

import { MongoClient } from "mongodb";
import config from "./config.js";

const client = new MongoClient(config.db);

client
  .connect()
  .then(() => {
    console.info("Connected to MongoDB");
  })
  .catch((err) => {
    console.error("Error starting MongoDB Client");
    process.exit(1);
    // using "1" as exit code because it's not a graceful exit
    // using "0" as exit code because it's a graceful exit
  });

process.on("SIGINT", () => {
  client.close().then(() => {
    console.info("MongoDB connection closed");
    process.exit(0);
  });
});

export default client;

#javascript

index or server.js

// this is sometimes named "server.js" as well

import express from "express";
import config from "./config.js";
import apiRouter from "./routes.js";

const app = express();

app.get("/", (_, res) => {
  res.send("Hello World!");
});

app.use("/api", apiRouter);

app.listen(config.port, () => {
  console.log(`Listening on port ${config.port}`);
});

#javascript

Config file for dotenv in MONGODB

// Config is the only access of 'dotenv'

import dotenv from "dotenv";

dotenv.config();

export default {
  port: process.env.PORT || 3000,
  db: process.env.DB_CLIENT_URL,
};

#javascript

patterns of functional programming developing an employee

const withEmail = (state) => ({
  getEmail() {
    return `${state.email}`;
  },
});

const withPay = (state) => ({
  getPayCheck() {
    return (state.salary / 52).toFixed(2);
  },
  giveRaise(amount) {
    return state.salary + amount;
  },
  getSalary(state) {
    return state.salary;
  },
});

const withVaca = (state) => ({
  getVacaDays() {
    return `${state.vacaDays}`;
  },
  useVaca(days) {
    return state.vacaDays - days;
  },
});

const createEmployee = ({ name, email, salary = 99000, vacaDays = 21 }) => {
  const employee = {
    name,
    email,
    salary,
    vacaDays,
  };
  return {
    ...withEmail(employee),
    ...withPay(employee),
    ...withVaca(employee),
  };
};

const withCode = (state) => ({
  code(project) {
    return `${state.name} is coding ${project} 👩🏾‍💻 in ${state.language}`;
  },
});

const withDesign = (state) => ({
  design(project) {
    return `${state.name} is designing ${project} 💻👩🏾`;
  },
});

const createDeveloper = ({ name, email, language = "JS" }) => {
  const state = {
    language,
  };

  return {
    ...createEmployee({ name, email }),
    ...withCode(state),
  };
};

const createDesignerDeveloper 

return {
  ...createEmployee({ name, email }),
  ...createDeveloper
  ...withDesign()
}

const newEmp = createEmployee({ name: "Blanche", email: "blanche@gmail.com" });
const dev = createDeveloper({ name: "JS Dev", email: "coder@gam.com" });

// console.log(newEmp.getEmail(), newEmp.getPayCheck(), newEmp.giveRaise(1000));
console.log(dev);

#javascript

writing a==b==c

write in this way 

if(result1 == result2 && result1 == result3)

#javascript

importance of parseInt

var a =  10/6;
console.log(a);
//The parseInt() converts the numeric string value to an integer value.



output
VM54430:2 1.6666666666666667

#javascript

instance of

var color = "red";
var color2 = {};
color instanceof String // will return true
color2 instanceof Object // will return true


--------------------------------------------------------------------

function Phone(serial, price, color){
  this.serial = serial;
  this.price = price;
  this.color = color;
}

let phone1 = new Phone('abc1', 200, 'red');
let phone2 = new Phone('abc2', 400, 'green');

//instanceof 
console.log(phone1 instanceof Phone) // true

//constructor
console.log(phone1.constructor === Phone) //true

#javascript

javascript html add

 const a = parseInt(prompt('enter 1 no '));
 const sum =    Math.sqrt(a);
 console.log(sum);
 document.getElementById('root').innerHTML =`<h1> ${sum} </h1>`;
---------------------------------------------------
precision code 

4.1
3.3000000000000003
7.789999999999999
3
0.3666666666666667
If you don’t want or need the precision shown above, you can format a number to a
fixed precision:
var x = 3;
var y = 1.1;
var z = x * y;
print(z.toFixed(2)); // displays 3.30

#javascript

Socket IO setup (client js)

const socket = io.connect();

#javascript

listFontFamilies

function listFonts() {
  let { fonts } = document;
  const it = fonts.entries();

  let arr = [];
  let done = false;

  while (!done) {
    const font = it.next();
    if (!font.done) {
      arr.push(font.value[0].family);
    } else {
      done = font.done;
    }
  }

  // converted to set then arr to filter repetitive values
  return [...new Set(arr)];
}

#javascript

foreach - For..In loops in JavaScript - key value pairs - Stack Overflow

const test = {a: 1, b: 2, c: 3};

for (const [key, value] of Object.entries(test)) {
  console.log(key, value);
}

#javascript

js for loop object entries

// Looping through arrays created from Object.keys
const keys = Object.keys(fruits)
for (const key of keys) {
  console.log(key)
}

// Results:
// apple
// orange
// pear

#javascript

prototypes in JS

function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}

Person.prototype.nationality = "English";

var myFather = new Person("John", "Doe", 50, "blue");
console.log("The nationality of my father is " + myFather.nationality)

#javascript

play.elevatorsaga.com

#1
elevator.on("floor_button_pressed", function(floorNum) {
 elevator.goToFloor(floorNum);
});

#2
elevator.on("stopped_at_floor", function(floorNum) {
  elevatorFloorNum = floorNum;
});

#3
elevator1.on("idle", function() { 
 if(elevator1.currentFloor() > 0)
     elevator1.goToFloor(elevator1.currentFloor()-1);
 else
  elevator1.goToFloor(elevator1.currentFloor()+1);
});
elevator1.on("floor_button_pressed", function(floorNum) {
 elevator1.goToFloor(floorNum);
});
elevator1.on("stopped_at_floor", function(floorNum) {
  elevatorFloorNum1 = floorNum;
});

#4

#javascript

addParamIntoUrl

function addParamIntoUrl(param, value) {
  const currentUrl = window.location.href
  const newparam = currentUrl.indexOf('?') > -1 ? `&${param}=${value}` : `?${param}=${value}`
  const newurl = currentUrl + newparam

  window.history.pushState({ path: newurl }, '', newurl)
}

#javascript

a

class MousePositionObservable {
  constructor() {
    this.subscriptions = [];
    window.addEventListener('mousemove',this.handleMouseMove);
  }
  handleMouseMove =  (e) => {
     this.subscriptions.forEach(sub => sub(e.clientX, e.clientY));
  }
  subscribe(callback) {
    this.subscriptions.push(callback);    

    return () => {
      this.subscriptions = this.subscriptions.filter(cb => cb === callback);
    }
  }
}

#javascript #react.js

react useDebounce

import { useCallback, useRef } from 'react';
export default function useDebounce(callback, delay = 400) {
  const debounce = useRef(null);
  return useCallback(
    (...args) => {
      const context = this;
      clearTimeout(debounce.current);
      debounce.current = setTimeout(() => {
        callback.apply(context, args);
      }, delay);
    },
    [callback, delay],
  );
}

/* 
Usage:

const handleWindowResize = useDebounce(SetWindow)

useEffect(() => {
window.addEventListener('resize', handleResize)
*/

#javascript #debounce

Debounce function

function debounce(func, wait, immediate) {
  var timeout;

  return function executedFunction() {
    var context = this;
    var args = arguments;
	    
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };

    var callNow = immediate && !timeout;
	
    clearTimeout(timeout);

    timeout = setTimeout(later, wait);
	
    if (callNow) func.apply(context, args);
  };
};

#javascript

javascript - Filter collection based on values in array in Ramda - Stack Overflow

const {curry, filter, contains, prop} = R

const collection = [{ type: 1, eyes: 'blue'},{ type: 2, eyes: 'brown'}, { type: 3, eyes: 'green'}, { type: 4, eyes: 'blue'}]
const array = [1, 2, 4]

const filterBy = curry((propName, selectedValues, collection) => 
  filter(e => contains(prop(propName, e), selectedValues), collection))

const newCollection = filterBy('type', array, collection)

console.log(newCollection)

#javascript

Profile - Roblox

<span class="rbx-text-navbar-right text-header" id="nav-robux-amount">0</span>

#javascript #vue.js

Vue I18n (vuex)

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    lang: null  // 存放使用者選用的語系
  },
  mutations: {
    // 切換語系設定
    setLang (state, value) {
      state.lang = value;
    }
  },
  actions: {},
  modules: {}
});

#javascript #vue.js

Vue I18n ( main.js )

import Vue from "vue";
import App from "./App.vue";
import store from "./store";

import VueI18n from 'vue-i18n'  // 引入 Vue I18n
import zh from './i18n/zh'      // 存放中文語系檔
import en from './i18n/en'      // 存放英文語系檔

Vue.use(VueI18n)

// 預設使用的語系
let locale = 'en';

// 檢查 localStorage 是否已有保存使用者選用的語系資訊
if (localStorage.getItem('footmark-lang')) {
  locale = localStorage.getItem('footmark-lang');
  store.commit('setLang', locale);
} else {
  store.commit('setLang', locale);
}

const i18n = new VueI18n({
  locale: locale,
  messages: {
    'zh': zh,
    'en': en
  }
});

Vue.config.productionTip = false;

new Vue({
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

#javascript

Test

sdfsfsdf

#javascript

Count total snippets in your 'thiscodeworks' profile

// Run this from the chrome console
let count = 0; document.querySelectorAll('.single-item').forEach(() => count++);console.log(`%c ${count} snippets`, 'background-color: white; color: darkblue')

#javascript

Menu Item active depending on the page

<script>

$(function() {
  var loc = window.location.href; // returns the full URL
  if(/about-us.html/.test(loc)) {
    $('#lihome').removeClass('current');
    $('#liabout').addClass('current');
  }
  if(/services.html/.test(loc)) {
    $('#lihome').removeClass('current');
    $('#liservices').addClass('current');
  }
  if(/our-work.html/.test(loc)) {
    $('#lihome').removeClass('current');
    $('#liwork').addClass('current');
  }
  if(/contact-us.html/.test(loc)) {
    $('#lihome').removeClass('current');
    $('#licontact').addClass('current');
  }

});

</script>

#javascript

GaleryComponent

import React, { useEffect, useState } from 'react';
import $ from 'jquery';
import axios from 'axios';
import lazy from '../scripts/lazyLoad.js';
import picSelected from '../scripts/picSelected.js';
import ImageModal from '../scripts/ImageModal.js';
import Zoom from '../scripts/zoomImage.js';
import { Thumbnails } from './styles/Container.style';
import { PortalImg, ImgZoom } from '../components/styles/Container.style';
import { BsFullscreen} from 'react-icons/bs';
import { ImArrowLeft, ImArrowRight} from 'react-icons/im';

const GaleryComponent = ({ productID, styleIndex, widenFn }) => {
  const [styleProduct, setStyleProduct] = useState([]);
  const [picIndex, setPicIndex] = useState(1);
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    axios
      .get(
        `https://app-hrsei-api.herokuapp.com/api/fec2/hr-sfo/products/${productID}/styles`,
        {
          headers: {
            Authorization: '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',
          },
        }
      )
      .then((res) => {
        let i = 0;
        setStyleProduct([]);
        res.data.results[styleIndex].photos.map((item) =>
          //item.url = item.url.replace(/&w=\d+/, "&w=10");
          setStyleProduct((prevState) => [
            ...prevState,
            { id: i++, thumbnail: item.thumbnail_url, url: item.url },
          ])
        );
      })
      .catch((error) => {
        console.error(error);
      });
  }, [styleIndex]);

  const carrousel = (dir) => {
    if (dir < 0) {
      if (picIndex > 0) {
        setPicIndex(picIndex + dir);
      }
    } else {
      if (picIndex < styleProduct.length - 1) {
        setPicIndex(picIndex + dir);
      }
    }

    if (picIndex + dir <= 0) {
      $('.previousPic').hide();
    } else {
      $('.previousPic').show();
    }

    if (picIndex + dir >= styleProduct.length - 1) {
      $('.nextPic').hide();
    } else {
      $('.nextPic').show();
    }
  };

  const scrollFn = () => {
    $('.thumbnails').animate({ scrollTop: +400 }, 1000);
  };

  const scrollFnTop = () => {
    $('.thumbnails').animate({ scrollTop: -400 }, 1000);
  };

  return (
    <div style={{ position: 'relative' }}>
      <span
        style={{
          position: 'absolute',
          top: '20px',
          right: '20px',
          color: 'white',
          fontSize: '2rem',
          cursor: 'pointer',
        }}
        onClick={widenFn}
      >
        <BsFullscreen />
      </span>

      <span
        style={{
          position: 'absolute',
          top: '50%',
          left: '80px',
          fontSize: 'xx-large',
          textShadow: '3px 1px 0px #ffffffed, 5px 0px 0px rgb(0 0 0 / 15%)',
          cursor: 'pointer',
        }}
        className="previousPic"
        onClick={() => carrousel(-1)}
      >
        <ImArrowLeft  style={{color: 'white'}} />
      </span>
      <span
        style={{
          position: 'absolute',
          top: '50%',
          right: '20px',
          fontSize: 'xx-large',
          textShadow: '3px 1px 0px #ffffffed, 5px 0px 0px rgb(0 0 0 / 15%)',
          cursor: 'pointer',
        }}
        className="nextPic"
        onClick={() => carrousel(1)}
      >
        <ImArrowRight  style={{color: 'white'}} />
      </span>
      <Thumbnails className="thumbnails">
        {styleProduct.map((item) => (
          <img
            style={{
              display: 'block',
              marginBottom: '15px',
              marginLeft: '20px',
              border: '2px solid white',
            }}
            width="40px"
            height="40px"
            src={item.thumbnail}
            onClick={() => {
              setPicIndex(item.id);
              picSelected.SelectImg(item.id);
            }}
            data-id={item.id.toString()}
          />
        ))}
      </Thumbnails>

      <span
        style={{
          position: 'absolute',
          top: '5px',
          left: '35px',
          cursor: 'pointer',
          color: 'white',
          textShadow:
            'rgba(0,0,0, 0.4) 0px 5px, rgba(0,0,0, 0.3) 0px 10px, rgba(0,0,0, 0.2) 0px 15px, rgba(0,0,0, 0.1) 0px 20px, rgba(0,0,0, 0.05) 0px 25px',
        }}
        // onClick={picSelected.ScrollThumbnails}
        onClick={scrollFnTop}
        className="scrollClassTop"
      >
        ▲
      </span>

      <span
        style={{
          position: 'absolute',
          top: '318px',
          left: '35px',
          cursor: 'pointer',
          color: 'white',
          textShadow:
            'rgb(0 0 0 / 40%) 0px -5px, rgb(0 0 0 / 30%) 0px -10px, rgb(0 0 0 / 20%) 0px -15px, rgb(0 0 0 / 10%) 0px -20px, rgb(0 0 0 / 5%) 0px -25px',
        }}
        // onClick={picSelected.ScrollThumbnails}
        onClick={scrollFn}
        className="scrollClass"
      >
        ▼
      </span>
      <div style={{ display: 'flex', maxHeight: '600px' }}>
        {styleProduct[picIndex] && (
          <img
            width="100%"
            height="600px"
            src={styleProduct[picIndex].url.replace(/&w=\d+/, '&w=10')}
            onClick={() => setIsOpen(!isOpen)}
          />
        )}
      </div>
      {styleProduct[picIndex] && (
        <ImageModal
          isOpen={isOpen}
          imgUrl={styleProduct[picIndex].url}
          onClickPic={setIsOpen}
        />
      )}
      {lazy.leazyImg()}
    </div>
  );
};

export default GaleryComponent;
// {lazy.leazyImg()}
// <ImgZoom srcImg={imgUrl} height={hauteur} width={longuer} />

#javascript

Seachable Datatable js

import { LightningElement, api, track } from 'lwc';

export default class SearchableDataTable extends LightningElement {

    @api keyField;
    @api tableData;
    @api columns;
    @api tableStyle;
    @api cssClass;
    @api columnWidthsMode;
    @api defaultSortDirection;
    @api draftValues;
    @api enableInfiniteLoading;
    @api errors;
    @api hideCheckboxColumn;
    @api hideTable;
    @api isLoading;
    @api loadMoreOffset;
    @api maxColumnWidth;
    @api maxRowSelection;
    @api minColumnWidth;
    @api resizeColumnDisabled;
    @api resizeStep;
    @api rowNumberOffset;
    @api selectedRows;
    @api showRowNumberColumn;
    @api sortedBy;
    @api sortedDirection;
    @api suppressBottomBar;
    @api wrapTextMaxLines;

    @api searchPlaceholder;
    @track searchText;
    
    @track filteredData;
    @track isGettingIcons;

    get dataForTable() {
        return (this.filteredData && this.filteredData.length > 0) ? this.filteredData : this.tableData;
    }

    connectedCallback() {
        this.isGettingIcons = true;
    }

    renderedCallback() {
        if (this.isGettingIcons) {
            this.isGettingIcons = false;
        }
    }

    onRowSelection(event){
        const rowSelectedEvent = new CustomEvent('rowselection', { detail: event.detail });
        this.dispatchEvent(rowSelectedEvent);
    }

    filterRows(event) {
        let searchText = event.target.value;
        if (searchText && searchText.length > 0) {
            this.filteredData = this.tableData.filter(row => {
                let  concatRow = '';
                this.columns.forEach(column => {
                    concatRow += row[column.fieldName];
                });
                return concatRow.toLowerCase().includes(searchText.toLowerCase());
            });
        }

    }

}

#javascript

XML for LWC Flow

 <targets>
        
        <target>lightning__FlowScreen</target>
        
    </targets>
    
    <targetConfigs>
        
        <targetConfig targets="lightning__FlowScreen" category="Input">
            
            <property name="value" label="Value" type="String" description="The selected value(Output). This can be passed into QuickChoice, allowing you to set the default value dynamically(Input)."/>
            
            <property name="selectedLabel" label="Selected Label" type="String" role="outputOnly" description="The selected Label (V1.3+)"/>
            
            <property name="icon" label="Icon" type="String" description="Icon name for example standard:account"/>
            
            <propertyType name="T" extends="SObject" label="Flexcard Object API Name" description="Specify the API Name of the SObject to use in the Flexcard"/>
            
            <property name="objectAPIName" label="Object API Name" type="String" role="inputOnly" description="The SObject API Name used to query fields and values"/>
            
            <property name="records" label="Card Data Record Collection" type="{T[]}" role="inputOnly" description="Record Collection variable containing the records to display in the flexcard."/>
            
            <property name="visibleFieldNames" label="Visible Field Names" type="String" default="Id" required="true" description="Show which fields?"/>
            
            <property name="visibleFlowNames" label="Visible Flow Names" type="String" description="Show which flow?"/>
            
            <property name="cardSize" role="inputOnly" label="Box Size" type="Integer" required="true" default="300" description="The size of the box in pixels. The box is a square."/>
            
            <property name="isClickable" role="inputOnly" label="isClickable" type="Boolean" default="false" description="Set as true if you wish to select individual cards for action further downstream in flow default is false"/>
            
            <property name="Cardcss" label="Card CSS" default="card" type="String"/>
            
            <property name="headerStyle" label="Header Style" type="String" description="Add your own style attribute to the card headers ie. background-color:red;"/>
            
            <property name="allowMultiSelect" label="Allow Multi-Select" type="Boolean" default="false" description="Allow for multiselect of cards when enabled checkboxes appear on cards and adds selected cards to collection"/>
            
            <property name="selectedRecordIds" label="Selected Record Ids" type="String[]" role="outputOnly" description="String Collection of selected Record ID's"/>
            
        </targetConfig>
        
    </targetConfigs>

#javascript #react #table

Reusable Header for React Table

import React from "react";
import PropTypes from "prop-types";

const Header = ({ title }) => {
  return (
    <header className="header">
      <h1>{title}</h1>
    </header>
  );
};

Header.propTypes = {
  title: PropTypes.string.isRequired,
};

export default Header;


///// ----- USING IT -------
import Header from "./components/Header";
<Header title="New Pixar Movies" />

#javascript #react #table

Reusable React Table with break points

import React from "react";
import PropTypes from "prop-types";

const Table = ({ tableData, headingColumns, title, breakOn = "medium", onItemClick, onHeadingClick, headingColumnFields }) => {
  let tableClass = "table-container__table";

  if (breakOn === "small") {
    tableClass += " table-container__table--break-sm";
  } else if (breakOn === "medium") {
    tableClass += " table-container__table--break-md";
  } else if (breakOn === "large") {
    tableClass += " table-container__table--break-lg";
  }

  const data = tableData.map((row, index) => {
    let rowData = [];
    let i = 0;

    for (const key in row) {
      rowData.push({
        key: headingColumns[i],
        val: row[key],
      });
      i++;
    }

    return (
      <tr key={index} onClick={()=>onItemClick(index)}>
        {rowData.map((data, index) => (
          <td key={index} data-heading={data.key}>
            {data.val}
          </td>
        ))}
      </tr>
    );
  });

  return (
    <div className="table-container">
      <div className="table-container__title">
        <h2>{title}</h2>
      </div>
      <table className={tableClass}>
        <thead>
          <tr>
            {headingColumns.map((col, index) => (
              <th key={index}  onClick={() => onHeadingClick(headingColumnFields[index])}>{col}</th>
            ))}
          </tr>
        </thead>
        <tbody>{data}</tbody>
      </table>
    </div>
  );
};

Table.propTypes = {
  tableData: PropTypes.arrayOf(PropTypes.object).isRequired,
  headingColumns: PropTypes.arrayOf(PropTypes.string).isRequired,
  title: PropTypes.string.isRequired,
  breakOn: PropTypes.oneOf(["small", "medium", "large"]),
  onItemClick: PropTypes.func.isRequired,
  onHeadingClick: PropTypes.func.isRequired,
  headingColumnFields: PropTypes.arrayOf(PropTypes.string).isRequired
};

export default Table;



// ------ USING THE TABLE -------
import Table from "./components/Table";
        {data ? (
          <Table
            tableData={data.results.sort(sortMovies).map((movie) => {
              return [
                data.title,
                new Date(data.release_date).toLocaleDateString(
                  undefined,
                  options
                ),
              ];
            })}
            headingColumns={["Title", "Release Date"]}
            title="Pixar Movies"
            breakOn="small"
            onItemClick={handleClick}
            onHeadingClick={handleSort}
            headingColumnFields={["title", "release_date"]}
          />
        ) : null}

#javascript #useref

javascript - React: [useRef, scrollIntoView,] How to only autoscroll a specific div inside of an overflowing page? - Stack Overflow

   messagesRef.current.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "start"
    });

#javascript #interview

javascript - What's the difference between using "let" and "var"? - Stack Overflow

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar); // Foo Bar

  {
    var moo = "Mooo"
    let baz = "Bazz";
    console.log(moo, baz); // Mooo Bazz
  }

  console.log(moo); // Mooo
  console.log(baz); // ReferenceError
}

run();

#javascript

Game Config

const config = {
  width: 400,
  height: 500,
  backgroundColor: 0xffff77
}

const game = new Phaser.Game(config)

#javascript

Assigning using += gives NaN in javascript - Stack Overflow

test['value'] = (typeof test['value']==='undefined') ? 10 : test['value']+10;

#javascript

reactjs - how to scale (large) font-awesome icons from the react-icons package - Stack Overflow

// Font awesome pixel sizes relative to the multiplier. 
// 1x - 14px
// 2x - 28px
// 3x - 42px
// 4x - 56px
// 5x - 70px

<FaFolderOpen size={70} />

#html #css #javascript #udacity #course

data structures: Udemy

/*  Big O  */

  let performance = performance.now();
  //This can be used to measure the Performance of the code.
  // Use this before the code and after code, It will show the 'performace'


Rules:
 1 : Worst cast
 2 : Remove Constants
 


/* XXXXXXXX--XXXXXX */

/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */

#javascript #vue.js #nuxt

Persist Vuex States

import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState()(store)
}

#javascript

Class Constructor Basic

class Person {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}

#javascript

Infinity Scroll

window.onscroll = async () => {
  const scrollHeight = document.documentElement.scrollHeight
  const scrollTop = document.documentElement.scrollTop
  const clientHeight = document.documentElement.clientHeight
  if (scrollTop + clientHeight > scrollHeight - 5) {
    
    // .. API async Fetch

  }
}

#javascript

JSON Tutorial - Learn How to Use JSON with JavaScript

jsPerson = JSON.parse(jsonPerson)

#nodejs #javascript #postman

Pass value to callback as object

// From postman:
{
    "select": {"productName": "Skykick"}
}

// In file:
    req.body.select,

#javascript #jquery

include jquery via dev tools console

var jQueryScript = document.createElement('script'); jQueryScript.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'); document.head.appendChild(jQueryScript);

#javascript #react.js

Handle multiple checkbox in react (array of selected options)

const { whatsAppTopics, selectedTopics, setSelectedTopics } = useContext(
    WhatsAppConfigContext
  );

  function handleChangeCheckBox(e) {
    const clickedTopic = e.target;
    if (clickedTopic.checked) {
      setSelectedTopics([...selectedTopics, clickedTopic.value]);
    }
    if (!clickedTopic.checked) {
      const updatedSelectedTopics = selectedTopics.filter(
        (selectedTopic) => selectedTopic !== clickedTopic.value
      );

      setSelectedTopics(updatedSelectedTopics);
    }
  }

#javascript

show all hidden elements on page

$("body *:hidden:not(script, style)").each(function() {
    if ($(this).css("display") == "none") {
        $(this)[0].style.display = "block";
    }
  });

#javascript

Python - JSON Separator

json.dumps(x, indent=4, separators=(". ", " = "))

#javascript #ct #conversion_tracking

Conversion Tracking

<!-- Begin "Form submit callback" || Help center -->
<!-- Insert in Settings->Javascript->Header -->
<!-- CS:20200120-04-0 -->
<script>
window.instapageFormSubmitSuccess = function(form){
      var capterra_vkey = 'VENDOR KEY GOES HERE - FROM CT CODE',
      capterra_vid = 'VENDOR ID GOES HERE - FROM CT CODE',
      capterra_prefix = (('https:' == document.location.protocol)
        ? 'https://ct.capterra.com' : 'http://ct.capterra.com');
      var ct = document.createElement('script');
      ct.type = 'text/javascript';
      ct.async = true;
      ct.src = capterra_prefix + '/capterra_tracker.js?vid='
        + capterra_vid + '&vkey=' + capterra_vkey;
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ct, s);
};
</script>
<!-- End "Form submit callback" || Help center -->

#javascript

javascript - Return from a promise then() - Stack Overflow

function justTesting(input) {
    return new Promise(function(resolve, reject) {
        // some async operation here
        setTimeout(function() {
            // resolve the promise with some value
            resolve(input + 10);
        }, 500);
    });
}

justTesting(29).then(function(val) {
   // you access the value from the promise here
   log(val);
});

// display output in snippet
function log(x) {
    document.write(x);
}

#javascript

function IF ELSE

function min(a, b) {
  if (a < b) return a;
  else return b;
}

console.log(min(0, 10));
// → 0
console.log(min(0, -10));
// → -10

#javascript

IF ELSE Statement

let size = 8;

let board = "";

for (let y = 0; y < size; y++) {
  for (let x = 0; x < size; x++) {
    if ((x + y) % 2 == 0) {
      board += " ";
    } else {
      board += "#";
    }
  }
  board += "\n";
}

console.log(board);

#javascript

Conditional Loop

for (let n = 1; n <= 100; n++) {
  let output = "";
  if (n % 3 == 0) output += "Fizz";
  if (n % 5 == 0) output += "Buzz";
  console.log(output || n);
}

#javascript

Triangle Loop

for (let line = "<^^>"; line.length < 8; line += "<^^>")

#javascript

How to create an https server? | Node.js

const https = require('https');
const fs = require('fs');

const options = {
  key: fs.readFileSync('key.pem'),
  cert: fs.readFileSync('cert.pem')
};

https.createServer(options, function (req, res) {
  res.writeHead(200);
  res.end("hello world\n");
}).listen(8000);

#javascript

Switch php version in Ubuntu terminal

sudo update-alternatives --set php /usr/bin/php7.4
sudo update-alternatives --set phar /usr/bin/phar7.4
sudo update-alternatives --set phar.phar /usr/bin/phar.phar7.4

#javascript

Convert javascript dot notation object to nested object { 'ab.cd.e' : 'foo', 'ab.cd.f' : 'bar', 'ab.g' : 'foo2' }

//expected result {ab: {cd: {e:'foo', f:'bar'}, g:'foo2'}}

function deepen(obj) {
  const result = {};

  // For each object path (property key) in the object
  for (const objectPath in obj) {
    // Split path into component parts
    const parts = objectPath.split('.');

    // Create sub-objects along path as needed
    let target = result;
    while (parts.length > 1) {
      const part = parts.shift();
      target = target[part] = target[part] || {};
    }

    // Set value at end of path
    target[parts[0]] = obj[objectPath]
  }

  return result;
}

// For example ...
console.log(deepen({
  'ab.cd.e': 'foo',
  'ab.cd.f': 'bar',
  'ab.g': 'foo2'
}));

#javascript #nodejs #nvm #npm

Update to latest version of Nodejs with nvm

//To see all versions of Node that are installed on your machine use the command:
$ npm -v

//To see versions installed on machine

$ nvm ls
->      v16.1.0
         system
default -> node (-> v16.1.0)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v16.1.0) (default)
stable -> 16.1 (-> v16.1.0) (default)

// add a new version
$ nvm install <version>
  
// to switch to a different verison
  
$ nvm use <version>

#json #javascript #pretty #stringify

Pretty JSON Output

https://www.samanthaming.com/tidbits/45-pretty-json-output/

#javascript

javascript - Image convert to Base64 - Stack Overflow

//js
function readFile() {
  
  if (this.files && this.files[0]) {
    
    var FR= new FileReader();
    
    FR.addEventListener("load", function(e) {
      document.getElementById("img").src       = e.target.result;
      document.getElementById("b64").innerHTML = e.target.result;
    }); 
    
    FR.readAsDataURL( this.files[0] );
  }
  
}

document.getElementById("inp").addEventListener("change", readFile);


//html
<input id="inp" type='file'>
<p id="b64"></p>
<img id="img" height="150">

#javascript

Run JavaScript in the Console - Chrome Developers

function add(a, b=20) {
  return a + b;
}

#javascript

Quick sort

function partition(arr, startIndex, endIndex) {

  const pivotVal = arr[endIndex]; // the pivot element

  let index = startIndex;

  // begin iterate and swap

  for (let i = index; i < endIndex; i++) {

    if (arr[i] < pivotVal) {

      [arr[i], arr[index]] = [arr[index], arr[i]];

      index += 1;

    }

  }

  // move `pivotVal` to the middle index and return middle index

  [arr[index], arr[endIndex]] = [arr[endIndex], arr[index]];

  return index;

}

function quickSort(arr, startIndex, endIndex) {

  // Base case or terminating case

  if (startIndex >= endIndex) {

    return;

  }

  // Returns midIndex / pivot index

  let midIndex = partition(arr, startIndex, endIndex);

  // Recursively apply the same logic to the left and right subarrays

  quickSort(arr, startIndex, midIndex - 1);

  quickSort(arr, midIndex + 1, endIndex);

}

let arr = [-2, 4, 6, 3, 7, 2];

quickSort(arr, 0, arr.length - 1);

console.log(arr); // [-2, 2, 3, 4, 6, 7]

#javascript

Merge sort

const _mergeArrays = (a, b) => {

  const c = []

  while (a.length && b.length) {

    c.push(a[0] > b[0] ? b.shift() : a.shift())

  }

  //if we still have values, let's add them at the end of `c`

  while (a.length) {

    c.push(a.shift())

  }

  while (b.length) {

    c.push(b.shift())

  }

  return c

}

const mergeSort = (a) => {

  if (a.length < 2) return a

  const middle = Math.floor(a.length / 2)

  const a_l = a.slice(0, middle)

  const a_r = a.slice(middle, a.length)

  const sorted_l = mergeSort(a_l)

  const sorted_r = mergeSort(a_r)

  return _mergeArrays(sorted_l, sorted_r)

}

#javascript

(1) Profile - Roblox

<span class="rbx-text-navbar-right text-header" id="nav-robux-amount">960</span>

#javascript

читер в ROBLoX - YouTube

<yt-formatted-string id="subscriber-count" class="style-scope ytd-c4-tabbed-header-renderer" aria-label="45 подписчиков">457 подписчиков</yt-formatted-string>

#javascript

(1) Profile - Roblox

<span class="rbx-text-navbar-right text-header" id="nav-robux-amount">600</span>

#object #array #javascript #vanilla

Checking if objects in array fulfill a condition - Array.every, Array.includes

cars.some(car => car.color === "red" && car.type === "cabrio");
// output: true

cars.every(car => car.capacity >= 4);
// output: false

#object #array #javascript #vanilla

Sort an array by a property - Array.sort

let sortedCars = cars.sort((c1, c2) => (c1.capacity < c2.capacity) ? 1 : (c1.capacity > c2.capacity) ? -1 : 0);
console.log(sortedCars);
// output:
// [
//   {
//     color: 'purple',
//     type: 'minivan',
//     registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 7
//   },
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   ...
// ]

#object #array #javascript #vanilla

Sort an array by a property - Array.sort

cars.forEach(car => {
 car['size'] = "large";
 if (car.capacity <= 5){
   car['size'] = "medium";
 }
 if (car.capacity <= 3){
   car['size'] = "small";
 }
});

#object #array #javascript #vanilla

Add a property to every object of an array - Array.forEach

cars.forEach(car => {
 car['size'] = "large";
 if (car.capacity <= 5){
   car['size'] = "medium";
 }
 if (car.capacity <= 3){
   car['size'] = "small";
 }
});

#object #array #javascript #vanilla

Transform objects of an array - Array.map

let sizes = cars.map(car => {
  if (car.capacity <= 3){
    return "small";
  }
  if (car.capacity <= 5){
    return "medium";
  }
  return "large";
});
console.log(sizes);
// output:
// ['large','medium','medium', ..., 'small']

//create a new object if we need more values:

let carsProperties = cars.map(car => {
 let properties = {
   "capacity": car.capacity,
   "size": "large"
 };
 if (car.capacity <= 5){
   properties['size'] = "medium";
 }
 if (car.capacity <= 3){
   properties['size'] = "small";
 }
 return properties;
});
console.log(carsProperties);
// output:
// [
//   { capacity: 7, size: 'large' },
//   { capacity: 5, size: 'medium' },
//   { capacity: 5, size: 'medium' },
//   { capacity: 2, size: 'small' },
//   ...
// ]

#javascript #vanilla #rgbtohex #hextorgb

RGB to Hex / Hex to RGB

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

alert(rgbToHex(0, 51, 255)); // #0033ff

//OR

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

alert(hexToRgb("#0033ff").g); // "51";

//hexToRgb() that also parses a shorthand hex triplet such as "#03F"
function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

alert(hexToRgb("#0033ff").g); // "51";
alert(hexToRgb("#03f").g); // "51";

#react.js #javascript #react

React Context API

//Provider Component
import React, { Component } from 'react';

// Create new context
const MyContext = React.createContext();

// Create the Provider that will pass down state and methods to the rest of the application.
class MyProvider extends Component {
  state = {
    name: 'Dominic',
    age: 28,
  };
  render() {
    return (
      <MyContext.Provider value={{
        state: this.state,
        addYear: () => this.setState({
          age: this.state.age + 1
        })
      }}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

// Create the consumer that will consume the data provided by the Provider.
class Company extends Component {
  render() {
    return(
      <div className="company">
        <MyContext.Consumer>
          {(context) => (
            //Fragment added here since you can only return one child
            <>
              <p>Welcome to {context.state.name}</p>
              <p>We are {context.state.age} years old!</p>
              <button onClick={context.addYear}>Add Year</button>
            </>
          )}
        </MyContext.Consumer>
      </div>
    )
  }
}

// We'll nest our Consumer inside another component just to show that we don't need to pass props to each component.
const Companies = () => (
  <div>
    <Company />
  </div>
)

class App extends Component {
  render() {
    return (
      // Ensure the provider wraps all the components you want to share data between.
      <MyProvider>
        <div className="App">
          <Companies />
        </div>
      </MyProvider>
    );
  }
}

export default App;

#react.js #javascript #react #usestate #setstate

Toggle State with Hooks

import React, { useState } from 'react'

const MyComponent = () => {
  const [toggle, setToggle] = useState(false)

  return(
    <>
      <button onClick={() => setToggle(!toggle)}>Toggle Dropdown Markup</button>
      {toggle && (
        <ul>
          <li>Show me</li>
          <li>Only when</li>
          <li>Toggle === true</li>
        </ul>
      )}
    </>
  )
}

#react.js #javascript #react #usestate #setstate

React State with Hooks Demo

//app.js
import React, { useState } from 'react';
import './App.css';

function App() {
  const [firstDieResult, setFirstDieResult] = useState(1);
  const [secondDieResult, setSecondDieResult] = useState(6);
  //OR
  //const [diceResult, setDiceResult] = useState({
  	//firstDieResult: 1,
  	//secondDieResult: 6,
	//});

  const firstDieImage = require(`./assets/${firstDieResult}.png`);
  const secondDieImage = require(`./assets/${secondDieResult}.png`);

  function rollDice() {
    setFirstDieResult(Math.floor(Math.random() * 6) + 1);
    setSecondDieResult(Math.floor(Math.random() * 6) + 1);
  }

  return (
    <div className="App">
      <header className="App-header">
        <div style={{ display: 'flex', margin: 20 }}>
          <img src={firstDieImage} className="die" alt="Die one" />
          <img src={secondDieImage} className="die" alt="Die two" />
        </div>
        <span>{firstDieResult + secondDieResult}</span>
        <button className="button" onClick={rollDice}>Roll</button>
      </header>
    </div>
  );
}

export default App;

//css

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(16px + 2vmin);
  color: white;
}

.die {
  width: 50px;
  height: 50px;
  margin: 10px;
}

.button {
  margin-top: 20px;
  outline: none;
  animation: button-gradient 25s ease infinite;
  background-image: -webkit-linear-gradient(65deg,#21d4fd,#b721ff 50%,#017eff);
  background-image: linear-gradient(25deg,#21d4fd,#b721ff 50%,#017eff);
  background-size: 500%;
  border: none;
  border-radius: 3px;
  box-shadow: 0 3px 0 0 #5664a7;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  height: 40px;
  width: 150px;
}

.button:hover {
  box-shadow: 0 2px 0 0 #5664a7;
}

.button:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.05);
}
// get images => https://upmostly.com/wp-content/uploads/react-dice-assets.zip

#react.js #javascript #react #usestate

setState Callback in a Functional Component

import React, { useEffect, useState } from 'react';

function App() {
  const [age, setAge] = useState(0);
  
  updateAge(value) {
    setDisplayUsaStudents(
            (prevDisplayUsaStudents) => !prevDisplayUsaStudents
          );
    setAge({prevAge: value});
  };

  useEffect(() => {
    if (age !== 0 && age >= 21) {
      // Make API call to /beer
    } else {
      // Throw error 404, beer not found
    }
//the square parentheses with the age state variable inside is called the dependency array. //it tells the useEffect function to listen for any changes to the state of age.
//when age changes, useEffect executes
  }, [age]);

  return (
    <div>
      <p>Drinking Age Checker</p>
      <input
        type="number"
        value={age} 
        onChange={e => setAge(e.target.value)}
      />
    </div>
  );
}

export default App;

#react.js #javascript #react

setState Callback in Class Componenet

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      age: 0,
    };
  }
  
  // this.checkAge is passed as the callback to setState
  updateAge = (value) => {
    this.setState({ age: value}, this.checkAge);
  };

  checkAge = () => {
    const { age } = this.state;
    if (age !== 0 && age >= 21) {
      // Make API call to /beer
    } else {
      // Throw error 404, beer not found
    }
  };

  render() {
    const { age } = this.state;
    return (
      <div>
        <p>Drinking Age Checker</p>
        <input
          type="number"
          value={age}
          onChange={e => this.updateAge(e.target.value)}
        />
      </div>
    );
  }

}

export default App;

#react.js #javascript #react

Simple React Toggle Component with Styling

//app.js
import React, { useState } from 'react';
import './App.css';
import Switch from "./Switch";

function App() {
  const [value, setValue] = useState(false);
  return (
    <div className="app">
      <Switch
        isOn={value}
        onColor="#EF476F"
        handleToggle={() => setValue(!value)}
      />
    </div>
  );
}

export default App;

//Switch.js
import React from 'react';

const Switch = ({ isOn, handleToggle, onColor }) => {
  return (
    <>
      <input
        checked={isOn}
        onChange={handleToggle}
        className="react-switch-checkbox"
        id={`react-switch-new`}
        type="checkbox"
      />
      <label
        style={{ background: isOn && onColor }}
        className="react-switch-label"
        htmlFor={`react-switch-new`}
      >
        <span className={`react-switch-button`} />
      </label>
    </>
  );
};

export default Switch;

//css
.react-switch-checkbox {
  height: 0;
  width: 0;
  visibility: hidden;
}

.react-switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: 100px;
  height: 50px;
  background: grey;
  border-radius: 100px;
  position: relative;
  transition: background-color .2s;
}

.react-switch-label .react-switch-button {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 45px;
  height: 45px;
  border-radius: 45px;
  transition: 0.2s;
  background: #fff;
  box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);
}

.react-switch-checkbox:checked + .react-switch-label .react-switch-button {
  left: calc(100% - 2px);
  transform: translateX(-100%);
}

.react-switch-label:active .react-switch-button {
  width: 60px;
}

#array #react.js #javascript #react #filter #map

Filter an Array of Objects by Value: React

import React from 'react';

const people = [
  {
    name: 'James',
    age: 31,
  },
  {
    name: 'John',
    age: 45,
  },
  {
    name: 'Paul',
    age: 65,
  },
  {
    name: 'Ringo',
    age: 49,
  },
  {
    name: 'George',
    age: 34,
  }
];

function App() {
  return (
    <div>
      {people.filter(person => person.age < 60).map(filteredPerson => (
        <li>
          {filteredPerson.name}
        </li>
      ))}
    </div>
  );
}

export default App;

#array #react.js #javascript #react #filter #map

Filter, then map an array : React

import React from 'react';

const names = ['James', 'John', 'Paul', 'Ringo', 'George'];

function App() {
  return (
    <div>
      {names.filter(name => name.includes('J')).map(filteredName => (
        <li>
          {filteredName}
        </li>
      ))}
    </div>
  );
}

export default App;

#javascript #react.js #vue.js #angular #typescript

Detect if user scrolled to bottom of the page

const { scrollTop, offsetHeight } = document.documentElement;
const { innerHeight } = window;
const bottomOfWindow = Math.round(scrollTop) + innerHeight === offsetHeight;

if (bottomOfWindow) {
  console.log('Bottom of window');
}

#javascript

"I Miss You" Lambda Function

'use strict';

const AWS = require('aws-sdk');

const SNS = new AWS.SNS({ apiVersion: '2010-03-31' });
const PHONE_NUMBER = '1-xxx-xxx-xxxx'; // change it to your phone number

exports.handler = (event, context, callback) => {
    
    const momMessages = ['Mom message one','Mom message two'];
    const dadMessages = ['Dad message one','Dad message two'];
    const siblingMessages = ['Sibling message one','Sibling message two'];
    
    console.log('Received event:', event);

    console.log(`Sending SMS to ${PHONE_NUMBER}`);
    
    //uses randomizer to select one of the predefined messages
    var singleClick = momMessages[Math.floor(Math.random()*momMessages.length)];
    var doubleClick = dadMessages[Math.floor(Math.random()*dadMessages.length)];
    var longClick = siblingMessages[Math.floor(Math.random()*siblingMessages.length)];
    var randomMessage = singleClick;
    
    if(event.clickType == "DOUBLE"){
        randomMessage = doubleClick;
    }
    if(event.clickType == "LONG"){
        randomMessage = longClick;
    }
    
    const params = {
        PhoneNumber: PHONE_NUMBER,
        Message: randomMessage,
    };
    // result will go to function callback
    SNS.publish(params, callback);
};

#javascript

Shallow Copy Example

const employee = {
    name: 'Siddharth',
    age: 35
};

const copyOfEmployee = employee;
console.log(employee, 'employee');
console.log('------------After Modification-----------');
copyOfEmployee.age = 29;
/*
Here you would expect employee object wouldn't change, but copyOfEmployee 
and employee object both share same memory address
*/
console.log(employee, 'employee');

#javascript

Connect to WooCommerce Rest API using Javascript – IT Creative Labs

const wooClientKey = 'ck_00000000000000000000000000';
const wooClientSecret = 'cs_00000000000000000000000000';
const wooUrl = 'https://yoursite.com/wp-json/wc/v3/products';

function basicAuth(key, secret) {
    let hash = btoa(key + ':' + secret);
    return "Basic " + hash;
}

let auth = basicAuth(wooClientKey, wooClientSecret);

function getData(url) {
    jQuery.ajax({
        url: url,
        method: 'GET',
        beforeSend: function (req) {
            req.setRequestHeader('Authorization', auth);
        }
    })
        .done(function (data) {
            console.log(data);
            return data;
        });
}

getData(wooUrl);

#path #javascript #express

javascript - How to go back 1 folder level with __dirname? - Stack Overflow

https://stackoverflow.com/questions/30845416/how-to-go-back-1-folder-level-with-dirname

#html #css #javascript #udacity #course

Udacity : Front end web developer

/* Lesson 01 : HTML-CSS */

  //Blockquotes
  <blockquote cite="mention Source Link Here">
  <p>Ruh-roh--RAGGY!!!</p>
  <footer>—Scooby Doo, <cite>Mystery Incorporated</cite>         </footer>
  </blockquote>

  //List: Description  ( lists with name/value pairs )
  <dl>
    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
   </dl>
  
                  /*   CSS   */

   //Selecting using attributes
    [attr] { }
    [attr=val] { }
    tag[attr] { }
    tag[attr='val'] { }
    [attr~=val] { }


    -----------------XX------------------------
    
                /*  Javascript  */
    
//Spread Operator.
let nums = [4,5,45,235,523,54,314]
console.log(...nums); //It will only show the numbers, It won't show an array.

//Rest Operator.
const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
const [total, subtotal, tax, ...items] = order;
console.log(total, subtotal, tax, items);


 // DOM */

// .innerText: 
It will set/get the  inner text inside the element, But the format will be as shown on the element ( line breaks, spaces will identical to html file.) . It will take CSS into consideration and will return the text that is visibily rendered on the Page. 

//.textContent:
It will set/Get the whole text inside the selected element and it will won't include the line breaks or spaces. 


//Create | Add Text | Append.
let newElem = document.createElement('p');
let data = document.createTextNode("Some Infor..");

newElem.appendChild(data); //Data added to new element.
$("body").appendChild(newElem); // New element added to 'body'

newElem.textContent = 'We can also add text like this...';
----------------------

//insertAdjacentHTML()
: "appendChild()" will always add the data at the end of the element, To resolve this we use 'insertAdjacentHTML()'. It will take 2 arguments. First is the location( one of the 4 method ) and 2nd is the HTML content(text).

Methods:
beforebegin | afterbegin | beforeneed | afterend.

<!--- beforebegin  ---->
  <p>
    <!---  afterbegin ---->
        Existing Text/html content
    <!--- beforeneed  ---->
 </p>
<!---afterend   ---->

**
selectedElem.insertAdjacentElement(methodHere, newElementToAdd);          
          
------------------------

Eg: 
const mainHeading = document.querySelector('#main-heading');
const htmlTextToAdd = '<h2>Skydiving is fun!</h2>';
mainHeading.insertAdjacentHTML('afterend', htmlTextToAdd)

- parentElem.removeChild(childElement); //Pass the element to be deleted in the agument . We can pass the parent element in argument to remove the Parent elem.
- Elem.remove()  //We don't have to mention any arguments.

- Elem.firstElementChild();
- Elem.parentChild();

 // Styling in Javascript */
First Way: 
element.style.property1 = "css stuff";
element.style.property2 = "css stuff";
** Ex:
element.style.width = "50%";
element.style.height = "400px";
**
  
Second Way: ( Better )
element.style.cssText = "width: 50%;padding: 10px 50px;";
Note: "cssText" will overwrite anything that's already in the style attribute  
  
  
 //    Attributes    

element.setAttribute('attribute', attributeValue);

**
aTag.setAttribute('target','_blank');


 //   Classes
Properties:
add() | remove() | toggle() | contains();


elem.className; //It will list all the classes an Combined String.(old way)
or
elem.classList; //It will list all the classes in an ( DOMTokenList ) object.(new way)

elem.classList.add('class-1','class-2',....);//We can assign  single/Multiple classes to the element.

elem.classList.remove('class-1','class-2'); //We can unassign single/multiple classes from the element. 

elemem.classList = 'class-1'; //This will replace all the existing classes assigned to the Element. 

elem.classList.toggle('class1');//to add the class if it doesn't exists or remove it from the list if it does already exist ( other classes are not affected. )

elem.contains('class1'); //returns a boolean based on if the class exists in the list or not


// Events

mouseEvents(document); //It will monitor all the events on docuemnt ( Just for test/practise/fun )

Methods:
addEventListener() | removeEventListener() | dispatchEvent()

addEventListener() and removeEventListener() // Works similarly. ( similar syntax )

//Phases of an Event.
  : Some times events are there on parent and there children. So using Phase events we can change the order ( To fire parent first or the child )

1. Capturing Phase ( parent to child )
  //:It the first phase, Moving from Parent(top) to the selected elem.
 2. At Target Phase  
  // It's the the selected element on which event is attached.
3. Bubbling Phase ( child to parent )
 // It's opposite of capturing, Once the handler is run, It will go back from selected element to the parent element

**
elem.addEventListener('click',()=>{},true)

- By default, It will run in Bubble phase(child first and then parent) .If we pass 3rd argument to 'true' in parentElem.addEventListener()? Then It will run the event in Capturing Phase( Parent will be working first ).


//Node-Name
  //How to know the target element.
if(event.target.nodeName == 'SPAN'){
   //The node name will be always in uppercase.
  takeAction();
}

//To load the HTML content before using the DOM.
document.addEventListener('DOMContentLoaded', function () {
    console.log('the DOM is ready to be interacted with!');
});



**
   {  scrollTo(x, y); }
**  

 /* 
 Lesson 2: Node and Express Environment
 */
  
  > npm list express
  // Return the list of express 'version'. or just check the 'package.json'
  
  
  //Installing packages
  > npm install express
  
  // Express to run server and routes
const express = require('express');

// Start up an instance of app
const app = express();
  

// method '.listen'
const port = 8080;
const server = app.listen(port, listening); //Listening is callback function. 
function listening(){
  console.log("Server runing on Port",port)
}



Methods:
get | post | put | delete

**
  const express = require('express');
  const app = express(); //Creating Instance

  app.get('/', function(req, res ){
    // '/' is the URL Path on the browser. '/' is the           home/root folder on the project.
    // 'request'( Client to server)
    // 'response' ( Server to client )
    res.send("<h1>Jaskaran Singh</h1>");
   })

  app.get('/karan', function(req, res ){
      res.send("<h1>Hi Karan Singh</h1>");
  })
   //It will work for url 'http://localhost:8080/karan'
  
// POST method route
app.post('/', function (req, res) {
  res.send('POST received')
})  

app.listen(8080, ()=>{
    console.log("Runnung....")
   });
**
  // TODO-ROUTES!
app.post('/add', callBack1 )

function callBack1(req, res){
    res.send('Post Received')
  //create a POST route that uses the url /add and sends the response POST received when used to make a request.
}
**
  const data = [];
  app.post('/flavor', addFlavor);

 function addFlavor (req, res) {
  data.push(req.body);
   // A way to store the data
};
**
  let data = []
 app.post('/animal', callBack2 );
 function callBack2(req, res){
  data.push( req.body )   
   //Add a POST route for adding a favorite animal via the path ’/animal’ to an array named data. You will need to create the array as well.
}
**
   /* ------------------------ ------------------*/ 
  
                    /* Async Js */
 : The keyword async before a function makes the function return a promise
  
**
 aync function test(){
   return "Some results...";
   // Since we are using 'aync', test() will be a            asynchrounous function.
 }   
> test(); //It will return a 'pending' Promise
> test().then((res)=>{},(rej)=>{})
**   
**
  const retrieveData = async (url='') =>{ 
  const request = await fetch(url);
  try {
  // Transform into JSON
  const allData = await request.json()
  }
  catch(error) {
    console.log("error", error);
    // appropriately handle the error
  }
}
**
  
//Server and Client side.
//Async Js.

**
const express = require('express');
const app = express();

//Movie Empty List.
let fakeData = {
    animal : 'lion', fact : 'lions are fun'
};
app.get('/fakeAnimalData', getFakeData );
function getFakeData(req, res){
 res.send(fakeData)
}
app.listen(8080, ()=>{
    console.log("Runnung....")
});
// 'localhost:8080/fakeAnimalData'  will return 'fakeData' Object

**
  /*    Chaining Promises    */
  
  
  
 
   /* ------------------------ ------------------*/ 
   /* ------------------------ ------------------*/

#javascript

JavaScript check if variable exists (is defined/initialized)

if (typeof variable !== 'undefined') {
    // the variable is defined
}

#javascript

countNQueensSolutions

window.countNQueensSolutions = function(n) {
  var solutionCount = 0; //fixme


    // means we reached the end of the board.
    // but what if reached the end of the board, but don't have a solution? will that never happen?
  var board = new Board({'n': n});

  // recurse on columns
  var repeat = function(board,j){

    // means we reached the end of the board.
    // but what if reached the end of the board, but don't have a solution? will that never happen?

    if(j >= n){
      return true;
    }



   for(var i = 0; i < n; i++) // loop on rows
   {
      board.togglePiece(i, j);
     if(!board.hasRowConflictAt(i) && !board.hasMajorDiagonalConflictAt(board._getFirstRowColumnIndexForMajorDiagonalOn(i,j))
      && !board.hasMinorDiagonalConflictAt(board._getFirstRowColumnIndexForMinorDiagonalOn(i,j)))
     {
       if(repeat(board, j + 1) === true)
       {
        solutionCount++;
       }

     }
     board.togglePiece(i, j);
   };



    return false;
  }

  repeat(board,0);

  console.log('Number of solutions for ' + n + ' queens:', solutionCount);
  return solutionCount;
};

#javascript

findNQueensSolution

window.findNQueensSolution = function(n) {
  var solution; //fixme
  var done = false;

  // means we reached the end of the board.
  // but what if reached the end of the board, but don't have a solution? will that never happen?
  var board = new Board({'n': n});

  if(n===0){
      return [];
  }
  // recurse on columns
  var repeat = function(board,j){

    // means we reached the end of the board.
    // but what if reached the end of the board, but don't have a solution? will that never happen?


    // we only increment j when we place a rook/queen. so when j reaches n, it means we
    // placed all n rooks/queens, since we reached the end of the board.
    if(j >= n){
      return true;
    }

   for(var i = 0; i < n; i++) // loop on rows
   {
      board.togglePiece(i, j);
     if(!board.hasRowConflictAt(i) && !board.hasMajorDiagonalConflictAt(board._getFirstRowColumnIndexForMajorDiagonalOn(i,j))
      && !board.hasMinorDiagonalConflictAt(board._getFirstRowColumnIndexForMinorDiagonalOn(i,j)))
     {
       if(repeat(board, j + 1) === true)
       {
          if(solution === undefined){
            solution = board;
            done = true;
          }
          return true;
       }

     }
     board.togglePiece(i, j);
     if(done)
      return true;
   };

    return false;
  }

  repeat(board, 0);

  if(solution === undefined){
    solution = board.rows();
  }
  else{
    solution = solution.rows();
  }


  console.log('Single solution for ' + n + ' queens:', JSON.stringify(solution));
  return solution;
};

#javascript

countNRooksSolutions

 var solutionCount = 0; //fixme
  var board = new Board({'n': n});


  // recurse on columns
  var repeat = function(board,j){

    // means we reached the end of the board.
    // but what if reached the end of the board, but don't have a solution? will that never happen?
    if(j >= n){
      return true;
    }

   for(var i = 0; i < n; i++) // loop on rows
   {
      board.togglePiece(i, j);

      // we only check for row conflict, since we never place two items(rooks/queens) in the same column,
      // when we place a piece, we go to the next column straight away.
     if(!board.hasRowConflictAt(i))
     {
       if(repeat(board, j + 1) === true)
       {

        solutionCount++;
        //return true;
       }

     }
     board.togglePiece(i, j);
   }



    return false;
  }

  repeat(board,0);

#javascript

Clock face Guide

import clock from "clock";
import document from "document";

// Tick every second
clock.granularity = "seconds";

let hourHand = document.getElementById("hours");
let minHand = document.getElementById("mins");
let secHand = document.getElementById("secs");

// Returns an angle (0-360) for the current hour in the day, including minutes
function hoursToAngle(hours, minutes) {
  let hourAngle = (360 / 12) * hours;
  let minAngle = (360 / 12 / 60) * minutes;
  return hourAngle + minAngle;
}

// Returns an angle (0-360) for minutes
function minutesToAngle(minutes) {
  return (360 / 60) * minutes;
}

// Returns an angle (0-360) for seconds
function secondsToAngle(seconds) {
  return (360 / 60) * seconds;
}

// Rotate the hands every tick
function updateClock() {
  let today = new Date();
  let hours = today.getHours() % 12;
  let mins = today.getMinutes();
  let secs = today.getSeconds();

  hourHand.groupTransform.rotate.angle = hoursToAngle(hours, mins);
  minHand.groupTransform.rotate.angle = minutesToAngle(mins);
  secHand.groupTransform.rotate.angle = secondsToAngle(secs);
}

// Update the clock every tick event
clock.addEventListener("tick", updateClock);

#javascript #vanilla

Deal cards / split array into two even, randomly populated arrays

function createEqualLengthArray(array1, array2) {
    while(array1.length < array2.length) {
        console.log(array1.length, array2.length)
        let randIdx = Math.floor(Math.random() * array2.length);
        let randElement = array2.splice(randIdx, 1)[0];
        array1.push(randElement)
    }
    return {hand1: array1, hand2: array2}
}
const pokemonCard = [
			{ id: 4, name: "Charmander", type: "fire", base_experience: 62 },
			{ id: 7, name: "Squirtle", type: "water", base_experience: 63 },
			{ id: 11, name: "Metapod", type: "bug", base_experience: 72 },
			{ id: 12, name: "Butterfree", type: "flying", base_experience: 178 },
			{ id: 25, name: "Pikachu", type: "electric", base_experience: 112 },
			{ id: 39, name: "Jigglypuff", type: "normal", base_experience: 95 },
			{ id: 94, name: "Gengar", type: "poison", base_experience: 225 },
			{ id: 133, name: "Eevee", type: "normal", base_experience: 65 },
		],

let hand1 = [];
let hand2 = [...this.props.pokemonCards]
const hands = createEqualLengthArray(hand1, hand2)

#javascript #vanilla

Pad to 3 / three digits / characters

const padToThreeDigits = (num) => (num <= 999 ? `00${num}`.slice(-3) : num);

#javascript

init

$(document).ready(function() {
  window.dancers = [];

  $('.addDancerButton').on('click', function(event) {
    /* This function sets up the click handlers for the create-dancer
     * buttons on dancefloor.html. You should only need to make one small change to it.
     * As long as the "data-dancer-maker-function-name" attribute of a
     * class="addDancerButton" DOM node matches one of the names of the
     * maker functions available in the global scope, clicking that node
     * will call the function to make the dancer.
     */

    /* dancerMakerFunctionName is a string which must match
     * one of the dancer maker functions available in global scope.
     * A new object of the given type will be created and added
     * to the stage.
     */
    var dancerMakerFunctionName = $(this).data('dancer-maker-function-name');

    // get the maker function for the kind of dancer we're supposed to make
    var dancerMakerFunction = window[dancerMakerFunctionName];

    // make a dancer with a random position

    var dancer = dancerMakerFunction(
      $("body").height() * Math.random(),
      $("body").width() * Math.random(),
      Math.random() * 1000
    );
    $('body').append(dancer.$node);
  });
});

#javascript

blinkyDancer

var makeBlinkyDancer = function(top, left, timeBetweenSteps) {
  var blinkyDancer = makeDancer(top, left, timeBetweenSteps);

  // we plan to overwrite the step function below, but we still want the superclass step behavior to work,
  // so we must keep a copy of the old version of this function

  var oldStep = blinkyDancer.step;

  blinkyDancer.step = function() {
    // call the old version of step at the beginning of any call to this new version of step
    oldStep();
    // toggle() is a jQuery method to show/hide the <span> tag.
    // See http://api.jquery.com/category/effects/ for this and
    // other effects you can use on a jQuery-wrapped html tag.
    blinkyDancer.$node.toggle();
  };

  return blinkyDancer;
};

#javascript

Dancer Fn

// Creates and returns a new dancer object that can step
var makeDancer = function(top, left, timeBetweenSteps) {

  var dancer = {};

  // use jQuery to create an HTML <span> tag
  dancer.$node = $('<span class="dancer"></span>');

  dancer.step = function() {
    // the basic dancer doesn't do anything interesting at all on each step,
    // it just schedules the next step
    setTimeout(dancer.step, timeBetweenSteps);
  };
  dancer.step();

  dancer.setPosition = function(top, left) {
    // Use css top and left properties to position our <span> tag
    // where it belongs on the page. See http://api.jquery.com/css/
    //
    var styleSettings = {
      top: top,
      left: left
    };
    dancer.$node.css(styleSettings);
  };

  // now that we have defined the dancer object, we can start setting up important parts of it by calling the methods we wrote
  // this one sets the position to some random default point within the body
  dancer.setPosition(top, left);

  return dancer;
};

#javascript #vanilla #array

Return random el from array

function randomEl(array) {
	const idx = Math.floor(Math.random() * array.length);
	return array[idx];
}

#javascript #nodemon

[nodemon] app crashed - waiting for file changes before starting... - Google Search

/* Answer to: "[nodemon] app crashed - waiting for file changes before starting..." */

/*
  This is most likely happening because of all the running server
  process in the background. So just stop them from the terminal.
  
  All you have to do is kill them all by running the command below
  in the terminal then restart nodemon.
*/

  pkill -f node

#javascript

Tutorial lodash on Codecademy

const _ = {
  clamp(number, lower, upper) {
    const lowerClampedValue = Math.max(number, lower);
    const clampedValue = Math.min(lowerClampedValue, upper);
    return clampedValue;
  },
  inRange(number, start, end) {
    if (end === undefined) {
      end = start;
      start = 0;
    }
    if (start > end) {
      [start, end] = [end, start];
    }
    const isInRange = start <= number && number < end ? true : false;
    return isInRange;
  },
  words(string) {
    return string.split(' ')
  },
  pad(string, length) {
    if (length <= string.length) {
      return string;
    }
    startPad = Math.floor((length - string.length)/2);
    endPad = length - startPad - string.length;
    const paddedString = ' '.repeat(startPad) + string + ' '.repeat(endPad);
    return paddedString;
  },
  has(object, key) {
    const hasValue = object[key] !== undefined ? true : false;
    return hasValue;
  }
};

#javascript

How, in general, does Node.js handle 10,000 concurrent requests? - Stack Overflow

https://stackoverflow.com/questions/34855352/how-in-general-does-node-js-handle-10-000-concurrent-requests

#javascript #vanilla #array

Remove all instances of an el in an array

function removeAllItems(arr, value) {
  var i = 0;
  while (i < arr.length) {
    if (arr[i] === value) {
      arr.splice(i, 1);
    } else {
      ++i;
    }
  }
  return arr;
}

console.log(removeAllItems([2,5,9,1,5,8,5], 5))

#javascript #vanilla #array

Finds first occurance of el in array, removes it, and returns it, else returns undefined

function remove(array, el) {
	const index = array.indexOf(el);
	if (index > -1) {
		const foundEl = array.splice(index, 1);
        return foundEl;
	}
    return undefined;
}
console.log(remove([2,5,9,1,5,8,5], 5))

#javascript

javascript - app.set('port', port) 'TypeError: undefined is not a function'. Beginner, need ideas - Stack Overflow

app.set('port', port);
 /**
 * Create HTTP server.
 */

var server = http.createServer(app);

 /**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

 /**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
    var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
   }

   return false;
}

/**
* Event listener for HTTP server "error" event.
*/

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

Like I said in the beginning, I'm a complete beginner with command-line/github, but I'm already in love with it. I try to practice it every night after I finish my homework, and am getting really frustrated about getting stuck because I haven't been able to move forward for four days now. Also, I'm running this on node.js and the OS is Windows 8. Anything helps!  Let me know if you want me to post any of the other code; I omitted so as to not add more than necessary.

 "../app (app.js file) JUST ADDED"***************************
../app file:
    [ App.js   ]
 var express = require('express');
 var path = require('path');
 var favicon = require('serve-favicon');
 var logger = require('morgan');
 var cookieParser = require('cookie-parser');
 var bodyParser = require('body-parser'); 

var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();

///  catch 404 and forwarding to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});
var app = express();
// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
        app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}


var app = express();


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json({estended: true}));
app.use(bodyParser.urlencoded({extended: true}));
app.use(cookieParser({extended:true}));
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);





//  production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

#javascript

Factorial using reduce

// Write function below
const range = (start, end, length = end - start + 1) =>
  Array.from({ length }, (_, i) => start + i)

const factorial = number => {
  const numArray = range(1, number);
  return numArray.reduce((total, value) => total*value)
};

#javascript

Range in Javascript

const range = (start, end, length = end - start + 1) =>
  Array.from({ length }, (_, i) => start + i)

#javascript

javascript - Error: Request failed with status code 401 axios in React JS - Stack Overflow

axios.post('http://10.0.1.14:8001/api/logout',request_data, {
          headers: {
              'Content-Type': 'application/json',
              'Authorization': 'Bearer '+token
          },      
      })      
      .then((response) => {
        console.log('response',response.data)

      })
      .catch((error) => {
        alert('error',error.response)
        dispatch(userUpdateProfileFail())

      })

  // console.log('----cheers---------',data)
dispatch(userUpdateProfileSuccess(data))

#javascript

Counting occurance of element in array

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']

let countedNames = names.reduce(function (allNames, name) {
  if (name in allNames) {
    allNames[name]++
  }
  else {
    allNames[name] = 1
  }
  return allNames
}, {})
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

#javascript #vanilla #sort #randomize #array

Shuffle a deck of cards

Example: Shuffle Deck of Cards

// program to shuffle the deck of cards

// declare card elements
const suits = ["Spades", "Diamonds", "Club", "Heart"];
const values = [
  "Ace",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "10",
  "Jack",
  "Queen",
  "King",
];

// empty array to contain cards
let deck = [];

// create a deck of cards
for (let i = 0; i < suits.length; i++) {
    for (let x = 0; x < values.length; x++) {
        let card = { Value: values[x], Suit: suits[i] };
        deck.push(card);
    }
}

// shuffle the cards
for (let i = deck.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * i);
    let temp = deck[i];
    deck[i] = deck[j];
    deck[j] = temp;
}

console.log('The first five cards are:');

// display 5 results
for (let i = 0; i < 5; i++) {
    console.log(`${deck[i].Value} of ${deck[i].Suit}`)
}

//output
The first five cards are:
4 of Club
5 of Diamonds
Jack of Diamonds
2 of Club
4 of Spades

#javascript #vanilla #sort #randomize #array

Durstenfeld shuffle algorithm : Optimized Fisher-Yates

function shuffle(array) {
  const curIdx = array.length;

  // While there remain elements to shuffle...
  while (0 !== cur_idx) {
    // Pick a remaining element...
    const randIdx = Math.floor(Math.random() * curIdx);
    curIdx -= 1;

    // And swap it with the current element.
    const originalIdx = array[curIdx];
    array[curIdx] = array[randIdx];
    array[randIdx] = originalIdx;
  }
  return array;
}

// Usage of shuffle
const arr = [1, 2, 3, 4, 5, 6];
arr = shuffle(arr);
console.log(arr);

// shorter
function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var originalIdx = array[i];
        array[i] = array[j];
        array[j] = originalIdx;
    }
}

//es6
function shuffle_array(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

#javascript #vanilla #sort #randomize #array

Fisher-Yates algorith : (Really) shuffle and array

const shuffleArray = array => {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    const temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}

#javascript #vanilla #sort #randomize #array

Custom sort : shuffle an array the quick way

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const shuffledArray = array.sort((a, b) => 0.5 - Math.random());

// using Array map and Math.random
const shuffledArr = array => array.map(a => ({ sort: Math.random(), value: a })).sort((a, b) => a.sort - b.sort).map(a => a.value);

#html #css #javascript

Reasturant

https://codex-themes.com/thegem/sites/delicious-restaurant/

#javascript

How to Check if Object is Empty in JavaScript

Object.keys(empty).length === 0 && empty.constructor === Object

#javascript

Get strings between two indexes

var getStart = function(index, text){
  while(index > 0 && text[index] !== " "){
    index--;
  }
  return index;
}

var getEnd = function(index, text){
  while(index < text.length && text[index] !== " "){
    index++;
  }
  return index;
}

var getSelectedWord = function(firstIndex, lastIndex, text){
  return text.substring(getStart(firstIndex, text), getEnd(lastIndex, text)).split(' ');
}

#javascript #strings #substring #lastindexof

Get a substring of a string

const date = '2021-06-14T08:29:40.886+00:00'
const formattedDate = date.substring(0,date.lastIndexOf('T'))
console.log(formattedDate)

// prints: "2021-06-14"

#javascript #objects #arrays

Adding to an array of objects

let cars = [
  {
    "color": "purple",
    "type": "minivan",
    "registration": new Date('2017-01-03'),
    "capacity": 7
  },
  {
    "color": "red",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    ...
  },
  ...
]

// add to the beginning 
const car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.unshift(car);

// add to the end
const car = {
 "color": "red",
 "type": "cabrio",
 "registration": new Date('2016-05-02'),
 "capacity": 2
}
cars.push(car);

// add somewhere in the middle 
Array.splice(
  {index where to start},
  {how many items to remove},
  {items to add}
);

// place the car after the 4th element in the array
let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.splice(4, 0, car);

#javascript

axios.all

axios.all([
 axios.get('https://api.github.com/users/abc');
 axios.get('https://api.github.com/users/abc/repos')
])
.then(axios.spread(function (userResponse, reposResponse) {
  console.log('User', userResponse.data);
  console.log('Repositories', reposResponse.data);
}));

#javascript

リンクをクリックしたら飛び先を判定して処理を分けるjQuery | KUBO Design Blog

$(document).on('click', 'a', function(e) {
	e.preventDefault();

	const blank = $(this).attr('target');
	const fromDomain = location.origin;
	const from = fromDomain + location.pathname + location.search;
	const to = $(this).prop('href');
	const check = to.replace(from,'');

	if(blank == '_blank' || to.indexOf(fromDomain) == -1) {
		hrefBlank(to);
	} else if( check.indexOf('#') == 0 || check == '') {
		var target = 0;
		if (check != '') {
			target = $(check).offset().top;
		}
		hrefInPage(target);
	} else {
		hrefPageToPage(to);
	}
});
function hrefBlank(target) {
	window.open(target, '_blank');
}
function hrefPageToPage(target) {
	// ローディング演出
	$("演出に使ったDOM要素").on('animationend webkitAnimationEnd',function(){
	  window.location = target;
	});
}
function hrefInPage(target) {
	$('body,html').stop().animate({scrollTop:target}, 800);
}

#javascript

Axios interceptor

import axios from "axios";
import { redirect } from "helpers/historyDom";

import store from 'app/store';
import  {logout} from 'app/actions/authAction';
// const { default: axios } = require("axios");

/* creating custom axios  */
const axiosIntercept = axios.create({
    //baseURL : process.env.REACT_APP_API_URL , 
    //timeout : 200 , 
    headers : {
        'Content-Type': 'application/json',
        'Authorization' : `Token ${localStorage.getItem('god_token')}` , 
    },
});

/* callback to clear storage and local state */
const clearStorage = async (_callback) => {
    // await localStorage.clear()
    await store.dispatch(logout())
    _callback();
}
 
const requestHandler = (request) => {
    // console.log(request)
    request.headers.Authorization = `Token ${localStorage.getItem('god_token')}` ;
    return request ;
};
 
const responseHandler  = (response) => {
    if(response.status === 401){
        // console.log(response)
        // console.log("got yaaaaaaaaaaaaaaaaaa response")
        clearStorage(()=>{
            redirect('/Connexion')
        })
    }
    return response

};


const errorHandler = (error) => {
    if(error.response.status === 401){
        clearStorage(()=>{
            redirect('/Connexion')
        })
    };
    return Promise.reject(error)
    // return error
};


axiosIntercept.interceptors.request.use(
    (request) => requestHandler(request) ,
    (error) => errorHandler(error) ,
);


axiosIntercept.interceptors.response.use(
    (request) => responseHandler(request) ,
    (error) => errorHandler(error) ,
);

export default  axiosIntercept ;

#javascript

How To Use Axios with JavaScript | DigitalOcean

// ...

const BASE_URL = 'https://jsonplaceholder.typicode.com';

const getTodoItems = async () => {
  try {
    const response = await axios.get(`${BASE_URL}/todos?_limit=5`);

    const todoItems = response.data;

    console.log(`GET: Here's the list of todos`, todoItems);

    return todoItems;
  } catch (errors) {
    console.error(errors);
  }
};

#javascript

getRandomValue(min,max)

function getRandomValue(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

#javascript

Wait for element to display

  function waitForElementToDisplay(selector, callback, checkFrequencyInMs = 100, timeoutInMs = 10000) {
    const startTimeInMs = Date.now();

    if(!callback){
      callback = () => document.querySelector(selector).style.display = 'none';
    }

    (function loopSearch() {
      if (document.querySelector(selector) != null) {
        callback();
        return;
      }

      setTimeout(function () {
        if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs){
          return;
        }
        loopSearch();
      }, checkFrequencyInMs);
    })();
  }

#javascript

Capitalize just the first letter in a string

hbs.registerHelper(`capitalizeFirstLetter`, function (input) {
    const stringifiedInput = `${input}`;
    const capitalizedInput = stringifiedInput.charAt(0).toUpperCase() + stringifiedInput.slice(1);
    return capitalizedInput;
});

#javascript

Capitalize first letter in word or words in string

// capitalize first letter(s) of words in a string
hbs.registerHelper(`capitalizeFirstLetters`, function (input) {
    const stringifiedInput = `${input}`;
    console.log(`input`, stringifiedInput);
    const inputArray = stringifiedInput.split(` `);
    if (stringifiedInput.indexOf(` `) >= 0) {
        const capitalizedWords = inputArray.map((word) => word[0].toUpperCase() + word.slice(1)).join(` `);
        return capitalizedWords;
    }
    const capitalizedWord = stringifiedInput.charAt(0).toUpperCase() + stringifiedInput.slice(1);
    return capitalizedWord;
});

#javascript

Check if a string has white space

function hasWhiteSpace(s) {
  return s.indexOf(' ') >= 0;
}

//or

function hasWhiteSpace(s) {
  return /\s/g.test(s);
}

#javascript

SF Nav Mixin

import { LightningElement, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

 navigateToContact() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.contact.data.Id,
                objectApiName: 'Contact',
                actionName: 'view' //to edit change value to edit
            }
        });
    }

#javascript

Import userId

  
import { LightningElement } from 'lwc';
import Id from '@salesforce/user/Id';

export default class MiscGetUserId extends LightningElement {
    userId = Id;
}

#mongoose #javascript #html #form-data #checkboxes

Get value from form checkboxes

const visibleCheckboxes = document.querySelectorAll('.checky')

visibleCheckboxes.forEach(checkbox => checkbox.addEventListener('change', () => {
let hiddenCheckbox = checkbox.nextElementSibling;
checkbox.checked ? hiddenCheckbox.value = 'Yes' : hiddenCheckbox.value = 'No';
}))

//html
<label>
  <input type="checkbox" class="checky" />
  <input type="text" value="no" /> Cats
</label>
<label>
  <input type="checkbox" class="checky" />
  <input type="text" value="no" /> Dogs
</label>
<label>
  <input type="checkbox" class="checky" />
  <input type="text" value="no" /> Fish
</label>

#javascript

DataTables i18n

https://datatables.net/plug-ins/i18n/

#javascript

Transform an array in object in Javascript

function valuesToArray(obj) {
    var result = [];
    for (var key in obj) {
       if (obj.hasOwnProperty(key)) {
           result.push(obj[key]);
       }
    }
    return result;
}

#javascript

Convert hh:mm:ss string to seconds in Javascript

var hms = '02:04:33';   // your input string
var a = hms.split(':'); // split it at the colons

// minutes are worth 60 seconds. Hours are worth 60 minutes.
var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]); 

console.log(seconds);

#javascript

jQuery unselect option

//solution 1
$("option:selected").removeAttr("selected");

//solution 2
$("option:selected").prop("selected", false);

#react.js #javascript #checkboxtoggle

javascript - How to toggle boolean state of react component? - Stack Overflow

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

#javascript

Every

// TIP: Try re-using reduce() here.
    var test = true;
    if (iterator === undefined) {
      for (var key in collection) {
        if (! collection[key] && test) {
          return false;
        }
      }
    } else {
      for (var key in collection) {
        if (! iterator(collection[key]) ) {
          return false;
        }
      }
    }
    return test;

#javascript

Discover Functional Programming in JavaScript with this thorough introduction

const numbers = [1,2,3,4,5,6];
function isEven(number){
  return number % 2 === 0;
}
const evenNumbers = numbers.filter(isEven);

#javascript

getElementsByClassName recursion V2

var getElementsByClassName = function(className) {
  var listArray = [];

  // START INNER FUNCTION
  var innerFn = function(node) {
    if (node.nodeType === 1) {
      if (node.classList.value.includes(className)) {
        listArray.push(node);
      }
    }
    node.childNodes.forEach( function(element) {
      return innerFn(element);
    });
  };
  // END INNER FUNCTION
  
  innerFn(document.body);
  return listArray;
};

#javascript

stringifyJSON

//Recursive implementation of jSON.stringify;
var stringifyJSON = function(obj) {

    var arrOfKeyVals = [],
        arrVals = [],
        objKeys = [];

    /*********CHECK FOR PRIMITIVE TYPES**********/
    if (typeof obj === 'number' || typeof obj === 'boolean' || obj === null)
        return '' + obj;
    else if (typeof obj === 'string')
        return '"' + obj + '"';

    /*********CHECK FOR ARRAY**********/
    else if (Array.isArray(obj)) {
        //check for empty array
        if (obj[0] === undefined)
            return '[]';
        else {
            obj.forEach(function(el) {
                arrVals.push(stringifyJSON(el));
            });
            return '[' + arrVals + ']';
        }
    }
    /*********CHECK FOR OBJECT**********/
    else if (obj instanceof Object) {
        //get object keys
        objKeys = Object.keys(obj);
        //set key output;
        objKeys.forEach(function(key) {
            var keyOut = '"' + key + '":';
            var keyValOut = obj[key];
            //skip functions and undefined properties
            if (keyValOut instanceof Function || typeof keyValOut === undefined)
                arrOfKeyVals.push('');
            else if (typeof keyValOut === 'string')
                arrOfKeyVals.push(keyOut + '"' + keyValOut + '"');
            else if (typeof keyValOut === 'boolean' || typeof keValOut === 'number' || keyValOut === null)
                arrOfKeyVals.push(keyOut + keyValOut);
            //check for nested objects, call recursively until no more objects
            else if (keyValOut instanceof Object) {
                arrOfKeyVals.push(keyOut + stringifyJSON(keyValOut));
            }
        });
        return '{' + arrOfKeyVals + '}';
    }
};

#javascript

Currying in JavaScript

function currying(fn, ...args) {
    return (..._arg) => {
        return fn(...args, ..._arg);
    }
}

#javascript

Listens when child was removed

database.ref('object').on('child_removed', snapshot => console.log(snapshot.val()));

#javascript

Fires event when child ob object was changed

database.ref('object').on('child_added', snapshot => console.log(snapshot.val()));

#javascript

Use the child methode to navigate through the objects

database.ref('parent').child('child-1').child('child2').set('value');

alternative:
database.ref('parent/child-1/child-2').set('value');

#javascript

Listens to changes in referenced object

database.ref('object').on('value', snapshot => console.log(snapshot.val()))

#javascript

Recursion - getElementsByClassName

var getElementsByClassName = function(className) {
  const myNodes = [];

  function innerFn(node) {
    if (node.classList && node.classList.value.indexOf(className) > -1) {
      myNodes.push(node)
    }
    node.childNodes.forEach((child) => innerFn(child))
  }
  innerFn(document.body)

  return myNodes;
};

#javascript

WITHOUT RECURSION - getElementsByClassName implementations

var getElementsByClassName = function (cName) {
  var obj = {};
  var count = 0;
  var allNodes = document.body.childNodes;
  // look inside body root for any element has className
  // if the className found, go over all child element
  for (var i = 0; i < allNodes.length; i++) {
    if (allNodes[i].nodeType === 1) {
      if (allNodes[i].classList == cName) {
        obj[count] = allNodes[i];
        count++;
        //return obj[count];
      }
    }
  }
  console.log(obj);
};

getElementsByClassName("example color");

#javascript

Write a function that counts the number of times a value occurs in an object.

var countValuesInObj = function(obj, value) {
  var count = 0;
  for ( const property in obj ) {

    if( typeof obj[property] === 'object') {
      count = count + countValuesInObj(obj[property], value);
    } 

    if(obj[property] === value ) {
      return 1; // count = count + 1; // count++;
    }
  }
  return count;
};

var obj = {
'e':{'x':'y'},
't':{
  'r':{'e':'r'},
  'p':{'y':'r'}
  },
'y':'e'
};
console.log(countValuesInObj(obj, 'r')) // 2
console.log(countValuesInObj(obj, 'e')) // 1

#javascript

How to round to at most 2 decimal places in Javascript

Math.round((num + Number.EPSILON) * 100) / 100

#data #javascript #jspsych

save data from app engine to datastore google cloud javascript

https://stackoverflow.com/questions/61445528/how-to-save-data-from-app-engine-to-datastore-google-cloud-javascript

##js #js #javascript #psiturk #data

colinquirk/psiturkParser:+Turns+data+from+psiturk+into+normal+csv+files

https://github.com/colinquirk/psiturkParser

#javascript

Check number is positive, negative or zero using ternary operator

function checkSign(num){
    
return num > 0 ? "Postive": num<0 ? "Negative": "zero";
}

console.log(checkSign(0));

#javascript

Generate random whole number between miximum and minimum

function randomRange(myMin, myMax) {
    return Math.floor(Math.random() * (myMax - myMin + 1)) + myMin;
}

var myRandom = randomRange(5, 15);

console.log(myRandom);

#javascript

JavaScript generate random whole number

console.log(Math.floor(Math.random()*10));

#javascript

JavaScript Math.random()

console.log(Math.random());

#javascript

Do While loop in JavaScript

var i = 10;
var myArr = [];

do{
    myArr.push(i);
    i++
}while (i<3)

console.log("i = " + i);
console.log("myArrmy = " + myArr);

#javascript

detect the actual image type

// This function is used to detect the actual image type, 
function getMimeType(file, fallback = null) {
	const byteArray = (new Uint8Array(file)).subarray(0, 4);
    let header = '';
    for (let i = 0; i < byteArray.length; i++) {
       header += byteArray[i].toString(16);
    }
	switch (header) {
        case "89504e47":
            return "image/png";
        case "47494638":
            return "image/gif";
        case "ffd8ffe0":
        case "ffd8ffe1":
        case "ffd8ffe2":
        case "ffd8ffe3":
        case "ffd8ffe8":
            return "image/jpeg";
        default:
            return fallback;
    }
}

#javascript

TeamTreeHouse : Js Full stack.

/*
Basic
Numbers
Functions
Array
Objects

Landscape of JS
*/


//DOM


/* AJAX  */
- Developed by MS.
- Technical name is "XMLHttpRequest ( XHR ) Object".

   How to set up:
   1. Create XHR object.
   2. Create call back ( what to do with API) 
   3. OPEN
   4. SEND
   
    : Limitations of AJAX:
 - Ajax can only communicate within same website/server. It    can not communicate with another website/server.      
 - Can not change the port( parent domain has to be same        (will not work with different server )) Number and nor       change the Protocol ( https-http)
   

 How to resolve this issue:
 1. Web proxy :  We can request from client ->            server1(original) to server2. After that server2 will send    back response to server1 ( original ) -> Client.

 2. JSONP: JSON with padding.
 ( way CDN's work)
 3. CORS - Cross Origin resource sharing. ( This allows requests from different domains )


xhr.readState
  1-4 ( 4 is good )

xhr.status Codes
 : 200 ( OK ) 
 : 404 (file not found)
 : 401 ( not auth)
 : 500 (Server Error/Problem)

Syntax:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status === 200 ){ 
         
     }
};
xhr.open('GET', 'sidebar.html');
xhr.send();

                   /* JSON */

JSON: Javascript object Notation.
 - Keys and values have to use double quotations ( single      will not work)
 

          /*      Asynchronous Progamming   */


##Cool Example ( Playing with two API's. )
//Make AJAX request
function getJSON(url, callBack) {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = function () {
        if (this.readyState == 4) {
            let data = (JSON.parse(this.responseText));
            callBack(data);
        }
    }
    xhr.send();
}

//Loading Data
    getJSON(astroUrl, (jsonData) => {
        jsonData.people.map(person => {
            getJSON(wikiUrl + person.name, generateHTML )
        });
    })




                        /*       Promises                 */

//Promise Contsructor takes 1 Parameter with two arguments.
let breakFast = new Promise(( res , rej )=>{
   setTimeout(()=>{
     res("it's resolved")
     rej("It's Rejected");
   },2000);
})

> breakFast.then( val => console.log(val) ); // It will resolve it

> breakFast
     .then()
     .catch( val => console.log(Error,val) )
// Catch is used to Handle the rejections.


 > Promise.all( val )
// It will provide the values from multiple promises.It is used when program needs to wait for the more then 1 promise to resolve.
// IF any values is failed? It will not show any results. ( all the values have to be resolved. )

                           
                        /*  Fetch     */


    fetch('apiLink...')
       .then( respo => respo.json() )
       .then( data => consoe.log(data) )
       .catch()
       .finally( ()=> )
                
                
                
                 /*         Await         */
                
async function gettingData(data){
     let response = await fetch(data);
     let dataRes = await response.json();
     return dataRes;
}

gettingData(astroUrl).then( data => console.log(data));

> Await:
   - Async function always return a promise.
   - It pauses the execution of an async function and waits for the resolution of a promise
   - Is Valid only inside function marked 'async'.
   
   
   
**
 async function gettingData(astroUrl){
     
     let response = await fetch(astroUrl).catch( e => {
          console.log( e ,"JEh Panga Ess API ch")
     })
     let dataRes = await response.json()
      
     let output1 = dataRes.people.map ( async element => {

          let craft = (element.craft)
           let response = await fetch( wikiUrl + element.name);
           let dataRes = await response.json();

           return {...dataRes, craft}
     });
     return Promise.all(output1)
 } 
**     
   
     
         /*        Fetch API              */
     
     //Posting the Data
function postData(event) {
  event.preventDefault();
  const name = document.querySelector('#name').value;
  const comment = document.querySelector('#comment').value;

  fetch('http://jsonplaceholder.typicode.com/comments', {
    method: 'POST',
    headers: {
      'Content-type': 'application/json'
    },
    body: JSON.stringify({ name, comment })
  })

    .then(data => data.json())
    .then(data => console.log(data))
}
   


//Or
let config = {
    method: 'POST',
    headers: {
      'Content-type': 'application/json'
    },
    body: JSON.stringify({ name, comment })
  };
fetch('url', config)
  .then(..//What to do with Code..)


               /*        OOPS       */
               /*        Clasees    */
      // Convert value to String
      toString(val);
      String(val);
----------------------------
//GET
let obj = {
 get  power(){
    return "Power"
  }
}
console.log(obj.power)
-----------------------------
// Same thing without using "GET", ( make the Power function as IIFA )
let obj = {
   power: (function(){
     return "Power...";
   }())
}
console.log(obj.power)
------------------------

//SET ( set will always have 1 parameter )
class Student {
    set someName(name){
      this._name = name; 
      // can not use same as parameter, So convection is to use                    Underscore and store it. '_name' ( called - **Backing Property** )
    }
     get valueFromSomeName(){
       //This is used to 'get' value from '_name'(stored variable ) from            above 'set' method, We can also the retrieve value without using the        'get' ( by calling like regular method ( .valueFromSomeName() ) )
       return this._name;
   }
}

let stuJaskaran  = new Student();

stuJaskaran.someName = "Jaskaran";

console.log("Logging 1 : ",stuJaskaran.valueFromSomeName);



//We can access 1 method from a different method.
class Student {
      set major(subject){
        if(this.level == 'Junior' || this.level == 'Senior'){ //We are      getting value from method "level"
           this._major = subject; 
        }else {
           this._major = 'None' ;
        }

      }
    get level() {
        if (this.credits > 90 ) {
            return 'Senior';
        } else if (this.credits > 60) {
            return 'Junior';
        } else if (this.credits > 30) {
            return 'Sophomore';
        } else {
            return 'Freshman';
        }
    }  
}


-------------------------------------------
  
 //We can use the return from one Oject and add to another new class property.
   class Student{
    //Blaah Blaah
     set someVar( name ){
       this._name = name;
     }
     
   }

   class Prof{
     //Blaah Blaah
   }
let Jaskaran = new Student();
Jaskaran.someVar = new Prof()
   //Check S20 gallery for more details. ( pic taken on 12th June 2021)
  ------------------------------------------------------

#javascript

javascript - How does one Display a Hyperlink in React Native App? - Stack Overflow

import React, { Component, PropTypes } from 'react';
import {
  Linking,
  Text,
  StyleSheet
} from 'react-native';

export default class HyperLink extends Component {

  constructor(){
      super();
      this._goToURL = this._goToURL.bind(this);
  }

  static propTypes = {
    url: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
  }

  render() {

    const { title} = this.props;

    return(
      <Text style={styles.title} onPress={this._goToURL}>
        >  {title}
      </Text>
    );
  }

  _goToURL() {
    const { url } = this.props;
    Linking.canOpenURL(url).then(supported => {
      if (supported) {
        Linking.openURL(this.props.url);
      } else {
        console.log('Don\'t know how to open URI: ' + this.props.url);
      }
    });
  }
}

const styles = StyleSheet.create({
  title: {
    color: '#acacac',
    fontWeight: 'bold'
  }
});

#javascript

.every (without re-use .reduce)

var test = true;
    if (iterator === undefined) {
      for (var key in collection) {
        if (! collection[key]) {
          return false;
        }
      }
    } else {
      for (var key in collection) {
        if (! iterator(collection[key]) ) {
          return false;
        }
      }
    }
    return test;

#javascript

_.delay - My correct version

_.delay = function(func, wait) {
    var result;
    var params = [...arguments];
    setTimeout(function() {
      result = func.apply(this, params.slice(2));
    }, wait);
    return result;
  };

#javascript

javascript - How to check if an array contains another array? - Stack Overflow

function isArrayInArray(arr, item){
  var item_as_string = JSON.stringify(item);

  var contains = arr.some(function(ele){
    return JSON.stringify(ele) === item_as_string;
  });
  return contains;
}

var myArray = [
  [1, 0],
  [1, 1],
  [1, 3],
  [2, 4]
]
var item = [1, 0]

console.log(isArrayInArray(myArray, item));  // Print true if found

#javascript

dsad

sadsadsad

#javascript

dasdasdsa

dsadsa

#javascript

test

test

#javascript

memoize (Incorrect version)

_.memoize = function(func) {
    var alreadyCalled = false;
    var result;
    var arr = [];
    return function() {
      //console.log(arguments[0]);
      if (!alreadyCalled) {
        if ( !(arr.join(' ')).includes(arguments[0])) {
          arr.push(arguments[0]);
          result = func.apply(this, arguments);
          alreadyCalled = true;
        } else {
          //arr.push(arguments[0]);
          alreadyCalled = true;
        }
        return result;
      }
      return result;
    };

  };

#javascript

javascript - Cannot read property 'push' of undefined when combining arrays - Stack Overflow

if(parseInt(a[i].daysleft) > 0){ order[1].push(a[i]); }

#javascript

Pause your code when a specific function fired

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

#javascript

Query mongodb to return documents created today - Stack Overflow

db.doc.find({_id : { $gt : ObjectId(Math.floor(new Date(new Date().getFullYear()+'/'+(new Date().getMonth()+1)+'/'+new Date().getDate())/1000).toString(16)+"0000000000000000") }})

#javascript

._uniq (correct)

_.uniq = function(array, isSorted, iterator) {
    var uniqueArray = [];
    var storeObj = {};
    var iteratorArray = [];

    _.each(array, function(item, index) {
      if (iterator) {
        iteratorArray.push(iterator(item));
      } else {
        iteratorArray.push(_.identity(item));
      }
    });

    _.each(iteratorArray, function(item, index) {
      if (storeObj[item] === undefined) {
        storeObj[item] = array[index];
      }
    });

    for(var key in storeObj) {
      uniqueArray.push(storeObj[key]);
    }

    return uniqueArray;
  };

#javascript

uniq function (Incorrect)

_.uniq = function(array, isSorted, iterator) {
    var newArr = [];
    if(iterator === undefined) {
      for(var i = 0; i<array.length; i++) {
        if(! newArr.join('').includes(array[i])) {
          newArr.push(array[i]);
        }
      }
    } else {
      for(var i = 0; i<array.length; i++) {
      var test = iterator(array[i],i,array);
       if (test && array[i] == array[0]) {
          newArr.push(array[0], array[1]);
          return newArr;
       }
      }
      if(!test) newArr.push(array[0]);
    }
    return newArr;
  };


//
iterator(newArr[j],j,newArr) ? arr2.push(newArr[j]) : '';

#javascript

Increment a Value on a MongoDB field, using a Schema Method

const LyricSchema = new Schema({
  song: {
    type: Schema.Types.ObjectId,
    ref: 'song'
  },
  likes: { type: Number, default: 0 },
  content: { type: String }
});

LyricSchema.statics.like = function(id) {
  const Lyric = mongoose.model('lyric');

  return Lyric.findById(id)
    .then(lyric => {
      ++lyric.likes;
      return lyric.save();
    })
}

mongoose.model('lyric', LyricSchema);

#javascript

Iterate over an object and an array

_.each = function(collection, iterator) {
    if (Array.isArray(collection)) {
      for (var i = 0; i < collection.length; i++) {
        iterator(collection[i], i, collection);
      }
    } else {
      for (var property in collection) {
        iterator(collection[property], property, collection);
      }
    }

  };

#javascript

slice and return in one line

return n === undefined ? array[0] : array.slice(0, n);

#javascript

await is only useful if you use it with a promise, but requests does not return a promise. It doesn't have a return statement at all, so it's implicitly returning undefined.

export default (type, id) => {
  console.table([ type, id ]);
  return fetch(`https://swapi.co/api/${type}/?page=${id}`)
    .then(response => response.json())
    .then(json => {
      console.log(json);
      return json;
    })
}

#javascript

Click to tweet - CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 10px;
}

body {
  font-family: "Open Sans", sans-serif;
  background-color: #eee;
}

p {
  font-size: 1.6rem;
  line-height: 1.5;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Start Here */
.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#javascript

Click to tweet - Markup

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="https://kit.fontawesome.com/1935d064dd.js"
      crossorigin="anonymous"
    ></script>
    <!-- CSS only -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="row box">
        <div class="col-md-6">
          <p>Share this on Twitter.</p>
          <form action="">
            <textarea cols="30" rows="5" class="form-control fs-5">
Hello</textarea
            >
            <div
              class="button d-flex justify-content-end align-items-center mt-2"
            >
              <span class="limit px-3 fs-4">80</span>
              <button class="btn btn-primary">Tweet</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

#javascript

Search Code Snippets | react fetch api response

// This is what I've been using, pretty straight forward
// It passes the JSON to the children as props
// Of course, you fetch what you will

import React, { Component, Fragment } from 'react';

export class FetchJsonController extends Component
{
	constructor(props) {
		super(props);
		this.state = {
			data: null,
		};
	}

	componentDidMount() {
		fetch(this.props.src)
			.then(response => response.json())
			.then(data => {
				console.log(data);
				this.setState({ data })
			});
	}

	render() {
		const _data = this.state.data;
		const children = React.Children.map(this.props.children, child => {
			return React.cloneElement(child, {
				jsonData: _data
			});
		});
		return (
			<div>{ children }</div>
		)
	}
}

// This is how it's used
// SomeCompnent will receive the JSON data
<FetchJsonController src="somefile.json">
  <SomeComponent />
</FetchJsonController>

#javascript

10 JavaScript Concepts That Every Developer Should Know. | by Saiful Islam Sojib | Geek Culture | May, 2021 | Medium

https://medium.com/geekculture/10-javascript-concepts-that-every-developer-should-know-702330e662e2

#javascript

Hello world 2

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  console.log(`pageProps : ` , pageProps);
  return <Component {...pageProps} />
}

export default MyApp

#javascript

Password Visibility Toggle - JS 2

const password = document.querySelector("#password");
const eyeIcon = document.querySelector("#eye");

eyeIcon.addEventListener("click", () => {
  if (eyeIcon.classList.contains("fa-eye")) {
    password.setAttribute("type", "text");
    eyeIcon.classList.replace("fa-eye", "fa-eye-slash");
  } else {
    password.setAttribute("type", "password");
    eyeIcon.classList.replace("fa-eye-slash", "fa-eye");
  }
});

#javascript

Password Visibility Toggle - JS 1

const password = document.querySelector("#password");
const eyeIcon = document.querySelector("#eye");

eyeIcon.addEventListener("click", () => {
  if (eyeIcon.classList.contains("fa-eye")) {
    password.setAttribute("type", "text");
    eyeIcon.classList.remove("fa-eye");
    eyeIcon.classList.add("fa-eye-slash");
  } else {
    password.setAttribute("type", "password");
    eyeIcon.classList.remove("fa-eye-slash");
    eyeIcon.classList.add("fa-eye");
  }
});

#javascript

Stop iframe video

/**
 * Stop iframe video
 *
 * @param {Node} iframe
 */
function stopIframeVideo(iframe) {
  const url = iframe.getAttribute('src');
  iframe.setAttribute('src', '');
  iframe.setAttribute('src', url);
}

#javascript

JS Palindrome checker

function isPalindrome(str) {
  str = str.replace(/\W/g, '').toLowerCase();
  return (str == str.split('').reverse().join(''));
}

#react.js #javascript

React routerで表示を切り替える（Navで選択した内容をメインエリアに表示する）

react-routerの使いかたを学ぶ。
参考にしたサイトはhttps://dezanari.com/react-react-router/

1. まず、react-create-appで土台を作成。

2. react-router-domをインストール（react-create-appだといらない？！）
```
yarn add react-router-dom
```
3. 
（例えば）App.jsで、
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom'; 
と、インポートしておいて、

Linkで飛ぶ先はコンポーネントとして作成し、このファイルにインポートする。
import PageA from '../PageA/PageA';
import PageB from '../PageB/PageB';

そして、切り替えを以下のように設定。

```
<BrowserRouter>　　　　　　　　　/* 全体をBrowserRouterで囲む。*/

    <div className="wrapper">　

      <div className="nav">　　　　　　　　　　　　　
        <h1>Do you like A or B???</h1>
        <Link to="/pageA">PageA</Link><br/>　　/*Linkでアンカーと同じものを作れる。*/
        <Link to="/pageB">PageB</Link>
      </div>
    
      <div className="main">
        <Switch>　　　　　　　　　　　　　　　　　　　　/* Switchで囲んだ中には、、、*/
          <Route path="/pageA" component={PageA}/>　 /* RouteでLinkで飛ぶ先を設定。*/
          <Route path="/pageB" component={PageB}/>  
        </Switch>    
      </div>
    
    </div>

    </BrowserRouter>
```

#javascript

PATCH request for updating data in the database

fetch("http://www.example.com/books/1", { // note we are going to /1
  method: "PATCH",
  headers: {
      "Content-Type" : "application/json"
    },
  body: JSON.stringify(
    {
      "likes": 5           // we are changing the "likes" value to 5
    }
  )
});

#javascript

Shows how array forEach() method works

const array = [1,2,3,4]
array.forEach(number => console.log(number))
// [1]
// [2]
// [3]
// [4]

#javascript

Shows how array reduce() method works

const array = [1,2,3,4]
const reduceArray = array.reduce(a => a + b)
console.log(reduceArray)
// [10]

#javascript

Shows how array find() method works

const array = [1,2,3,4,5,6,7,8]
const findArray = array.filter(a => a > 4)
console.log(findArray)
// 5

#javascript

Shows how array filter() method works

const array = [1,2,3,4,5,6,7,8]
const filterArray = array.filter(a => a > 4)
console.log(filterArray)
// [5,6,7,8]

#javascript

Shows how array map() method works

const array = [1,2,3,4]
const newArray = array.map(a => a * 2)
console.log(newArray)
// [2,4,6,8]

#javascript

Map a range of number to another range of number

const scale = (num, in_min, in_max, out_min, out_max) => {
  return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

#javascript #php #jquery

WP_Query

<?php
$the_query = new WP_Query(
	array(
		'post_type' => 'post',
		'posts_per_page' => -1,
		'post_status' => array( 'publish' ),
	)
);
if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
?>

<div class="container">
	<article id="post-<?php the_ID(); ?>" <?php post_class('blog-item'); ?>>
		<div class="blog-item__info">
			<div class="blog-item__author">
				<?php if (get_field('single_author')) { ?>
					<?php echo get_field('single_author'); ?>
				<?php } else { ?>
					<?php the_author(); ?>
				<?php } ?>
			</div>
			<div class="blog-item__date">
				<?php the_date('F j, Y'); ?>
			</div>
		</div>
		<div class="blog-item__category">
			<?php
			$categories = get_the_category();
			if ( ! empty( $categories ) ) {
				foreach( $categories as $category ) {
			?>
				<a href="<?php echo esc_url( get_category_link( $category->term_id ) )?>">
					<?php echo esc_html( $category->name );?>
				</a>
			<?php
				}
			}
			?>
		</div>
		<h2 class="blog-item__title">
			<a href="<?php the_permalink(); ?>" class="link link--underline-left link link--underline-left--invert">
				<?php the_title(); ?>
			</a>
		</h2>
		<div class="blog-item__thumb">
			<a href="<?php the_permalink(); ?>">
				<?php if (has_post_thumbnail() ): ?>
					<?php the_post_thumbnail(); ?>
				<?php endif; ?>
			</a>
		</div>
		<?php if (has_excerpt()) { ?>
			<div class="blog-item__excerpt">
				<?php the_excerpt(); ?>
			</div>
		<?php } ?>
		<div class="blog-item__more">
			<div class="btn-round-invert">
				<a href="<?php the_permalink(); ?>">
					<?php _e('Read more', 'theme'); ?>
				</a>
			</div>
		</div>
	</article>
</div>

<?php
}
} else {
    // no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
?>

#javascript #react.js

reactjs - React native- Best way to create singleton pattern - Stack Overflow

export default class Controller {
    static instance = Controller.instance || new Controller()

    helloWorld() {
        console.log("Hello World... \(^_^)/ !!")
    }
}

#javascript

For Loop

var i ;

for ( i = 0; i <= 5; i++ ) { 
  console.log ( i ) ; // Prints the numbers from 0 to 5 
}

#javascript #nodejs

get previous url from which current url was triggered

req.get('referer')

#javascript #nodejs

get full URL express

let fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;

#javascript

node.js - How to detect if an app is run from the dmg file? - Stack Overflow

Cannot update while running on a read-only volume. The application is on a read-only volume. Please move the application and try again. If you're on macOS Sierra or later, you'll need to move the application out of the Downloads directory. See https://github.com/Squirrel/Squirrel.Mac/issues/182 for more information.

#javascript

Format JavaScript date as yyyy-mm-dd - Stack Overflow

var date = new Date("Sun May 11,2014");
var dateString = new Date(date.getTime() - (date.getTimezoneOffset() * 60000 ))
                    .toISOString()
                    .split("T")[0];

console.log(dateString);

#javascript

Harvest Festival Solutions | Codewars

function plant(seed, water, fert, temp){
  return 20 <= temp && temp <= 30 ? ("-".repeat(water) + seed.repeat(fert)).repeat(water) : "-".repeat(water * water) + seed
}

#javascript

JavaScript Objects

const game = {
  name: 'Fornite',
  developer: 'Epic Games'
};

#javascript

FakeAPI - Array Async

const fakeAPI = (param) => new Promise((resolve, reject) => {
	console.log('Calling API...');
	setTimeout(() => {
  	if (param === 4) {
    	reject('Error: ' + param);
    }
  	resolve('Done: ' + param);
    
  }, 2000);
})

async function main() {
	const arr = [1, 2, 3, 4,5];
  
/*   Promise.all(arr.map(item => {
    if (item === 2) {
      return;
    }
    return fakeAPI(item);
  })).then(data => {
    console.log(data);
  }) */
  
  for (let item of arr) {
  	try {
  	if (item === 2) {
  		continue;
  	}
    /* if (item !== 2) { */
      const result = await fakeAPI(item);
      console.log(result);
    // }
    } catch (err) {
    	console.log(err);
    }
  }
}

main();

#javascript

Floor Value of a Number with ~~

// Longhand
Math.floor(5.25) === 5 //true
//Shorthand
~~5.25 === 5 //true

#javascript

Returns data about an available .com domain

/**
 * Returns data about an available .com domain.
 *
 * @param {string} name The name of the domain.
 * @return Registrar name, registration & expiration date of a .com domain.
 * @customfunction
 */
function DOT_COM_DATA(name) {
  const nameComponents = name.replace(/\s+/g, '').split(".");
  if (nameComponents.length > 2) return "INVALID INPUT";
  if (nameComponents.length == 2 && nameComponents[1] != "com") return "TLD NOT SUPPORTED";
  name = nameComponents[0];
  const url = `https://rdap.verisign.com/com/v1/domain/${name}.com`;
  const response = UrlFetchApp.fetch(url,{ muteHttpExceptions: true });
  if (response.getResponseCode() !== 200) return "AVAILABLE";
  let comData = [];
  const jsonData = JSON.parse(response.getContentText());
  const registrar = jsonData.entities[0].vcardArray[1][1][3];
  const registrationDate = jsonData.events[0].eventDate.replace("T"," ").replace("Z","");
  const expirationDate = jsonData.events[1].eventDate.replace("T"," ").replace("Z","");
  comData.push([registrar, registrationDate, expirationDate]);
  return comData;
}

#javascript

Removes the vowels from a name

/**
 * Removes the vowels from a name.
 *
 * @param {string} name The name of the domain.
 * @return The name with the vowels removed.
 * @customfunction
 */
function REMOVE_VOWELS(name) {
  const vowels = ["a", "e", "i", "o", "u"];
  const letters = name.toLowerCase().split("");
  let newName = [];
  letters.map(letter => vowels.includes(letter) ? null : newName.push(letter));
  return newName.join("");
}

#javascript

CVNX notation of a domain name

/**
 * Returns the CVNX notation of a domain name.
 *
 * @param {string} name The name of the domain (without the TLD).
 * @return The CVNX notation of the domain name.
 * @customfunction
 */
function DOMAIN_PATTERN(name) {
  const vowels = ["a", "e", "i", "o", "u"];
  const consonents = ["b", "c", "d", "f", "g", "h", "j", "k", "l", "m", "n", "p", "q", "r", "s", "t", "v", "w", "x", "y", "z"];
  const letters = name.toLowerCase().split("");
  let pattern = [];
  letters.map(letter => vowels.includes(letter) ? pattern.push("V") : (consonents.includes(letter) ? pattern.push("C") : (!isNaN(letter) ? pattern.push("N") : pattern.push("X"))));
  return pattern.join("");
}

#javascript #php #jquery

magicScroll + animate.css

( function ($){
    jQuery (window).on ('load', function (){
        /* Global - Auto run animation for elements with data-animationcss - engine.js */
        animationCSS ();
    });

    /* Auto run animation for elements with data-animationcss */
    function animationCSS(){
        if ( !is_touch_device ()) {
            jQuery ('*[data-animationcss]').addClass (" animated ");

            /* ================ ANIMATED CONTENT ================ */
            if (jQuery (".animated")[ 0 ]) {
                jQuery ('.animated').css ('opacity', '0');
            }

            /* use scrollmagic */
            var animator = new ScrollMagic.Controller ();

            jQuery ('*[data-animationcss]').each (function (){
                var animation = jQuery (this).attr ('data-animationcss');

                var scene = new ScrollMagic.Scene ({
                    triggerElement: this,
                    triggerHook: 'onEnter',
                    offset: 50,
                    reverse: false
                }).on ('start', function (element){

                    jQuery (this.triggerElement ()).css ('opacity', 1);
                    jQuery (this.triggerElement ()).addClass (" animated " + animation);

                })
                .addTo (animator);
            });
        }
    }

} ) (jQuery);

#javascript #php #jquery

Video - play when in viewport + button play/pasue

//HTML
// getVimeoId($vleft['video']) = url do filmu vimeo

<div class="bottom__img">
	<iframe src="https://player.vimeo.com/video/<?php echo getVimeoId($vleft['video']); ?>?&autoplay=0&loop=0&muted=1&title=0&byline=0&portrait=0&fun=0&background=1" frameborder="0" allowfullscreen></iframe>
  <button class="play btn btn-transparent btn-rounded-inverse-mini" data-scrollinit="click">
      <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 7L3.01142e-07 13.9282L9.06825e-07 0.0717964L12 7Z" fill="#F2FF00"/>
      </svg>
  </button>
  <button class="stop btn btn-transparent btn-rounded-inverse-mini">
      <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.000244141 0.714355H2.28607V13.8572H0.000244141V0.714355Z" fill="#F2FF00"/>
          <path d="M5.71413 0.714111H7.99995V13.8572H5.71413V0.714111Z" fill="#F2FF00"/>
      </svg>
  </button>
</div>


//SCSS
.bottom__img {
	height: 0;
	width: 100%;
	padding-top: 74%;
	position: relative;

	iframe,
	img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.play,
	.stop {
		position: absolute;
		right: 26px;
		bottom: calc(17.75% + 26px);

		&:hover {
			svg {
				path {
					fill: #000000;
				}
			}
		}

		&.stop {
			//display: none;
		}

		&.play {
			display: none;

			svg {
				margin-left: 2px;
			}
		}
	}
}

//JS
//need magicscroll

(function ($) {
	jQuery(window).on('load', function () {
		var localization = $('.bottom__img');
		var moduleIframe = $(localization).find('iframe');
		if (moduleIframe.length) {
			var player = new Vimeo.Player($(localization).find('iframe'));
			var playBtn = $(localization).find('.play');
			var stopBtn = $(localization).find('.stop');
			console.log(stopBtn);

			/* controls */
			playBtn.on('click', function (e) {
				e.stopPropagation();
				player.play();
			})
			stopBtn.on('click', function () {
				player.pause();
			})

			player.on('play', function () {
				stopBtn.show();
				playBtn.hide();
			});
			player.on('pause', function () {
				stopBtn.hide();
				playBtn.show();
			});
		}

		var autoPlay = new ScrollMagic.Controller();

		jQuery('.bottom__img *[data-scrollinit]').each(function () {
			var animation = jQuery(this).attr('data-scrollinit');

			var scene = new ScrollMagic.Scene({
				triggerElement: this,
				triggerHook: 'onEnter',
				offset: 100,
				reverse: false
			}).on('start', function (element) {
				player.play();

			})
				.addTo(autoPlay);
		});
	});
})(jQuery);



//if you have 2 videos you can play 2nd after finished first:
//playerLeft.on('ended', function () {
//	playerRight.play();
//});
// ex. zmorph3d - page product i500

#javascript

Delete item from an array

const array = [2, 5, 9];

console.log(array);

const index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}

// array = [2, 9]
console.log(array);

#fibonacci #javascript #algebra

fibonacci in javascript without recursion Code Example

//First Examples
function fibonacci(n) {
	const list = [0, 1];
	for (let x = 2; x < n + 1; x += 1) {
		list.push(list[x - 2] + list[x - 1]);
	}
	return list[n];
}

console.log(fibonacci(4));

//Second Examples
function fibonacci(nums) {
  
  let fib = [0, 1];
  let data = [];
  
  for(let i = 2; i <= nums; i++) {
    fib[i] = fib[i - 1] + fib[i - 2]; 
    data.push(fib[i]);
  }
  
  return data;
}

//Third Examples
function fibonacci(nums) {
  
  let fib = [0, 1];
  let data = [];
  
  for(let i = 2; i <= nums; i++) {
    fib[i] = fib[i - 1] + fib[i - 2]; 
    data.push(fib[i]);
  }
  
  return data;
}

#javascript

GraphQL - Job

# Try running these queries

# Simple query to fetch regions
query fetchRegions {
  regions {
    edges {
      node {
        UID
        Name
      }
    }
  }
}

# Query to fetch all "Queued Jobs"
query fetchQueuedJobs($filter: EQLQueryFilterJobs!) {
  jobs(filter: $filter) {
    edges {
      node {
        Name
        covid_self_isolate
        major_fault
        boiler_approx_age
        boiler_age
        Description
        additional_hours_rationale
        visit_type
        last_service
        hometree_office
        booking_tool_source
        labour_adjustment_description
        labour_adjustment_net_amount
      }
    }
  }
}

# Sample Create Query.
# Ensure the "createInput" variable is appropriately
# set for this query to run
mutation createJob($createInput: NewJobs!) {
  schema {
  	insertJobs(input: $createInput)
  }
}

# Sample Update Query.
# Ensure the "updateInput" variable is appropriately
# set for this query to run
mutation updateJob($updateInput: UpdateJobs!) {
  schema {
  	updateJobs(input: $updateInput)
  }
}

# Sample Delete Query.
# Ensure the "deleteInput" variable is appropriately
# set for this query to run
mutation deleteJob($deleteInput: ID!) {
  schema {
  	deleteJobs(UID: $deleteInput)
  }
}


{
  "filter": "Name == \"JOB-0459\"",
  "createInput": {
    "Duration": 50,
    "Description": "Inserted via GraphQL!",
    "RegionId": "<enter-region-id>"
  },
  "updateInput": {
    "UID": "<enter-job-id>",
    "Description": "Updated via GraphQL!"
  },
  "deleteInput": "<enter-job-id>"
}

#javascript

javascript - Adding brackets [] to the attribute in setState - Stack Overflow

  var id = "sth";

 { [id]: else }

#javascript

javascript - Adding brackets [] to the attribute in setState - Stack Overflow

  { ["sth"]: else }

#javascript

javascript - Adding brackets [] to the attribute in setState - Stack Overflow

  { sth: else }

#javascript #jquery

jQuery .css() many

$('.page-header').css({
  '-webkit-transform' : 'translateY(' + topbarHeight + 'px)',
  '-moz-transform'    : 'translateY(' + topbarHeight + 'px)',
  '-ms-transform'     : 'translateY(' + topbarHeight + 'px)',
  '-o-transform'      : 'translateY(' + topbarHeight + 'px)',
  'transform'         : 'translateY(' + topbarHeight + 'px)'
});

#javascript

Multiple Condition Checks

if (res === 25 || res === "twenty-five" || res === 25.0) {
  // some action here
}

// Shorthand
if ([25, "twenty-five", 25.0].includes(res)) {
  // some action here
}

#actionscript3 #javascript #objectivec #typescript #webassembly #html #censored #profanity #webfiltered

Profanity Filtered muted

https://www.hulu.com/watch/4e5bc050-7302-4793-b2c9-031f7f03295c

#javascript

javascript - How do you do conditional hovering in styled components? - Stack Overflow

export const Container = styled.div`
    ${ props => props.shouldHover 
        ? '&:hover { background: red }' 
        : ''
    }
`;

#javascript

Check if element is in viewport

function isInViewport(elem) {
    const bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

#webscraping #serpapi #googlemaps #deobfuscation #reverse-engineering #javascript

Convert altitude and latitude to zoom

const EARTH_RADIUS_IN_METERS = 6371010
const TILE_SIZE = 256
const SCREEN_PIXEL_HEIGHT = 768

var zoom = (altitude, latitude) => Math.log(1 / Math.tan(Math.PI / 180 * 13.1 / 2) * (SCREEN_PIXEL_HEIGHT / 2) * 2 * Math.PI / (TILE_SIZE * altitude / (EARTH_RADIUS_IN_METERS * Math.cos(Math.PI / 180 * latitude)))) / Math.LN2;

#javascript

syntax test

const Test extends React.Component
const _handleBurger = () => {
const navBurger = document.getElementById("navBurger");
const navbarMenu = document.getElementById("navbarMenu");

navBurger.classList.toggle("is-active");
navbarMenu.classList.toggle("is-active");
};

#javascript

Semi-currying patter with bind

const sum = (a, b) => a + b
const sum5 = sum.bind(null, 5)

sum5(10) // 15

#javascript

Spil - FN mål

function setup() {
  createCanvas(windowWidth, windowHeight);
  yCoordinatBold = 100;
  ySpeedBold = 6;
  windowWidth=650;
  GreenBallHit = false
}

let img;

function preload(){
  img = createImg('http://mpsteenstrup.dk/FN_maal/FN10.jpg','');
	img.hide();
}



function draw() {
	background(91,146,229);
	image(img,mouseX,mouseY,80,80)

// Græsplænen
	fill(100,200,80);
	rect(0,750,1500,100);
var x=400;
// Cirkel, rød når ramt af mus
  fill(0,200,0);  // grøn
 if(mouseX>300 && mouseX<500 && mouseY>yCoordinatBold-100 && mouseY<yCoordinatBold+100) {
	fill(200,0,0)	  // rød hvid ramt af mus
	}
	ellipse(x,yCoordinatBold,200,200);
   yCoordinatBold += ySpeedBold;

   
 // Skift retning på cirkel , hvis den rtammer grænserbne 
   if (yCoordinatBold>windowWidth || yCoordinatBold<0){
    ySpeedBold = -ySpeedBold;
   }
   
   //forhindring
	fill(200,0,0);
	rect(800,600,160,150);
	
	//Udsagn 1
	fill(0,0,0)
	textSize(20,30)
text("Blive diskrimineret",800,670)
	//Udsagn 1
	fill(0,0,0)
	textSize(20,30)
	text("pga din hudfarve",800,690)
text("hej"x,yCoordinatBold+30);	

 }
 
 // function mousePressed (){
 //	if(mouseX>300 && mouseX<500 && mouseY>300 && mouseY<500){}
//
 //}

#javascript

GCP innovation - programmering

function setup() {
  createCanvas(windowWidth, windowHeight);
  yCoordinatBold = 100;
  ySpeedBold = 6;
  windowWidth=650;
  GreenBallHit = false
}

let img;

function preload(){
  img = createImg('http://mpsteenstrup.dk/FN_maal/FN10.jpg','');
	img.hide();
}



function draw() {
	background(91,146,229);
	image(img,mouseX,mouseY,80,80)
	fill(200,0,0)
	ellipse(400,yCoordinatBold,200,200);


textSize(30,30)
text("hej",400,200)

// Græsplænen
	fill(100,200,80);
	rect(0,750,1500,100);

// Cirkel, rød når ramt af mus
  fill(0,200,0).  // grøn
 if(mouseX>300 && mouseX<500 && mouseY>300 && mouseY<500); {
	fill(200,0,0)	  // rød hvid ramt af mus
	}
	ellipse(400,yCoordinatBold,200,200);
   yCoordinatBold += ySpeedBold;

   
 // Skift retning på cirkel , når den rammer grænserbne 
   if (yCoordinatBold>windowWidth || yCoordinatBold<0){
    ySpeedBold = -ySpeedBold;
   }
 }
 
 function mousePressed (){
 if(mouseX>300 && mouseX<500 && mouseY>300 && mouseY<500){}

 //	}	{
}

#processing #javascript #red #green #blue #brightness

Radial Gradient

int dim;

void setup() {
  size(640, 360);
  dim = width/2;
  background(0);
  colorMode(HSB, 360, 100, 100);
  noStroke();
  ellipseMode(RADIUS);
  frameRate(1);
}

void draw() {
  background(0);
  for (int x = 0; x <= width; x+=dim) {
    drawGradient(x, height/2);
  } 
}

void drawGradient(float x, float y) {
  int radius = dim/2;
  float h = random(0, 360);
  for (int r = radius; r > 0; --r) {
    fill(h, 90, 90);
    ellipse(x, y, r, r);
    h = (h + 1) % 360;
  }
}

#javascript

This children / bg-image this

$('> .child-class', this);
$('.element', this);


$('.thisParent').each(function() {
  var imageUrl = $(this).find('img').attr('src');
  //console.log(imageUrl);
  $('> .vc_column-inner', this).css("background-image", "url(" + imageUrl + ")");
  $(this).find('img').addClass('hidden');
});

#php #javascript

Menu - autogenerated menu from sections with scroll to section

// w szablonie miejsce od którego nawigujemy scrollem
<?php
		if($instance['anchor']['active']){
	?>
		<div id="<?php echo url_slug($instance['anchor']['name']); ?>" class="anchor-local-element position-relative" data-anchor-local="<?php echo $instance['anchor']['name']; ?>"></div>
	<?php
		}
?>
  
  
  //JS
  function localAnchorMenu() {
	// create menu items
	jQuery(jQuery('article .anchor-local-element').get().reverse()).each(function () {
		var anchorName = jQuery(this).data('anchor-local');
		var anchorID = jQuery(this).attr('id');
		console.log(anchorName);
		jQuery(document).find('.anchor-local-menu-items').prepend('<a data-scroll class="anchor-local-menu-item" href="#' + anchorID + '">' + anchorName + '</a>');
		jQuery(document).find('#header').addClass('anchor-local-active');
	});


	// scroll to element
	jQuery(document).find('.anchor-local-menu-item').on('click', '[data-scroll]', scrollToSection);

	function scrollToSection(event) {
		event.preventDefault();
		var $section = $($(this).attr('href'));
		jQuery('html, body').animate({
			scrollTop: $section.offset().top
		}, 500);
	}

}

//Wykrywa miejsce do którego nawigujemy i wpisaną w niego nazwę nazwę, na podstwie tego tworzy menu

#javascript

Check if Number is Even/Odd

function isEven(value) {
	if (value%2 == 0)
		return true;
	else
		return false;
}

#javascript

Speak Whale

let input = "Hi, Human";
const vowels = ['a', 'e', 'i', 'o', 'u'];
let resultArray = [];
for (let i = 0; i <= input.length; i++){
  for (let j = 0; j < vowels.length; j++){
    if(vowels[j] === input[i]){
      if(vowels[j] === 'e'){
        resultArray.push('ee');
      } else if (vowels[j] === 'u'){
        resultArray.push('uu');
      } else{
        resultArray.push(vowels[j]);
      }
    }
  }
}
console.log(resultArray.join('').toUpperCase());

#javascript #array #random #randomarray #dom

Generate Random Number without repetition

let clickMe = document.querySelector('button');

function getRandomNumber(min, max) {
  let totalEle = max - min + 1;
  let result = Math.floor(Math.random() * totalEle) + min;
  return result;
}
function createArrayOfNumber(start, end) {
  let myArray = [];
  for (let i = start; i <= end; i++) {
    myArray.push(i);
  }
  return myArray;
}
let numbersArray = createArrayOfNumber(1, 10);

clickMe.addEventListener('click', () => {
  if (numbersArray.length === 0) {
    console.log('No more random number');
    return;
  }
  let randomIndex = getRandomNumber(0, numbersArray.length - 1);
  let randomNumber = numbersArray[randomIndex];
  numbersArray.splice(randomIndex, 1);
  console.log(randomNumber);
});

#javascript

IE Media Query

//IE 10 - 11 Fixes - NESTING DOES NOT WORK
@media all and (min-width: 992px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {

}

@media all and (min-width: 1200px) and (-ms-high-contrast: none), (-ms-high-contrast: active) { 

}

#javascript #reducers

Getting to Know the useReducer React Hook | CSS-Tricks

https://css-tricks.com/getting-to-know-the-usereducer-react-hook/

#html #javascript

JavaScript Do while loop

<! DOCKTYPE html>
<!--Take Input From the user and make a loop when the number is <10-->
<html>
    <head>
        <title>do_while loop example2</title>
    </head>
    <body>
        <center>
            <h3>
                DO_WHILE LOOP
            </h3>
        </center>
        <script>
            var a=10;
            var num = prompt("Enter The highest Range Of the number");
            do
            {
                document.write("Your value is "+a+"<br>");
                a=a+1;
            }
            while(a<=num)
        </script>
    </body>
</html>

#html #javascript

JavaScript check odd or even

<! DOCKTYPE html>

<!--Take input From the user and Check whether the number is odd or even-->

<html>
    <head>
        <title>
            Check Odd or even
        </title>
    </head>
    <body>
        <center>
            <h3>
                ODD OR EVEN CHECKER
            </h3>
        </center>
        <script>
            var num;
            num =prompt("Enter your Number You want to check");
            if(num%2==0)
            {
                document.write("The number is a Even Number and the number is"+num);
            }
            else
            {
                document.write("The number is a odd number and the number is"+num);
            }
        </script>
    </body>
</html>

#html #javascript

JavaScript Biggest Number among three number

<! DOCKTYPE html>

<html>
    <head>
        <title>
            biggest number among three distinct number
        </title>
        <body>
            <center>
            <u>
                <h2>
                    Find The Biggest Number among three different Number
                </h2>
            </u>
            </center>
            <script>
                var a;
                var b;
                var c;
                
                if(a>b & a>c);
                {
                    alert ("biggest number is " +a);
                }
                elseif (b>a & b>c);
                {
                    alert("biggest number is "+b);
                }
                elseif(c>a & c>b);
                {
                    alert("biggest number is"+c);
                }
            </script>
        </body>
    </head>

#html #javascript

JavaScript Array

<!--Make a HTML Project using Array-->
<! DOCTYPE html>

<html>
<head>
    <title>Array</title>
</head>
<body>
    <script>
        var i,j,row,column;
        row=prompt("Enter The number of rows");
        column=prompt("Enter the number of Column");
        var arr= new Array(row);
        for(i=0;i<row;i++)
        arr[i]=new Array(column);

        for(i=0;i<row;i++){
            for(j=0;j<=column;J++)
        {
        arr[i][j]=prompt("Enter value in matrix");
        }
        }
        for(i=0;i<row;i++);{
            for(j=0;j<column;j++){
            document.write(arr[i][j]+"  ");
        }
        document.write("<br>");
        }
    </script>
</body>
</html>

#javascript

Link

--JavaScript class inheritance, get & set, array 
https://www.w3schools.com/code/tryit.asp?filename=GPICQHQJCCON

#javascript

Remove Image Title Attribute

<script>
	jQuery(document).ready(function($) {
    $('img[title]').each(function() { $(this).removeAttr('title'); });
});
</script>

#javascript

JavaScript string encryption and decryption? - Stack Overflow

const cipher = salt => {
    const textToChars = text => text.split('').map(c => c.charCodeAt(0));
    const byteHex = n => ("0" + Number(n).toString(16)).substr(-2);
    const applySaltToChar = code => textToChars(salt).reduce((a,b) => a ^ b, code);

    return text => text.split('')
        .map(textToChars)
        .map(applySaltToChar)
        .map(byteHex)
        .join('');
}

const decipher = salt => {
    const textToChars = text => text.split('').map(c => c.charCodeAt(0));
    const applySaltToChar = code => textToChars(salt).reduce((a,b) => a ^ b, code);
    return encoded => encoded.match(/.{1,2}/g)
        .map(hex => parseInt(hex, 16))
        .map(applySaltToChar)
        .map(charCode => String.fromCharCode(charCode))
        .join('');
}

#javascript

javascript - Replace spaces with dashes and make all letters lower-case - Stack Overflow

var str = "Sonic Free Games";
str = str.replace(/\s+/g, '-').toLowerCase();
console.log(str); // "sonic-free-games"

#javascript

shopify セクションにオリジナルの追加するほう方

<div id="textsection">
  <div class="simpletext">
    <h1> {{ section.settings.text-box }} </h1>
    <h3> {{ section.settings.text }} </h3>
  </div>
</div>
{% schema %}
  {
    "name": "Top-splash",
    "settings": [
      {
        "id": "text-box",
        "type": "text",
        "label": "Heading",
        "default": "Title"
      },
      {
        "id": "text",
        "type": "richtext",
        "label": "Add custom text below",
        "default": "<p>Add your text here</p>"
      }
    ],
    "presets":[
        {
        "name":"Top splash",
        "category":"test"
        }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

#javascript

Create an exmaple

#index {
    .panel {
        padding: 50px 20px;
    }
    h1, h3 {
        font-size: 30px;
    }
    h2 {
        font-size: 35px;
    }

#javascript #url

Get URL parameters

const urlString = window.location.search
const urlParameters = new URLSearchParams(urlString)

if (urlParameters.has('parameter')) {
  urlParameters.get('parameter')
}

#javascript #array #shuffle

Shuffle array and shuffle Selected Index

let items = [1,25,"JavaScript",69,"css","34","keep coding","html"];
console.log(items)

//shuffle array
function shuffle(arr){
  for(let i =arr.length-1;i>0;i--){
    const j = Math.floor(Math.random() * (i+1));
    [arr[i],arr[j]] = [arr[j],arr[i]];
  }
  return arr
}
console.log(shuffle(items))

//shuffle selected index 
const  itemToShuffle = items.slice(3,7);
console.log(shuffle(itemToShuffle))

//items after shuffling item from index 3 to 7
items = [items[0],items[1],items[2],...itemToShuffle,items[7]]
console.log(items)

#javascript

Array: .map() vs .filter() vs .reduce()

const arr = [26, 86, 45, 69, 25, 45]; // Taking random array
// Map function
// Defination:- it returns the new array from the base array after implementing some logic on int.
// length of the new array is always equal to length of the base array
const mapArr = arr.map((value) => value * 2);
console.log(mapArr); // [ 52, 172, 90, 138, 50, 90 ]
console.log(arr.length === mapArr.length); // true
// Filter function
// Defination:- it returns the new array from the base array only if some condition is true
// length of the new can be less than the length of the base array
const filterArr = arr.filter((value) => value > 50);
console.log(filterArr); // [ 86, 69 ]
// Reduce function
// Defination:- it returns the single value from the array.
const reduceArr = arr.reduce((accumulator, value) => accumulator + value, 0);
console.log(reduceArr); // 296
// Bonus for reduce
const pets = ["dog", "chicken", "cat", "dog", "chicken", "chicken", "rabbit"];
// lets count animals with reduce
const petCount = pets.reduce((obj, pet) => {
  obj[pet] ? obj[pet]++ : (obj[pet] = 1); // explenation:- if object has Dog in it than increase its count else add Dog and assign the value of 1
  return obj;
}, {});
console.log(petCount); // { dog: 2, chicken: 3, cat: 1, rabbit: 1 }
// CheatSheet
// map([🌽, 🐮, 🐔], cook)
// => [🍿, 🍔, 🍳]
// filter([🍿, 🍔, 🍳], isVegetarian)
// =>  [🍿, 🍳]
// reduce([🍿, 🍳], eat)
// => 💩

#javascript

Promise.all vs Promise.allSettled

const p1 = new Promise((resolve, reject) => setTimeout(resolve({'foo': 'bar'}), 500));
const p2 = new Promise((resolve, reject) => setTimeout(resolve({'moe': 'hey'}), 1500));
const p3 = new Promise((resolve, reject) => setTimeout(reject(new Error('ko')), 800));
(async function() {
    const p = [p1,p2,p3];
    // Promise.allSettled waits for all promises to be done (rejected or resolved/fulfilled)
    const settledPromises = await Promise.allSettled(p);
    console.info(settledPromises); 
    /*[
        { status: 'fulfilled', value: { foo: 'bar' } },
        { status: 'fulfilled', value: { moe: 'hey' } },
        { status: 'rejected', reason: Error: ko}
    ]*/
    // Promise.all resolves if and only if all promises are resolved/fulfilled
    // Promise.all rejects if one of the promises rejects
    const okPromises = [p1,p2];
    try {
        // Promise.all(okPromises) resolves because p1 and p2 resolves and no promise rejects
        const okResolvedPromises = await Promise.all(okPromises);
        console.info('all promises resolved !', okResolvedPromises);
// Promise.all(p) won't resolve because p3 rejects
        const allResolvedPromises = await Promise.all(p);
        console.info('all promises resolved !', allResolvedPromises);
    } catch(err) {
        console.info(err); // returns Error: ko from the second Promise.all
    }
})();

#javascript

Promises

// Promise takes two functions as arguments
// You call resolve when the function succeeds
const okPromise = new Promise(function(resolve, reject) {
    resolve({result: ['1','2']}) // you can pass data to the callback
  });
  
   // You call reject when it fails
   const koPromise = new Promise(function(resolve, reject) {
    reject(new Error('not found')) // you can pass data to the callback
  });
  
  // The promise rejects if you throw an error
  const throwedPromise = new Promise(function(resolve, reject) {
    throw new Error('not found') // you can pass data to the callback
  });
  
  // Promise can be created using "async" keyword
  // It resolves with returned value
  // Rejects if an error is thrown
  const asyncPromise = async function() {
    return true;
  }
  
  // You can call other promises by using .then for getting the result
  okPromise.then(function(result) {
    console.info(result) // {result: ['1','2']}
  }).catch((err) => console.info(err)) // nothing displayed
  // Use .catch for catch the error of a promise
  koPromise.then(function(result) {
    console.info(result) // nothing displayed
  }).catch((err) => console.info(err)) // Error: not found

#javascript

Methods for merging (aka concatenating) arrays

const arr1 = ['a', 'b', 'c'];
const arr2 = ['1', '2', '3'];
// Using .concat()
console.info(arr1.concat(arr2)); // ["a","b","c","1","2","3"]
// Using spread operators
console.info([...arr1, ...arr2]); // ["a","b","c","1","2","3"]
// This works too:
console.info(['a', 'b', 'c', ...arr2]); // ["a","b","c","1","2","3"]
// Using Array.of
console.info(Array.of(...arr1, ...arr2)); // ["a","b","c","1","2","3"]
// With reduce
console.info(arr2.reduce(function(array,value) {
  array.push(value);
  return array;
}, arr1)); // ["a","b","c","1","2","3"]

#javascript

map() & .reduce()

const myArray = [1,2,3,4,5,6];
// Use .map() for applying a transformation on each elements
const mutipliedArray = myArray.map((element) => element*2);
console.info(mutipliedArray); // [ 2, 4, 6, 8, 10, 12 ]
// Use .reduce() for merging together each element of the array
const sumOfArray = myArray.reduce((previous, current) => previous+current);
console.info(sumOfArray); // 21
// These methods can be chained together
const sumOfMultipliedArray = myArray.map((el) => el*2).reduce((prev, cur) => prev+cur);
console.info(sumOfMultipliedArray); // 42

#javascript

Switch statement vs Object Search

function handleSuccess(){}
function handleUnauthorized(){}
function handleNotFound(){}
function handleUnknownError(){}
const status = 200;
// Switch statement
switch (status) {
    case 200:
        handleSuccess()
        break
    case 401:
        handleUnauthorized()
        break
    case 404:
        handleNotFound()
        break
    default:
        handleUnknownError()
        break
}
// Equivalent using object key search in O(1) time
const hashmap = {
    200: handleSuccess,
    401: handleUnauthorized,
    404: handleNotFound,
    default: handleUnknownError
};
const hashmapResult = hashmap.hasOwnProperty(status) ? hashmap[status] : hashmap.default;
console.info(hashmapResult());

#javascript

Label statement

loop1: for (let i = 0; i < 4; i++) {
  loop2: for (let j = 0; j < 3; j++) {
    console.log('before')
    if (i === 1) {
      // when i equal to 1, jump out the loop2 immediately
      continue loop1
      // or can do break loop1
    }
    console.log(`i=${i}, j=${j}`)
  }
}

foo: {
  console.log('face');
  break foo;
  console.log('this will not be executed');
}
console.log('swap');

// this will log:

// "face"
// "swap"

#html #css #javascript

Video-slider

    <div class="custom__wrapper">
        <video src="/media/1011/filmtegner-1.mp4" class="custom__slider" autoplay loop muted controls></video>

        <ul>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
        </ul>
    </div>
<script>
    function videoslider(links) {
        document.querySelector(".slider").src = links;
    }
</script>

.custom__wrapper {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom__wrapper .custom__slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.custom__wrapper ul {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.custom__wrapper ul li {
    list-style: none;
    cursor: pointer;
    margin: 10px;
}


.custom__wrapper ul li video {
    width: 200px;
    transition: all 0.3s;
}

.custom__wrapper ul li video:hover {
    transform: scale(1.1);
}

video {
    width: 100%;
    height: 100%;
}

#javascript

Play with arrays

let secretMessage = ['Learning', 'is', 'not', 'about', 'what', 'you', 'get', 'easily', 'the', 'first', 'time,', 'it', 'is', 'about', 'what', 'you', 'can', 'figure', 'out.', '-2015,', 'Chris', 'Pine,', 'Learn', 'JavaScript'];
secretMessage.pop();
secretMessage.push('to', 'Program');
secretMessage[7] = 'right';
secretMessage.shift();
secretMessage.unshift('Programming');
secretMessage.splice(6, 5, 'know,');
console.log(secretMessage.join(' '));

#javascript

Iterate JSON Object

var object1; //JSON object

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

#processing #javascript #red #green #blue #brightness

Image Array

loadPixels(); 
  // Since we are going to access the image's pixels too  
  img.loadPixels(); 
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
      int loc = x + y*width;
      
      // The functions red(), green(), and blue() pull out the 3 color components from a pixel.
      float r = red(img.pixels[loc]);
      float g = green(img.pixels[loc]);
      float b = blue(img.pixels[loc]);
      
      // Image Processing would go here
      // If we were to change the RGB values, we would do it here, 
      // before setting the pixel in the display window.
      
      // Set the display pixel to the image pixel
      pixels[loc] =  color(r,g,b);          
    }
  }
  updatePixels();

#javascript

Shortcode in a Template | CSS-Tricks

<?php echo do_shortcode("[shortcode]"); ?>

#javascript

JavaScript Regular Expression Email Validation

// Validates email address of course.
function validEmail(e) {
    var filter = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;
    return String(e).search (filter) != -1;
}

#processing #javascript

Rotate Grid Shape

int tile = width/20;
int half = tile/2;
float size = tile/2; 

translate(tile/2, tile/2);


  for (int y=0; y<height; y+=tile) {
    for (int x=0; x<width; x+=tile) {
      pushMatrix();
      translate (x, y);
      rotate(degrees(angle));
      rect(0, 0, size, size);
      //line(x-half, y-half, x+half, y+half);
      popMatrix();
    }
  }

#javascript

javascript for...of - Buscar con Google

let list = [4, 5, 6];

for (let i in list) {
   console.log(i); // "0", "1", "2",
}

for (let i of list) {
   console.log(i); // "4", "5", "6"
}

#javascript

JSObjectClone

const food = { beef: '🥩', bacon: '🥓' }
//shallow copy
1.// "Spread" => 
{ ...food }
2.// "Object.assign" => shallow copy 
Object.assign({}, food)
// deep copy when object consists nested objects and arrays
3. // "JSON" => convert to string and parse back
JSON.parse(JSON.stringify(food))
// RESULT:
// { beef: '🥩', bacon: '🥓' }
4.// deep copy by using iterator
function iterationCopy(src) {
  src = { beef: '🥩', bacon: '🥓' , num:[1,2,3,]}
  let target = {};
  for (let prop in src) {
    if (src.hasOwnProperty(prop)) {
      // if the value is a nested object, recursively copy all it's properties
      if (isObject(src[prop])) {
        target[prop] = iterationCopy(src[prop]);
      } else {
        target[prop] = src[prop];
      }
    }
  }
  return target;
}

#javascript

Random number between min/max

function rand(min, max){
  min = (min == null ? Number.MIN_SAFE_INTEGER : min);
  max = (max == null ? Number.MAX_SAFE_INTEGER : max);
  return min + ((max - min) * Math.random());
}

function rand(
  min = Number.MIN_SAFE_INTEGER, 
  max = Number.MAX_SAFE_INTEGER
){
  return min + ((max - min) * Math.random());
}

#javascript

React Router 4

import React from "react";
import { BrowserRouter as Router, Route } from 'react-router-dom';
import ReactDOM from 'react-dom';
 
const App = () => {
  return (
    <div >
        <Route exact path="/" component={Home} />
       	<Route exact path="/about" component={About} />
        <Route exact path="/contacts" component={Contacts} />
          
     </div>
  );
};
 
export default App;
 
---

#javascript

React Router 1

import React from "react";
import ReactDOM from 'react-dom';

const App = () => {
 return (
   <div className="App">
   	<h1>React Router </h1>
   </div>
 );
};
export default App;
 - -
 
ReactDOM.render(<App />, document.getElementById("root"));

#javascript

React Router 2

import React from "react";
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
  const App = () => {
   return (
     <div className="App">
          <h1>React Router App </h1>
     </div>
   );
  };
  export default App;
 
ReactDOM.render( 
   <Router>
      <App/>
   </Router>, 
document.getElementById("root"));

#javascript

Gives path to home about and contacts

import React from "react";
import { BrowserRouter as Router, Route } from 'react-router-dom';


const App = () => {
  return (
    <div >
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
		<Route path="/contacts" component={Contacts} />

     </div>
  );
};

export default App;

  
ReactDOM.render(   
      <Router>
           <App />
      </Router>, 
document.getElementById("root"));

const Home = () => {
  return (
    <div>
      <h1>This is Our Home Page !</h1>
    </div>
  );
};
 
const About = () => {
  return (
    <div>
      <h1>This is My about Page!</h1>
    </div>
  );
};

const Contacts = () => {
  return (
    <div>
      <h1>This is My Contact Page!</h1>
    </div>
  );
};

#javascript

React Router 3

import React from "react";
import { BrowserRouter as Router, Route } from 'react-router-dom';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div >
        <Route path="/" component={Home} />
       	<Route path="/about" component={About} />
        <Route path="/contacts" component={Contacts} />
          
     </div>
  );
};

export default App;

  
ReactDOM.render(   
      <Router>
           <App/>
      </Router>, 
document.getElementById("root"));

const Home = () => {
  return (
    <div>
      <h1>This is Our Home Page !</h1>
    </div>
  );
};
 
const About = () => {
  return (
    <div>
      <h1>This is My about Page!</h1>
    </div>
  );
};

const Contacts = () => {
  return (
    <div>
      <h1>This is My Contact Page!</h1>
    </div>
  );
};

#javascript

console

console.log('Hello world.')

#javascript

chaining map and filter syntax

const arr = [1,2,3,4,5];
const result  = arr.map(x=>x*2).filter(x=>x>=5)

#javascript

forEach syntax

const arr = [1,2,3]
let result = arr.forEach(val=>{
    console.log(val*2) // 2 4 6
})
console.log(result) // undefined

#javascript

map syntax

const arr = [1,2,3]
let result = arr.map(val=>{
    return val*2
})
console.log(result) // [2,4,6]

#javascript

merging the objects

const match1 = 
{ 
  name : "Sachin", 
  score : 56 
};


const match2 = 
{ 
    name : "Sachin", 
    score: 53,
    balls: 32 
};



const match = {...match1, ...match2};
console.log(match) ;
 // Output -> 
             {  name: "Sachin",
                score: 53,
                balls: 32
             };

#javascript #array #sort

Sort array

const arr = [333,1,2,11,22,3,4]
console.log(arr.sort())

arr.sort((a,b)=>a-b)

console.log(arr)

#javascript #array #emptyarray

Remove Empty or null element from array

const arr = ["Apple",45,"","google",null],,,,"facebook","",69]

const removeEle = arr.filter((el)=> return el !=null && el != "")

#javascript #array

Check if two arrays are equal or not

function isEqual(arr1,arr2){
  let x = arr1.length;
  let y = arr2.lenght;
  
  //if lenght of array are not equal means array are not equal 
  if(x !=  y) return false;
  
  //sorting both array
  x.sort();
  y.sort();
  
  // Linearly compare elements
  for(let i=0;i<x;i++){
    if(x[i] != y[i]) return false
  }
  // If all elements were same.
    return true
}

let arrayOne = [3, 5, 2, 5, 2]
let arrayTwo = [2, 3, 5, 5, 2]

isEqual(arrayOne,arrayTwo) ? console.log("Matched") : console.log("Not Match")

#javascript

Chuncks an Array into equal parts

function arrayChunk (array, size) {
  const chunked_arr = [];
  let index = 0;
  while (index < array.length) {
    chunked_arr.push(array.slice(index, size + index));
    index += size;
  }
  return chunked_arr;
}

#javascript

Convert Object To Array Object

const object = {
  keberangkatan: {
    keberangkatan1:{
      id: 1, 
      name: "Superadmin"
    },
    keberangkatan2:{
      id: 2, 
      name: "Admin"
    }
  }
}

const convertObjectToArrayObject = ({object}) => {
  const tempArray = []
  for (const property in object) {
    tempArray.push(object[property])
  }
  return tempArray
}

console.log(convertObjectToArrayObject({object: object.keberangkatan}))

#javascript

Convert Array Object to Object

const arrays = [{id: 1, name: "Superadmin"},{id: 2, name: "Admin"}]

const convertArrayObjectToObject = ({ keys, array, parentKeys }) => {
  const convert = array.reduce((obj, item, index) => Object.assign(obj, { [`${keys}${index+1}`]: item }), {});
  if(parentKeys) {
  	return {[parentKeys]: { ...convert }}
  }
  return convert
}

console.log(convertArrayObjectToObject({ keys:'keberangkatan', array: arrays, parentKeys: 'keberangkatan' }))

#javascript #node.js #express

Download function helps download a file at a particular path.

const fs = require('fs')

exports.download = (req, res, next) => {
  console.log('fileController.download: started')
  const path = req.body.path
  const file = fs.createReadStream(path)
  const filename = (new Date()).toISOString()
  res.setHeader('Content-Disposition', 'attachment: filename="' + filename + '"')
  file.pipe(res)
}

#javascript #node.js #express

Parse the uploaded files, specify their location and filter a specific type of files through multer

const appRoot = require('app-root-path')
const multer = require('multer')

const fileController = require(`${appRoot}/src/controllers/FileController.js`)
const INPUT_NAME = 'photos'

const fileStorage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'files')
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname + '-' + (new Date()).toISOString())
  }
})

const fileFilter = (req, file, cb) => {
  if (['image/png', 'image/jpg', 'image/jpeg'].includes(file.mimetype)) {
    cb (null, true)
  } else {
    cb (null, false)
  }
}



module.exports = (app) => {
  app.use(multer({storage: fileStorage, fileFilter: fileFilter}).single('photo'))
  app.post('/upload', fileController.upload)
  app.post('/download', fileController.download)
}

#vue.js #javascript

Creates a FormData object and sends that to server in a post request

<script>
import axios from 'axios'
export default {
  name: 'App',
  data () {
    return {
      serverLink: 'http://localhost:3000/upload/'
    }
  },
  methods: {
    filesChange (filename, files) {
      if (!files.length) {
        return
      }

      console.log(filename, files)
      const formData = new FormData()
      for (let i = 0; i < files.length; i++) {
        formData.append(filename, files[i], files[i].name)
      }

      axios.post(this.serverLink, formData).then(
        rsp => {
          console.log(rsp)
        }
      ).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

#ajax #jquery #javascript

Verificación de email con ajax

function verificarEmail() {
  let data = $("#email").serialize();
  $("#errorEmail").text("");
  $.ajax({
    method: "POST",
    url: '/verificarEmail',
    data: data
  })
  .done(function(respuesta) {
    if(respuesta == "Existe"){
      $("#errorEmail").text("El email ya se encuentra registrado.")
    }
   })
  .fail(function() {
    alert( "error" );
  })
}

#html #css #javascript

Edit fiddle - JSFiddle - Code Playground

https://jsfiddle.net/5h5evjpw/

#javascript #jquery

jQuery AJAX

$.ajax({ 
  type: "POST",
  data: "",
  dataType: 'json',
  url: "",
  success: function(data)
  {

  }
});

#javascript #jquery

jQuery On Load

$(document).ready(function() 
{
  
});

#javascript #node #sleep

Javascript/Node 'sleep' function

function timeout(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

await timeout(1000); // pauses execution for 1000ms

#javascript

setting a callback

const button = document.querySelector('#click-me');
button.addEventListener('click', (event) => {
  // Callback
  event.currentTarget.innerText = 'Hold still...';
  event.currentTarget.setAttribute("disabled", "");
});

#javascript

HTTP & AJAX

const button = document.querySelector('#click-me');
button.addEventListener('click', (event) => {
  console.log(event);
});

#javascript

HTTP & AJAX

const elements = document.querySelectorAll(CSS_SELECTOR);

#javascript

HTTP & AJAX

const element = document.querySelector(CSS_SELECTOR);

#javascript

jquery - JavaScript: filter() for Objects - Stack Overflow

Object.filter = function( obj, predicate) {
    let result = {}, key;

    for (key in obj) {
        if (obj.hasOwnProperty(key) && !predicate(obj[key])) {
            result[key] = obj[key];
        }
    }

    return result;
};

#javascript #counter #timer

Counter

function animationInterval(ms, signal, callback) {
  // Prefer currentTime, as it'll better sync animtions queued in the
  // same frame, but if it isn't supported, performance.now() is fine.
  const start = document.timeline
  ? document.timeline.currentTime
  : performance.now();

  function frame(time) {
    if (signal.aborted) return;
    callback(time);
    scheduleFrame(time);
  }

  function scheduleFrame(time) {
    const elapsed = time - start;
    const roundedElapsed = Math.round(elapsed / ms) * ms;
    const targetNext = start + roundedElapsed + ms;
    const delay = targetNext - performance.now();
    setTimeout(() => requestAnimationFrame(frame), delay);
  }

  scheduleFrame(start);
}

#javascript #metabot

Код расчета времени установки триггера с учетом временной зоны пользователя:

var dd               = lead.getAttr('alarmDD')*1; // + дней
var hh               = lead.getAttr('alarmHH')*1; // + часов 
var mm               = lead.getAttr('alarmMM')*1; // + минут
var utc              = lead.getAttr('utc');
var summerTimeOffset = lead.getAttr('summerTimeOffset'); 
var serverTimeOffset = 3; // Часовой пояс сервера (Москва) UTC(3)
var ms               = 60 * 60 * 1000; // количеством миллисекунд в 1 часе

/////////////////////////////////////////////////////////////////////////////
// 1. Текущая дата и время относительно сервера (Москва), в миллисекундах
/////////////////////////////////////////////////////////////////////////////

var serverDatetime = new Date(Date.now());

var dateString =
    serverDatetime.getFullYear() + "-" +
    ("0" + (serverDatetime.getMonth()+1)).slice(-2) + "-" +
    ("0" + serverDatetime.getDate()).slice(-2) + " " +
    ("0" + serverDatetime.getHours()).slice(-2) + ":" +
    ("0" + serverDatetime.getMinutes()).slice(-2);

lead.setAttr('serverDatetime', serverDatetime);
lead.setAttr('serverDatetimeAsText', dateString);

/////////////////////////////////////////////////////////////////////////////
// 2. Текущая дата и время пользователя по его местному часовому поясу
/////////////////////////////////////////////////////////////////////////////

// Отнимаем сдвиг на московское время, чтобы привести все к UTC(0)
// И потом добавляем сдвиг на часовой пояс пользователя и летнее время
var currentLocalDatetime = new Date(
          serverDatetime 
        - (serverTimeOffset * ms) 
        + utc * ms 
        + summerTimeOffset * ms
);

dateString =
    currentLocalDatetime.getFullYear() + "-" +
    ("0" + (currentLocalDatetime.getMonth()+1)).slice(-2) + "-" +
    ("0" + currentLocalDatetime.getDate()).slice(-2) + " " +
    ("0" + currentLocalDatetime.getHours()).slice(-2) + ":" +
    ("0" + currentLocalDatetime.getMinutes()).slice(-2);

lead.setAttr('currentLocalDatetime', currentLocalDatetime);
lead.setAttr('currentLocalDatetimeAsText', dateString);

/////////////////////////////////////////////////////////////////////////////
// 3. Расчитываем время будильника в часовом поясе пользователя
/////////////////////////////////////////////////////////////////////////////

var localAlarmDatetime = new Date (
          currentLocalDatetime                         // текущее местное время
        - currentLocalDatetime.getHours() * 60 * 1000  // отнимаем часы,
        - currentLocalDatetime.getMinutes()            // минуты
        - currentLocalDatetime.getSeconds()            // и cекунды, т.е. теперь это 00:00
        + 24 * dd * ms                                 // добавляем дни, если надо
);

// Устанавливем время будильника
localAlarmDatetime.setHours(hh);
localAlarmDatetime.setMinutes(mm);
localAlarmDatetime.setSeconds(0);
  
dateString = 
    localAlarmDatetime.getFullYear() + "-" +
    ("0" + (localAlarmDatetime.getMonth()+1)).slice(-2) + "-" +
    ("0" + localAlarmDatetime.getDate()).slice(-2) + " " +
    ("0" + localAlarmDatetime.getHours()).slice(-2) + ":" +
    ("0" + localAlarmDatetime.getMinutes()).slice(-2);

lead.setAttr('localAlarmDatetime', localAlarmDatetime);
lead.setAttr('localAlarmDatetimeAsText', dateString);

///////////////////////////////////////////////////////////////////////////////////
// 4. Расчитываем время будильника в часовом поясе сервера для установки триггера
///////////////////////////////////////////////////////////////////////////////////

var d = new Date(
        localAlarmDatetime
        - utc * ms 
        - summerTimeOffset * ms
        + (serverTimeOffset * ms)    
);

var runTriggerAt = 
    d.getFullYear() + "-" +
    ("0" + (d.getMonth()+1)).slice(-2) + "-" +
    ("0" + d.getDate()).slice(-2) + " " +
    ("0" + d.getHours()).slice(-2) + ":" +
    ("0" + d.getMinutes()).slice(-2) + ":00";
                                              
lead.setAttr('runTriggerAt', runTriggerAt);

#javascript

javascript - file upload: check if valid image - Stack Overflow

$().ready(function() {
  $('[type="file"]').change(function() {
    var fileInput = $(this);
    if (fileInput.length && fileInput[0].files && fileInput[0].files.length) {
      var url = window.URL || window.webkitURL;
      var image = new Image();
      image.onload = function() {
        alert('Valid Image');
      };
      image.onerror = function() {
        alert('Invalid image');
      };
      image.src = url.createObjectURL(fileInput[0].files[0]);
    }
  });
});

#javascript

Сортировка массива по дате

const arr = array.slice().sort((a, b) => b.time - a.time)

#javascript #bookmarklet

Javascript Bookmarklet to get current URL - Stack Overflow

javascript:(function(s){try{s=document.selection.createRange().text}catch(_){s=document.getSelection()}prompt('',document.title+" "+'\n'+location+'\n'+s)})()

#javascript #bookmarklet

Javascript Bookmarklet to get current URL - Stack Overflow

javascript:(function(s){try{s=document.selection.createRange().text}catch(_){s=document.getSelection()}prompt('','\n'+location+'\n'+s)})()

#javascript

javascript - Insert character at Cursor position in VUE JS - Stack Overflow

// methods:
insertSomething: function(insert) {
  const self = this;
  var tArea = this.$refs.yourTextarea;
  // filter:
  if (0 == insert) {
    return;
  }
  if (0 == cursorPos) {
    return;
  }

  // get cursor's position:
  var startPos = tArea.selectionStart,
    endPos = tArea.selectionEnd,
    cursorPos = startPos,
    tmpStr = tArea.value;

  // insert:
  self.txtContent = tmpStr.substring(0, startPos) + insert + tmpStr.substring(endPos, tmpStr.length);

  // move cursor:
  setTimeout(() => {
    cursorPos += insert.length;
    tArea.selectionStart = tArea.selectionEnd = cursorPos;
  }, 10);
}

#javascript

Copyright Current Year

&copy; <script language="javascript" type="text/javascript">
var today = new Date()
var year = today.getFullYear()
document.write(year)
</script>

#javascript

Delete object property

delete person["age"];

#javascript

One two

console.log('one', 'two')

#javascript

Flexible inputs

input[type="text"] {
    /* Flexibility */
    box-sizing: border-box;
    width: 100%;

    /* Styling */
    padding: .4em .55em;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    border: 0;
    border-radius: .25em;
    outline: none
}

#javascript #nuxtjs #babel #es2020

Using `optional chaining operator` operator (.?) in NuxtJs

// Of course, before that, you should install @babel/plugin-proposal-optional-chaining
// npm i -D @babel/plugin-proposal-optional-chaining


// in nuxt.config.js
{
  // ...
  build: {
    // ....
    babel: {
      plugins: [
        '@babel/plugin-proposal-optional-chaining'
      ]
    }
  }
}

#javascript

4 Ways to Safely Access Nested Objects in Vanilla Javascript

// Example object
const macAyres = {
  tours: {
    nearMe: {
      sanFrancisco: {
        date: 'Sun Oct 27',
        location: 'The Regency Ballroom',
        cost: '30.00',
      },
    },
  }
}



// 1. Ternary Operator to Check for null/undefined
const concertLocation = (macAyres.tours && 
  						 macAyres.tours.nearMe &&
						 macAyres.tours.nearMe.sanJose) 
	? macAyres.tours.nearMe.sanJose.location 
	: undefined;



// 2. Oliver Steele’s Nested Object Access Pattern
const concertLocation = (macAyres.tours.nearMe.sanJose || {}).location;

/* Explanation: 
As the || operator breaks return the truthy value encountered, the above expression would return macAyres.tours.nearMe.sanJose if it is not null/undefined, otherwise {}.
In this case, we will be accessing location from an empty object, and not from undefined, so we will avoid getting the error.
*/



// 3. Array Reduce
const paths = ['tours', 'nearMe', 'sanJose', 'location'];
const location = paths.reduce((object, path) => {
    return (object || {})[path]; // Oliver Steele's pattern
}, macAyres)




// 4. Try/Catch Helper Function With ES6 Arrow Function
function getSafe(fn, defaultVal) {
    try {
        return fn();
    } catch (e) {
        return defaultVal;
    }
}

// use it like this
getSafe(() => obj.a.lot.of.properties);

// or add an optional default value
getSafe(() => obj.a.lot.of.properties, 'nothing');

#javascript

Async function for text response from URL

const fetchText = async (url) => {
        const response = await fetch(url);
        return await response.text();
        console.log(text)
      }
    	fetchText();

#javascript #react.js

Fetch data from an API and set state

useEffect(() => {
  requestPets();
}, []);

async function requestPets() {
  const res = await fetch(API_URL);
  const json = await res.json();
  setPets(json.pets)
}

#javascript

async fetch example

// Async function example:
async function getCurrencies() {
  // Use fetch to get data from API
  // and assign it to a variable:
  const data = await fetch('https://currencyapi.net/api/v1/rates?key=7zq3xkh2qeZcnvFhfyDyFlvqx4EmQ7R3N1qq')
  // Convert the response to JSON
  // and assign it to a variable:
  const json = await data.json()

  // Log the JSON to console:
  console.log(json)
}

#javascript

show lines causing error

const newCandy = new Candy();
newCandy();

#javascript

javascript - Assign a const variable inside a map function - Stack Overflow

        data.map((item) => {
            const propertyName = item.productName;

            return (<div className="flex-container card" key={item._id}>
                <div className="content">
                    <p>{propertyName}</p>
                </div>
            </div>)
        })

#javascript #angular

Run Angular

ng serve -o --poll=2000

#javascript

Simple substitute to Switch Case statements

const method1 = () => console.log('Does something');
const method2 = () => console.log('Does another thing');
const method3 = () => console.log('Does entirely other thing');
 
const switchObj = {
  a: method1,
  b: method2,
  c: method3
};
 
const init = (option) => {
	console.log('instead of switch case, use an object');
  	console.log(switchObj[option]());
}
 
init('a');

#servicenow #search #javascript

Search a value with incorrect spaces

//Search a value with incorrect spaces.. 

var input = 'gu ara nteed rate';
var table = 'core_company';
var field = 'name';

var searchName = input.replace(/\s/g, '').toLowerCase();
var gr = new GlideRecord(table);
gr.addEncodedQuery(field + 'ISNOTEMPTY');
gr.query();
while (gr.next()) {
  	var fieldString = gr.getValue(field).replace(/\s/g, '').toLowerCase();
 
    if (fieldString.indexOf(searchName) != -1)
        gs.info('FOUND: "' + gr[field].getDisplayValue() + '"');
}
/*
Example:

2021-03-15T18:05:40.674Z: FOUND: "Guaranteed Rate Insurance"
2021-03-15T18:05:40.677Z: FOUND: "Guaranteed Rate, Inc2"
2021-03-15T18:05:40.678Z: FOUND: "Guaranteed Rate, Inc."
2021-03-15T18:05:40.680Z: FOUND: "Guaranteed Rate, Inc"
2021-03-15T18:05:40.682Z: FOUND: "Guaranteed Rate Affinity"

*/

#javascript

Lazy Load Simples JS

!function(window){
  var $q = function(q, res){
        if (document.querySelectorAll) {
          res = document.querySelectorAll(q);
        } else {
          var d=document
            , a=d.styleSheets[0] || d.createStyleSheet();
          a.addRule(q,'f:b');
          for(var l=d.all,b=0,c=[],f=l.length;b<f;b++)
            l[b].currentStyle.f && c.push(l[b]);

          a.removeRule(0);
          res = c;
        }
        return res;
      }
    , addEventListener = function(evt, fn){
        window.addEventListener
          ? this.addEventListener(evt, fn, false)
          : (window.attachEvent)
            ? this.attachEvent('on' + evt, fn)
            : this['on' + evt] = fn;
      }
    , _has = function(obj, key) {
        return Object.prototype.hasOwnProperty.call(obj, key);
      }
    ;

  function loadImage (el, fn) {
    var img = new Image()
      , src = el.getAttribute('data-src');
    img.onload = function() {
      if (!! el.parent)
        el.parent.replaceChild(img, el)
      else
        el.src = src;

      fn? fn() : null;
    }
    img.src = src;
  }

  function elementInViewport(el) {
    var rect = el.getBoundingClientRect()

    return (
       rect.top    >= 0
    && rect.left   >= 0
    && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
    )
  }

    var images = new Array()
      , query = $q('img.lazy')
      , processScroll = function(){
          for (var i = 0; i < images.length; i++) {
            if (elementInViewport(images[i])) {
              loadImage(images[i], function () {
                images.splice(i, i);
              });
            }
          };
        }
      ;
    // Array.prototype.slice.call is not callable under our lovely IE8 
    for (var i = 0; i < query.length; i++) {
      images.push(query[i]);
    };

    processScroll();
    addEventListener('scroll',processScroll);

}(this);

#javascript

Pick male or female emoji with 50% RNG

const app = require('express')()
const port = 3000

app.get("/", (req,res) => {
  res.send("Hello World")
})

let rand = Math.random()
rand < 0.5 ? gender = 0 : gender = 1
let emoji = `${gender ? '👩‍💼' : '👨‍💼'}`

app.listen(port, () => {
  console.log(`listening on http://localhost:${port}`)
})

#javascript #js #bookmarklet #css

Simple Dark Mode Toggle

javascript:(d=>{var css=`:root{background-color:#f1f1f1;filter:invert(1) hue-rotate(180deg)}img:not([src*=".svg"]),picture,video{filter: invert(1) hue-rotate(180deg)}`,style,id="dark-mode",ee=d.getElementById(id);if(null!=ee)ee.parentNode.removeChild(ee);else {style = d.createElement('style');style.type="text/css";style.id=id;if(style.styleSheet)style.styleSheet.cssText=css;else style.appendChild(d.createTextNode(css));(d.head||d.querySelector('head')).appendChild(style)}})(document)

#javascript

Fetch

const apiData = () => {
    fetch(API_URL)
      .then((res) => {
        return res.json()
    }).then((data) => {
        fetchedData(data)
    })
}

fetchedData = (apiData) => {
  console.log(apiData)
}

#javascript

Find a value in an array of objects in Javascript - Stack Overflow

let arr = [
    { name:"string 1", value:"this", other: "that" },
    { name:"string 2", value:"this", other: "that" }
];

let obj = arr.find(o => o.name === 'string 1');

console.log(obj);

#javascript

JavaScript Array Filter: Filtering Array Elements Based on a Test Function

let cities = [
    {name: 'Los Angeles', population: 3792621},
    {name: 'New York', population: 8175133},
    {name: 'Chicago', population: 2695598},
    {name: 'Houston', population: 2099451},
    {name: 'Philadelphia', population: 1526006}
];

let bigCities = cities.filter(city => city.population > 3000000);
console.log(bigCities);

/* ES5
let bigCities = cities.filter(function (e) {
    return e.population > 3000000;
});
*/

Code language: JavaScript (javascript)

#vue.js #javascript

Test input for number [VueJS]

    isNumber(evt) {
      evt = evt ? evt : window.event;
      let charCode = evt.which ? evt.which : evt.keyCode;
      if (
        charCode > 31 &&
        (charCode < 48 || charCode > 57) &&
        charCode !== 46
      ) {
        evt.preventDefault();
      } else {
        return true;
      }
    },

#javascript

Full Height in Fullcalendar

Make a hook on "eventDidMount" : link

an search in arg.el for the item.

arg.el.find(".fc-title")  // jQuery, geht aber auch ohne
get the height

.height()  // jQuery, geht aber auch ohne
Summary:

eventDidMount:function(argE) { 
    h = arg.el.find(".fc-title").height(); 
    if(typeof(h) != "undefined") {
       if (h > 20) {
       // ... your code
       }
    }
    return (argE.event._def.title;); // dont forget the reason for this hook
},  //

#php #css #javascript

CSS - Remove Versioning

add_filter( 'style_loader_src',  'sdt_remove_ver_css_js', 9999, 2 );
add_filter( 'script_loader_src', 'sdt_remove_ver_css_js', 9999, 2 );

function sdt_remove_ver_css_js( $src, $handle ) 
{
    $handles_with_version = [ 'style','general' ]; // <-- Adjust to your needs!
    if ( strpos( $src, 'ver=' ) && ! in_array( $handle, $handles_with_version, true ) )
        $src = remove_query_arg( 'ver', $src );
    return $src;
}

#javascript

Object destructuring with function parameters

const languages = {
  english: "50%",
  spanish: "100%",
  japanese: "what a weeb lol",
};

function getLanguages({ english, spanish, japanese, chinese = "0%" }) {
  console.log(`
    ${english}
    ${spanish}
    ${japanese}
    ${chinese}
    `);
}

getLanguages(languages);

#javascript

Random integer between 1 and 6

Math.floor(Math.random() * 6) + 1;

#javascript

Lock body Scrolling and restore scroll position on unlock

function toggleScrollLock(open) {
    var offset = window.scrollY;
    var body = document.querySelector('body');

    if (open) {
        // Fix the body when menu is open
        body.classList.add('fixed');
        body.style.top = `-${offset}px`;
    } else {
        // Scroll back to original position upon close
        const scrollY = document.body.style.top;
        body.classList.remove('fixed');
        body.style.top = '';
        window.scrollTo(0, parseInt(scrollY || '0') * -1);
    }
}

#javascript #eleventy

Test Code

const { DateTime } = require('luxon')
const pluginRss = require('@11ty/eleventy-plugin-rss')
const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
const pluginTOC = require('eleventy-plugin-nesting-toc')
const eleventyNavigationPlugin = require('@11ty/eleventy-navigation')

#javascript

javascript x times

const times = x => f => {
  if (x > 0) {
    f()
    times (x - 1) (f)
  }
}

// use it
times (3) (() => console.log('hi'))

// or define intermediate functions for reuse
let twice = times (2)

// twice the power !
twice (() => console.log('double vision'))

#javascript

Infinite Scroll

https://codepen.io/klickreflex/pen/oNbmrVK

#javascript

test

const test = test;

#javascript

HTML Table Column Selectable

var columns=['a','b']
var data = [{a:'John',b:'Smith'},{a:'Sam',b:'Malone'}]

var d1=columns.map(c => {
  return ` <td>
      <table>
        <tr><th>${c}</th></tr>
        ${data.map(r => ` <tr><td>${ r[c]}</td></tr>`).join('')}
       
      </table>
    </td>`
})
var table1=`<table>
  <tr>
   ${d1.join('')}
    
  </tr>
</table>`;
document.getElementById('app').innerHTML=table1;

#javascript

Fullscreen slideshow

$(document).ready(function() {

  

  var $scene = $(".scene"),

      $content = $(".content"),

      $back = $(".back"),

      $backBgs = $(".back__bg"),

      $front = $(".front"),

      $frontBgs = $(".front__bg"),

      $menuBlock = $(".menu__block"),

      $svgPath = $(".menu__block-svgPath"),

      animating = false,

      menuActive = false,

      menuAnimTime = 600,

      blockAnimTime = 00,
15
      $sliderCont = $(".menu-slider__content"),

      curSlide = 1,

      sliderXDiff = 0,

      curPage = 1,

      nextPage = 0,

#javascript

Download Animation (SVG)

(function() {

  function $$(selector, context) {

    var context = context || document;

    var elements = context.querySelectorAll(selector);

    var nodesArr = [].slice.call(elements);

    return nodesArr.length === 1 ? nodesArr[0] : nodesArr;

  };



  var $status = $$('.dl-status');

  var $statusNumbers = $$('.dl-status__numbers');



  var $dlSVG = $$('.dl-svg');



  var $circle = $$('.dl-svg__circle');

  var $arrMain = $$('.dl-svg__arrow-main');

  var $arrSides = $$('.dl-svg__arrow-side');

  var $rotater = $$('.dl-svg__rotater');

#javascript

Codemirror insert sample text

function insertText(data) {
	var cm = $(".CodeMirror")[0].CodeMirror;
	var doc = cm.getDoc();
	var cursor = doc.getCursor(); // gets the line number in the cursor position
	var line = doc.getLine(cursor.line); // get the line contents
	var pos = {
		line: cursor.line
	};
	if (line.length === 0) {
		// check if the line is empty
		// add the data
		doc.replaceRange(data, pos);
	} else {
		// add a new line and the data
		doc.replaceRange("\n" + data, pos);
	}
}

#javascript #react.js #next.js #typescript

Horizontal scroll on element when user scrolls up & down (React)

  const target = useRef<HTMLDivElement>(null);

  const listenScrollEvent = (event) => {
    const toLeft = event.deltaY < 0 && target.current.scrollLeft > 0;
    const toRight =
      event.deltaY > 0 &&
      target.current.scrollLeft <
        target.current.scrollWidth - target.current.clientWidth;

    if (toLeft || toRight) {
      event.preventDefault();
      event.stopPropagation();

      target.current.scrollLeft += event.deltaY;
    }
  };

  return (
    <div ref={target} onWheel={listenScrollEvent}>

#javascript

Horizontal scroll on element when user scrolls up & down

const target = document.querySelector('div')

target.addEventListener('wheel', event => {
  const toLeft  = event.deltaY < 0 && target.scrollLeft > 0
  const toRight = event.deltaY > 0 && target.scrollLeft < target.scrollWidth - target.clientWidth

  if (toLeft || toRight) {
    event.preventDefault()
    event.stopPropagation()
    
    target.scrollLeft += event.deltaY
  }
})

#javascript

Full Stack Developer

function full_stack_developer() {
    full_stack_developer();
}

#javascript

☑️ CSS-only Todo List Checkbox Animation

console.clear();



setTimeout(function(){

  document.querySelector('input[type="checkbox"]').setAttribute('checked',true);

},0);

/*



// Javascript was initially used, but wasn't really necessary. Javascript droppped, but left here for archival purposes.


10
var todoTemplate = function(id){ 

  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 25" class="todo__icon">

    <defs>

      <mask id="myMask${id}" maskUnits="userSpaceOnUse" x="0" y="0">

        <g stroke="#FFF" fill="none">

          <path class="todo__line" d="M21 12.3h8"/>
16
          <path class="todo__box" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 .7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"/>
17
          <path class="todo__check" d="M10 13l2 2 5-5"/>

#javascript

Burger Menu

$('.burger, .overlay').click(function(){

  $('.burger').toggleClass('clicked');

  $('.overlay').toggleClass('show');

  $('nav').toggleClass('show');

  $('body').toggleClass('overflow');

});

#javascript

Deals Management Dashboard for Account Managers

const navTabs = document.querySelectorAll("#nav-tabs > a");

navTabs.forEach((tab) => {

  tab.addEventListener("click", () => {

    navTabs.forEach((tab) => {

      tab.classList.remove("active");

    });

    tab.classList.add("active");

  });

});

#javascript

Scroll Drawing

// Get a reference to the <path>

var path = document.querySelector('#star-path');



// Get length of path... ~7px in this case
5
var pathLength = path.getTotalLength();


7
// Make very long dashes (the length of the path itself)

path.style.strokeDasharray = pathLength + ' ' + pathLength;



// Offset the dashes so the it appears hidden entirely

path.style.strokeDashoffset = pathLength;



// Jake Archibald says so

// https://jakearchibald.com/2013/animated-line-drawing-svg/

path.getBoundingClientRect();



// When the page scrolls...

#javascript

Copy Text to Clipboard with Line Breaks

function copyToClipboard(){
 
    var codeToBeCopied = document.getElementById('code-snippet').innerText;
    var emptyArea = document.createElement('TEXTAREA');
    emptyArea.innerHTML = codeToBeCopied;
    const parentElement = document.getElementById('post-title');
    parentElement.appendChild(emptyArea);
 
    emptyArea.select();
    document.execCommand('copy');
 
    parentElement.removeChild(emptyArea);
    M.toast({html: 'Code copied to clipboard'})
 
    }

#javascript

JSONToFile: Writes a JSON object to a file. Use fs.writeFile(), template literals and JSON.stringify() to write a json object to a .json file.

const fs = require('fs');
const JSONToFile = (obj, filename) =>
  fs.writeFile(`${filename}.json`, JSON.stringify(obj, null, 2));

JSONToFile({ test: 'is passed' }, 'testJsonFile'); // writes the object to 'testJsonFile.json'

#javascript

functions

function Foo() {
  this.a = () => 1;
  this.b = () => 2;
}
Foo.prototype.c = () => 3;
functions(new Foo()); // ['a', 'b']
functions(new Foo(), true); // ['a', 'b', 'c']

#javascript

Remove Object from Array using JavaScript - Stack Overflow

var filtered = someArray.filter(function(el) { return el.Name != "Kristian"; });

#javascript

console log api data using fetch

const apiData = () => {
    fetch(API_URL)
      .then((res) => {
        return res.json()
    }).then((data) => {
        fetchedData(data)
    })
}

fetchedData = (apiData) => {
  console.log(apiData)
}

#javascript

simplified for

Not every case you can replace a looping method for the short one, but if it does then do it.
Instead of:
let names = [‘Amy’, ‘James, ‘David’, ‘John’];
for (let i = 0; i < names.length; i++) {}
Do this:
let names = [‘Amy’, ‘James, ‘David’, ‘John’];
for (let name of names) {}
In case the indexes matter:
for (let [index, name] of names.entries()) {}

#javascript

React/Gatsby Component

const NotFoundPage = () => {
  return (
    <h1>This is a test</h1>
  )
}

export default NotFoundPage

#javascript

Example snippet

console.log("hello world");

#javascript #html

Redirect on form submit

const handleSubmit = (e: any) => {
    e.preventDefault()
    props.history.push('/mypath') // указывает путь куда напралять после подтвердения формы
}

<form onSubmit={handleSubmit}>
  <button type='submit'>Submit form</button>
</form>

#javascript

JavaScript Arrow Function

hello = () => {
  return "Hello World!";
}

#javascript

Something

var hello = "world";
print(hello);

#javascript

Math.random шестизначные числа

const idGenerator = () => {
        setId(Math.floor(Math.random() * (999999 - 100000 + 1)) + 100000)
};

#javascript #mirage

Mirage - other way to create data

            this.get("http://127.0.0.1:5000/v1/todos", () => ({
                id: 1,
                records: [
                    { id: 1, name: "Walk the dog" },
                    { id: 2, name: "Take out the trash" },
                    { id: 3, name: "Work out" },
                ],
            }))

#javascript

Javascript / jQuery - map a range of numbers to another range of numbers - Stack Overflow

const scale = (num, in_min, in_max, out_min, out_max) => {
  return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

#javascript

Check out these useful ECMAScript 2015 (ES6) tips and tricks

var filtered = [...mySet].filter((x) => x > 3) // [4, 5]

#javascript #objects

merging objects

function merge(...objects) {
  let masterObj = {}

  // iterate over `objects` merging each
  // into `masterObj` to generate flattened
  // object
  for (let i = 0; i < objects.length; i++) {
    let obj = objects[i]
    for (let key in obj) masterObj[key] = obj[key]
  }

  return masterObj
}

let merged = merge(...objectsList)

// output:
// {count:5, delay:2000, early:false, message:'Hello'}
console.log(merged)

#javascript

copying an array

const manipulateList = (list) => {
  // defensively copy list
  const copiedList = [...list]

  // do something with copiedList
}

#javascript

Simulating named parameters

const notify = (msg, { type = 'info', timeout, close = true } = {}) => {
  // display notification
}

notify('Hi!')
notify('Hi!', { type: 'error' })
notify('Hi!', { type: 'warn', close: false })

#javascript

Converts image to base64 format

/**
   * Convert image to Base64 format
   */
  function getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
      return Promise.resolve(reader.result)
    });
  }

// await getBase64($('input[name=file]')[0].files[0]).then(
    //   data => {
    //     base64 = data;
    //   }
    // );

#typescript #javascript #angular

Ng - Directive - Change backgroundColor

import { Directive, ElementRef, Renderer } from '@angular/core';

@Directive({
    selector: '[appChbgcolor]'
})
export class ChangeBgColorDirective {

    constructor(private el: ElementRef, private renderer: Renderer) {
        this.ChangeBgColor('red');
    }

    ChangeBgColor(color: string) {

        this.renderer.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

#nodejs #javascript

Get IP address - node.js

https://www.npmjs.com/package/ip

#html #javascript

Upscaling Demo

<head>
    <script src="video.js"></script>
    <script src="vectorly-videojs.js"> </script>
</head>
<body>
    
    <video id="my-video" class="video-js" data-setup="{}" src="video.mp4" ></video>
  
    <script>
        videojs.registerPlugin('vectorlyPlugin', vectorly.videoJSPlugin);

        const player = videojs('my-video');

        player.vectorlyPlugin({width: 1280, height: 720}); // Upscale to 720p (from 240p)
    </script>
</body>

#javascript

array set javascript - Αναζήτηση Google

const myArray = [1,2,3,1,5,8,1,2,9,4];
const unique = [...new Set(myArray)]; // [1, 2, 3, 5, 8, 9, 4]

const myString = ["a","b","c","a","d","b"];
const uniqueString = [...new Set(myString)]; //["a", "b", "c", "d"]

#servicenow #glidequery #javascript

Glidequery Read Single Record

new GlideQuery('sys_user')
    .where('last_name', 'Luddy')
    .selectOne('first_name')
    .ifPresent(function (user) {
       gs.info(user.first_name);
   });
// Fred

#glidequery #servicenow #javascript

Glidequery Conditional

// Find user if they exist, otherwise return user with first_name 'Nobody'
var user = new GlideQuery('sys_user')
    .where('last_name', 'Luddy')
    .selectOne('first_name')
    .orElse({ first_name: 'Nobody' });

// Find user, otherwise throw an Error that the user couldn't be found
var user = new GlideQuery('sys_user')
    .where('last_name', 'Luddy')
    .selectOne('first_name')
    .get(); // this method can throw if no record is found

// Does a given user exist? Assign boolean to userExists
var userExists = new GlideQuery('sys_user')
   .where('last_name', 'Luddy')
    .selectOne('first_name')
    .isPresent();

#javascript

JS New URL

window.location.href = '...';

#javascript #jquery

AJAX

$.ajax({
	type:"POST",
	data:sendstring,
	dataType:'json',
	url:"",
	success:function(data)
	{

    }
});

#javascript

JS Alert Confirmation

if (window.confirm("Alert text goes here?"))

#javascript

Understanding Destructuring, Rest Parameters, and Spread Syntax in JavaScript | DigitalOcean

const user = {
  id: 3,
  name: 'Ron',
}

const updatedUser = { ...user, isLoggedIn: true }

console.log(updatedUser)

#javascript

*Tondouf_Project/Tindouf_Scene - Earth Engine Code Editor

var dataset = ee.ImageCollection('COPERNICUS/S2_SR')
                  .filterDate('2021-01-01', '2021-02-12')
                  .filterBounds(Zone)
                  .filter(ee.Filter.lt('CLOUDY_PIXEL_PERCENTAGE',20))
                  .map(rescale);

#javascript

Load image - Axios - Progress Bar

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/rikmms/progress-bar-4-axios/0a3acf92/dist/nprogress.css" />

<script src="https://cdn.rawgit.com/rikmms/progress-bar-4-axios/0a3acf92/dist/index.js"></script>


<img id="img">

<script>

loadProgressBar();

const url = 'https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg';

function downloadFile(url) {
  axios.get(url, {responseType: 'blob'})
    .then(response => {
      const reader = new window.FileReader();
      reader.readAsDataURL(response.data); 
      reader.onload = () => {
        document.getElementById('img').setAttribute('src', reader.result);
      }
    })
    .catch(error => {
      console.log(error)
    });
}

downloadFile(url);

</script>

#javascript

javascript - MapboxGL JS - Display 3d buildings in lower zoom level - Stack Overflow

map.addLayer({
    'id': '3d-buildings',
    'source': 'composite',
    'source-layer': 'building',
    'filter': ['==', 'extrude', 'true'],
    'type': 'fill-extrusion',
    'minzoom': 15,
    'paint': {
        'fill-extrusion-color': '#666',
        'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'height']],
        'fill-extrusion-base': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'min_height']],
        'fill-extrusion-opacity': 0.9,
    }
});

#javascript

Select all checkboxes in webpage

(function() {
    var aa = document.querySelectorAll("input[type=checkbox]");
    for (var i = 0; i < aa.length; i++){
      if (!aa[i].checked) {
        aa[i].click();
        }
    }
})()

#javascript #fetchapi

Using the JavaScript fetch() method to get data from an API + Mini Project 👨‍💻 | by Amaanath Mumtaz | Clever Programmer | Jan, 2021 | Medium

https://medium.com/cleverprogrammer/using-the-javascript-fetch-method-to-get-data-from-an-api-mini-project-10c0d602dae5

#javascript

Node Stream example / Pipe principle

const fs = require('fs');

// Create a readable stream in chunks inside buffer
// HighWaterMark => the size of a chunck
let readable = fs.createReadStream(_dirname + '/path.txt', 
                         { encoding: 'utf8', highWaterMark: 32 * 1024 });

// Writable stream
let writable = fs.createWriteStream(_dirname + '/pathCopy.txt');

// Stream is an event emitter 
readable.on('data', chunk => {
    writable.write(chunk);
})

#javascript

homebrew - brew services start mongodb-community@4.2 Error: Unknown command: services - Stack Overflow

jaimes-mbp:SMR jaimemontoya$ brew tap mongodb/brew
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).
No changes to formulae.

==> Tapping mongodb/brew
Cloning into '/usr/local/Homebrew/Library/Taps/mongodb/homebrew-brew'...
remote: Enumerating objects: 86, done.
remote: Counting objects: 100% (86/86), done.
remote: Compressing objects: 100% (76/76), done.
remote: Total 145 (delta 41), reused 21 (delta 10), pack-reused 59
Receiving objects: 100% (145/145), 30.18 KiB | 2.16 MiB/s, done.
Resolving deltas: 100% (68/68), done.
Tapped 6 formulae (33 files, 83.0KB).
jaimes-mbp:SMR jaimemontoya$ brew install mongodb-community@4.2
==> Installing mongodb-community from mongodb/brew
==> Downloading https://fastdl.mongodb.org/osx/mongodb-macos-x86_64-4.2.3.tgz
######################################################################## 100.0%
==> Caveats
To have launchd start mongodb/brew/mongodb-community now and restart at login:
  brew services start mongodb/brew/mongodb-community
Or, if you don't want/need a background service you can just run:
  mongod --config /usr/local/etc/mongod.conf
==> Summary
🍺  /usr/local/Cellar/mongodb-community/4.2.3: 21 files, 304.3MB, built in 1 minute 54 seconds
jaimes-mbp:SMR jaimemontoya$ brew services start mongodb-community@4.2
==> Tapping homebrew/services
Cloning into '/usr/local/Homebrew/Library/Taps/homebrew/homebrew-services'...
remote: Enumerating objects: 88, done.
remote: Counting objects: 100% (88/88), done.
remote: Compressing objects: 100% (47/47), done.
remote: Total 691 (delta 31), reused 69 (delta 25), pack-reused 603
Receiving objects: 100% (691/691), 192.79 KiB | 1.68 MiB/s, done.
Resolving deltas: 100% (270/270), done.
Tapped 1 command (39 files, 266.3KB).
==> Successfully started `mongodb-community` (label: homebrew.mxcl.mongodb-community)
jaimes-mbp:SMR jaimemontoya$ ps aux | grep -v grep | grep mongod
jaimemontoya     17763   0.1  0.2  5544164  38300   ??  S     8:11AM   0:00.65 /usr/local/opt/mongodb-community/bin/mongod --config /usr/local/etc/mongod.conf
jaimes-mbp:SMR jaimemontoya$

#javascript,linux,nodejs #javascript

Ts Node Start Config

{
  "scripts": {
    "build": "tsc --project ./",
    "start:dev": "nodemon src/server.ts",
    "start:prod": "node dist/server.js"
  }
}

#javascript,react.js #javascript

how to use useState() in functional components

import React, { useState } from "react";

import PropTypes from "prop-types";

const App = () => {
  const initialAge = 3;
  const initialSalary = 24000;

  const [age, setAge] = useState(initialAge);
  const [salary, setSalary] = useState(initialSalary);

  const incrementAge = () =>
    setAge((prevAge) => {
      setAge(prevAge + 1);
    });

  const resetAge = () => {
    setAge(initialAge);
  };

  const decrementAge = () => {
    setAge((prevAge) => {
      setAge(prevAge - 1);
    });
  };

  const incrementSalary = () => {
    setSalary((prevSalary) => {
      setSalary(prevSalary + 5000);
    });
  };
  const resetSalary = () => {
    setSalary(initialSalary);
  };
  const decrementSalary = () => {
    setSalary((prevSalary) => {
      setSalary(prevSalary - 100);
    });
  };

  return (
    <React.Fragment>
      <MemoizedComponentOne text="Age" age={age} />
      <Button
        handleClick={() => {
          incrementAge();
        }}>
        Increment Age
      </Button>
      <Button
        handleClick={() => {
          resetAge();
        }}>
        Reset Age
      </Button>
      <Button
        handleClick={() => {
          decrementAge();
        }}>
        Decrement Age
      </Button>
      <MemoizedComponentTwo text="Salary" salary={salary} />
      <Button
        handleClick={() => {
          incrementSalary();
        }}>
        Increment Salary
      </Button>
      <Button
        handleClick={() => {
          resetSalary();
        }}>
        Reset Salary
      </Button>
      <Button
        handleClick={() => {
          decrementSalary();
        }}>
        Decrement Salary
      </Button>
    </React.Fragment>
  );
};

export default App;

function ComponentOne({ text, age }) {
  return (
    <>
      <p>
        {text} - {age}
      </p>
    </>
  );
}
export const MemoizedComponentOne = React.memo(ComponentOne);

ComponentOne.propTypes = {
  text: PropTypes.string,
  age: PropTypes.number,
};
function ComponentTwo({ text, salary }) {
  return (
    <div>
      <p>
        {text} - {salary}
      </p>
    </div>
  );
}

ComponentTwo.propTypes = {
  text: PropTypes.string,
  salary: PropTypes.number,
};

export const MemoizedComponentTwo = React.memo(ComponentTwo);

const Button = ({ handleClick, children }) => {
  return <button onClick={handleClick}>{children}</button>;
};

Button.propTypes = {
  children: PropTypes.string,
  handleClick: PropTypes.func,
};

export const MemoizedButton = React.memo(Button);

#javascript #react.js

how to ref a class component from a parent component

import React, { Component, useRef } from "react";

import PropTypes from "prop-types";

export default class App extends Component {
  constructor(props) {
    super(props);

    this.myref = React.createRef();
    this.myrefSecondInstance = React.createRef();
    this.childref = React.createRef();

    this.state = {
      defaultOrNew: "default",
      firstNameDefault: "Arhan",
      lastNameDefault: "Kamra",
      firstName: this.myref.value,
    };
  }

  static propTypes = {
    prop: PropTypes,
  };

  componentDidMount() {
    this.myref.current.focus();
    this.childref.current.me();
  }

  handleClick = () => {
    this.myref.current.focus();
  };

  handleClickSecondInstance = () => {
    this.myrefSecondInstance.current.focus();
  };

  handleClickBlur = () => {
    this.myref.current.blur();
  };

  handleClickBlurSecondInstance = () => {
    this.myrefSecondInstance.current.blur();
  };

  changeName = () => {
    this.setState(() => {
      return {
        defaultOrNew: "new",
        firstNameDefault: this.myref.current.value,
        lastNameDefault: this.myrefSecondInstance.current.value,
        firstName: this.myref.current.value,
        lastName: this.myrefSecondInstance.current.value,
      };
    });
  };

  render() {
    return (
      <div className="app">
        <input
          type="text"
          onChange={this.changeName}
          defaultValue={this.state.firstNameDefault}
          ref={this.myref}
        />
        <input
          type="text"
          onChange={this.changeName}
          defaultValue={this.state.lastNameDefault}
          ref={this.myrefSecondInstance}
        />
        <button onClick={this.handleClick}>Focus input</button>
        <button onClick={this.handleClickBlur}>Remove focus</button>
        <button onClick={this.handleClickSecondInstance}>Focus inputSecondInstance</button>
        <button onClick={this.handleClickBlurSecondInstance}>RemoveSecondInstance focus</button>
        <p>
          Hi my <strong>{this.state.defaultOrNew}</strong> name is {this.state.firstNameDefault}{" "}
          {this.state.middleNameDefault} {this.state.lastNameDefault}
        </p>
        <Child ref={this.childref} />
      </div>
    );
  }
}

class Child extends Component {
  me = () => {
    console.log("sophisticated coder");
    window.alert("xyz abc");
  };

  render() {
    return <div>{4 + 4}</div>;
  }
}

#javascript

how to use useRef ( refs ) in functional components

export function Child() {
  const inputRef = useRef();
  console.log(inputRef.current);

  return (
    <div>
      <input type="text" defaultValue="default value" ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </div>
  );
}

#javascript

javascript - Array.push() if does not exist? - Stack Overflow

var item = {name: "tom", text: "tasty"}
var array = [{}]
if (!array.find(o => o.name === 'tom' && o.text === 'tasty'))
    array.push(item)

#javascript

javascript - Array.push() if does not exist? - Stack Overflow

var arrayObj = [{name:"bull", text: "sour"},
    { name: "tom", text: "tasty" },
    { name: "tom", text: "tasty" }
]
var index = arrayObj.findIndex(x => x.name=="bob"); 
// here you can check specific property for an object whether it exist in your array or not

index === -1 ? arrayObj.push({your_object}) : console.log("object already exists")

#javascript

Fizz Buzz

function FizzBuzz(val1, val2, range) {
    //Init the Array
    let returnArray = [];
    //Set the first value to 0
    returnArray[0] = 0;
    
    //Do fizz buzz from 1 to range. Perform modulus on each number.
    //Use a ternary to determine the value. 
    for (let i = 1; i <= range; i++) {
        returnArray[i] = ((i % val1 == 0 ? 'Fizz' : '') + (i % val2 == 0 ? 'Buzz' : '') || i);
    }
    //Return the Array
    return returnArray;
}

#javascript

copy button JS

    /* return content of input field to variable text */
var text = document.getElementById("text");

/* return button to variable btn */
var btn = document.getElementById("btn");

/* call function on button click */
btn.onclick = function() {
  text.select();    
  document.execCommand("copy");
}

#javascript

JS natural/numerical sort example.

const collator = new Intl.Collator(undefined, {
    usage: 'sort',
    numeric: true
})

const simple = ['a1', 'a12', 'a2']
simple.sort(collator.compare)
// => ['a1', 'a2', 'a12']

const objects = [{"id": "a1"}, {"id": "a12"}, {"id": "a2"}]
const by = (key) => (a, b) => collator.compare(a[key], b[key])
objects.sort(by('id'))
// => [{id: 'a1'}, {id: 'a2'}, {id: 'a12'}]

#javascript

react-query/_app.js at master · tannerlinsley/react-query

function loadScript(src, attrs = {}) {
  if (typeof document !== 'undefined') {
    const script = document.createElement('script')
    script.async = true
    script.defer = true
    Object.keys(attrs).forEach(attr => script.setAttribute(attr, attrs[attr]))
    script.src = src
    document.body.appendChild(script)
  }
}

#javascript #linux #nodejs

Launch Node server background with npm command

sudo forever start --sourceDir /opt/bitnami/projects/nesk_back -c "npm run prod" /

#javascript

Get Webview Content with URI | Visual Studio Extension Building


function getWebviewContent(uri) {
return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href='`+ uri + `' /> //This is the addition
    <title>Example Webview</title>
</head>
<body>
 <h1>This works!</h1>
 //Add some custom HTML here
   </body>
   </html>`;
}

#javascript #nodejs

recursive prompt - Node Js

var readline = require("readline");
var rl = readline.createInterface({input: process.stdin, output: process.stdout});

var program = function(){
    rl.question("type question", function(answer) {
        switch (answer){
            case "option 1":
                //action 1;
                break;
            case "exit option":
            	//previous action
            	return rl.close();
            default:
                //default action
        }
        program();
    });
}

program();

#javascript

Strip Tags

stripTags: (input) => {
        return input.replace(/<(?:.|\n)*?>/gm, '')
    }

#javascript

Truncate: To reduce length of text

truncate: (str, len) => {
        if (str.length > len && str.length>0) {
            let new_str = str + ' '
            new_str = str.substr(0, len)
            new_str = str.substr(0, new_str.lastIndexOf(' '))
            new_str = new_str.length > 0 ? new_str : str.substr(0, len)
            return new_str + '...'
        }
        return str
    }

#javascript

Is valid JSON

const isValidJSON = string => {
  try {
    JSON.parse(string);
    return true;
  } catch (error) {
    return false;
  }
};
let check1 = isValidJSON(‘{“title”: “javascript”, “price”: 14}’); // true
let check2 = isValidJSON(‘{“title”: “javascript”, “price”: 14, subtitle}’); // false

#javascript

Make Image Fill Column Height (Elementor)

const images = Array.from(document.querySelectorAll('.stretch img'));
images.map((img) => {
	img.onload = function() {
		let height = img.closest('.elementor-widget-wrap').offsetHeight
  		img.style = 'height: ' + height + 'px; object-fit: cover'
	}
})

#javascript #react.js

React_Map-adding-unique-key

key={`${button.text}-${button.bootstrapWidth}-${i}`}

#javascript

If multiple

//longhand
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
    //logic
}
//shorthand
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
   //logic
}

#javascript

javascript - Merge / Combine object arrays into single object - Stack Overflow

var obj = {
    "0": [{
      "category": "A",
      "index": 0,
      "property": "Name",
      "value": "Bob"
    }],
    "1": [{
      "category": "A",
      "index": 1,
      "property": "Name",
      "value": "Jessica"
    }]
}

console.log(Object.values(obj).flat())

#servicenow #javascript #duplicate

Find duplicate user email (or anything else) - Blogs - Blog - ServiceNow Community


/*
Client callable script include used for filtering sys_user lists
to identify duplication email users
name: duplicateEmail
active: true
client callabe: true
*/
function duplicateEmail() {
    var xx = new GlideAggregate('sys_user');
    xx.addAggregate('COUNT', 'email');
    xx.addHaving('COUNT', 'email', '>', '1');
    xx.query();
    var answer = new Array();
    while (xx.next()) {
        answer.push(xx.getValue('email'));
    }
    return answer;
}

#javascript

Convert Fahrenheit / Celsius

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
// Examples
celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-20);   // -4
fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0

#javascript

Get average value of arguments

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4);
// Result: 2.5

#javascript

Scroll to top of the page

const goToTop = () => window.scrollTo(0, 0);
goToTop();
// Result: will scroll the browser to the top of the page

#javascript

Check if the current user is on an Apple device

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);
// Result: will return true if user is on an Apple device

#javascript

Check if an element is currently in focus

const elementIsInFocus = (el) => (el === document.activeElement);
elementIsInFocus(anyElement)
// Result: will return true if in focus, false if not in focus

#javascript

Truncate a number to a fixed decimal point

const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
// Examples
toFixed(25.198726354, 1);       // 25.1
toFixed(25.198726354, 2);       // 25.19
toFixed(25.198726354, 3);       // 25.198
toFixed(25.198726354, 4);       // 25.1987
toFixed(25.198726354, 5);       // 25.19872
toFixed(25.198726354, 6);       // 25.198726

#javascript

Get the time from a date

const timeFromDate = date => date.toTimeString().slice(0, 8);
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); 
// Result: "17:30:00"
console.log(timeFromDate(new Date()));
// Result: will log the current time

#javascript

Check if a number is even or odd

const isEven = num => num % 2 === 0;
console.log(isEven(2));
// Result: true
console.log(isEven(3));
// Result: false

#javascript

Check if the current tab is in view / focus

const isBrowserTabInView = () => document.hidden;
isBrowserTabInView();
// Result: returns true or false depending on if tab is in view / focus

#javascript

Reverse a string

const reverse = str => str.split('').reverse().join('');
reverse('hello world');     
// Result: 'dlrow olleh'

#javascript

Check if the provided day is a weekday

const isWeekday = (date) => date.getDay() % 6 !== 0;
console.log(isWeekday(new Date(2021, 0, 11)));
// Result: true (Monday)
console.log(isWeekday(new Date(2021, 0, 10)));
// Result: false (Sunday)

#javascript

Get a random boolean (true/false)

const randomBoolean = () => Math.random() >= 0.5;

#javascript

javascript - Merge 2 arrays of objects - Stack Overflow

var arr1 = [{name: "lang", value: "English"},{name: "age", value: "18"}];
var arr2 = [{name : "childs", value: '5'}, {name: "lang", value: "German"}];

Array.prototype.push.apply(arr1,arr2); 

console.log(arr1);  // final merged result will be in arr1

#javascript

Days

const days = [
  'Sun',
  'Mon',
  'Tue',
  'Wed',
  'Thu',
  'Fri',
  'Sat'
]

#javascript

Months

const months = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
]

#javascript #react.js

Add type dependencies to Next.js project

npm i typescript @types/node @types/react --save-dev

#css #javascript

Animated Tab Bar

https://codepen.io/abxlfazl/pen/VwKzaEm

#javascript #react.js

Sha 256 code encode

// SHA

function sha256(plain: any) {
  // returns promise ArrayBuffer
  const encoder = new TextEncoder();
  const data = encoder.encode(plain);
  return window.crypto.subtle.digest('SHA-256', data);
}

function base64urlencode(a: any) {
  // Convert the ArrayBuffer to string using Uint8 array.
  // btoa takes chars from 0-255 and base64 encodes.
  // Then convert the base64 encoded to base64url encoded.
  // (replace + with -, replace / with _, trim trailing =)
  // @ts-ignore
  return btoa(String.fromCharCode.apply(null, new Uint8Array(a)))
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}

export async function pkceChallengeFromVerifier(v: any) {
  const hashed = await sha256(v);
  return base64urlencode(hashed);
}

#javascript,reac,jsx #javascript

Google Fonts not displaying on Mac CSS

/* note sure wy but Google fonts do not display on some Mac.
Here is your solution. Just add "!important" and you will be good to go */



        h1 {
            font-family: 'Montserrat', serif !important;
        }

#javascript

How to create an http server with Express in Node.js

var express = require('express');
var app = express();

app.get('/', function (req, res) {
    res.send('<b>My</b> first express http server');
});

// 1) Add a route that answers to all request types
app.route('/article')
.get(function(req, res) {
    res.send('Get the article');
})
.post(function(req, res) {
    res.send('Add an article');
})
.put(function(req, res) {
    res.send('Update the article');
});

// 2) Use a wildcard for a route
// answers to : theANYman, thebatman, thesuperman
app.get('/the*man', function(req, res) {
    res.send('the*man');
});

// 3) Use regular expressions in routes
// responds to : batmobile, batwing, batcave, batarang
app.get(/bat/, function(req, res) {
    res.send('/bat/');
});

app.use(function(req, res, next) {
    res.status(404).send("Sorry, that route doesn't exist. Have a nice day :)");
});

app.listen(3000, function () {
    console.log('Example app listening on port 3000.');
});

#javascript #reac #jsx

React example - chaging output and inline styling depending on condition

// will need a HTML page with "root"

import React from "react";
import ReactDOM from "react-dom";

const date = new Date();
const currentTime = date.getHours();
const currentMins = date.getMinutes();

let greeting;

const customSyle = {
  color: ""
};

if (currentTime < 12) {
  greeting = "good morning";
  customSyle.color = "red";
} else if (currentTime < 18) {
  greeting = "good evening";
  customSyle.color = "blue";
} else {
  greeting = "good night";
  customSyle.color = "puprle";
}

ReactDOM.render(
  <h1 className="heading" style={customSyle}>
    {currentTime + ":" + currentMins + " " + greeting}
  </h1>,

  document.getElementById("root")
);

#javascript

Full date breakdown (as immediately invoked function)

(() => {
let d = new Date()
let year = d.getFullYear().toString()
let month = d.getMonth() < 9 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
let date = d.getDate() < 10 ? '0' + d.getDate() : d.getDate().toString()
let hour = d.getHours() < 10 ? '0' + d.getHours() : d.getHours().toString()
let minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes().toString()
let seconds = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds().toString()
let day
switch (d.getDay()) {
  case 0:
      day = "sunday"
  break
   case 1:
     day = "monday"
   break
   case 2:
     day = "tuesday"
     break
   case 3:
     day = "wednesday"
     break
   case 4:
     day = "thursday"
     break
   case 5:
     day = "friday"
     break
   case 6:
     day = "saturday"
     break
    default:
    day = ''
  }
return {
  formattedDate: d.toLocaleString().split(", ")[0],
  formattedTime: d.toLocaleString().split(" ")[1],
  day,
  yyyy: year,
  mm: month,
  dd: date,
  hh: hour,
  mm: minutes,
  ss: seconds,
  timestamp:[year, month, date, hour, minutes].join(''),
  timestampA:[year, month, date, hour, minutes].join("-"),
  timestampB: `y${year}m${month}d${date}h${hour}m${minutes}s${seconds}`
}
})()

#nodejs #javascript #email

How to track email opens with NodeJS App

app.get('/:id/tracker.png', function(request, response, next) {
    var emailId = request.param.id;
    var buf = new Buffer([
        0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x01, 0x00, 0x01, 0x00,
        0x80, 0x00, 0x00, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x2c,
        0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x00, 0x02,
        0x02, 0x44, 0x01, 0x00, 0x3b
    ]);
    response.set('Content-Type', 'image/png');
    response.end(buf, 'binary');
    db.findOne({ id: emailId }, function(error, email) {
        if(error) return next(error);
        app.emit('event:opened', email);
    });
});

app.on('event:opened', function(email) {
    console.log('Email was opened');
    console.log(email.to);
    console.log(email.subject);
});

#javascript #popper #bootstrap

Script cdn

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

#javascript

10 JavaScript Hacks Every Web Developer Should Know

// instead of
if (accessible) {
console.log(“It’s open!”);
}
// use
accessible && console.log(“It’s open!”);

#javascript

Factory Function - Javascript

const robotFactory = (model, mobile) => {
return {
model: model,
mobile: mobile,
beep(){
  console.log('Beep Boop');
}
}
};
// parameters and entered in an order, check robotFactory const.
const tinCan = robotFactory('P-500', true);
tinCan.beep();
console.log(tinCan);

#javascript

setter - javascript

const person = {
  _age: 37,
  set age(newAge){
    if (typeof newAge === 'number'){
      this._age = newAge;
    } else {
      console.log('You must assign a number to age');
    }
  }
};

/*
We can perform a check for what value is being assigned to this._age.
When we use the setter method, only values that are numbers will reassign this._age
There are different outputs depending on what values are used to reassign this._age.

*/

#javascript

Getter method using function - Javascript

const robot = {
  _model: '1E78V2',
  _energyLevel: 100,
  get energyLevel(){
    if(typeof this._energyLevel === 'number') {
      return 'My current energy level is ' + this._energyLevel
    } else {
      return "System malfunction: cannot retrieve energy level"
    }
  }
};

console.log(robot.energyLevel);





/*
Getters can perform an action on the data when getting a property.
Getters can return different values using conditionals.
In a getter, we can access the properties of the calling object using this.
The functionality of our code is easier for other developers to understand.
*/

#javascript

calling method using THIS and function

const example = {
  name: 'mark',
  color: 'red',
  giveDetails(){
    console.log(`${this.example} is a ${this.color} something.`)
  }
}

#javascript

Loop over Objects using key and value

const user = {
name: "joe",
age: 32,
occupation: "Web Developer"

};

for (const [key, value] of Object.entries(user)) {
console.log(`${key} => ${value}`);
}

#javascript

this keyword on javascript

const example = {
  model: '1E78V2',
  energyLevel: 100,
provideInfo() {
return `I am ${this.model} and my current energy level is ${this.energyLevel}.`  
}
};
console.log(example.provideInfo());

#javascript

compare strings and push to new modified array - Javascript

const input = 'dude whats up yo';
const vowels = ['a', 'e', 'i', 'u', 'o'];
let resultArray = [];


for (let i=0; i< input.length; i++){
/* prints each item in array
console.log(input[i]);
 prints index of each item in array
console.log(i);
*/

for(let j=0; j<vowels.length; j++){
  if(input[i]===vowels[j]){
    if(input[i]==='e'){
      resultArray.push('ee')
    }
    else if (input[i]==='u'){
      resultArray.push('uu');
    }
    else{
      resultArray.push(input[i]);
    }
  }
}
}
console.log(resultArray.join('').toUpperCase());

#javascript

loop break javascript

const xArray = ["1' 2", "3", "4", "5"];

for (let i = 0; i < xArray.length; i++){
  console.log(xArray[i]);
  if (xArray[i] === '4'){
    break;
  }
}

console.log("Sample code");

#css #javascript

Click to rearrange grid items

//HMTL

<div class="container">

 <div id="a" class="box">Div A</div>
<div id="b" class="box">Div B</div>
<div id="c" class="box">Div C</div>
<div id="d" class="box">Div D</div>
<div id="e" class="box">Div E</div>
<div id="f" class="box">Div F</div>

</div>


//CSS
body {
  font-family: arial;
  font-weight: 600;
  color: white;
  font-size: 2em;
}
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 10%;
  text-align: center;
  grid-gap: 40px;
}

.box {
   background-color: green;
   padding: 20px;
  
}

#a {


}

#a:hover {
     grid-column: 1 / 4;
     grid-row: 1/6;
}

#a:hover ~ #b {
    background: #ccc;
        grid-column: 4;
}

#a:hover ~ #c {
    background: #ccc;
        grid-column: 4;
}

#a:hover ~ #d {
    background: #ccc;
            grid-column: 4;

}

#a:hover ~ #e {
    background: #ccc;
            grid-column: 4;

}

#a:hover ~ #f {
    background: #ccc;
            grid-column: 4;

}

#b:hover {
     grid-column: 1 / 4;
     grid-row: 1/6;
}

#b:hover ~ #a {
    background: #ccc;
        grid-column: 4;
}

#b:hover ~ #c {
    background: #ccc;
        grid-column: 4;
}

#b:hover ~ #d {
    background: #ccc;
            grid-column: 4;

}

#b:hover ~ #e {
    background: #ccc;
            grid-column: 4;

}

#b:hover ~ #f {
    background: #ccc;
            grid-column: 4;

}

#javascript

Create divs with placeholder text

div*2>p>lorem25

#javascript

youtube popup

document.getElementsByTagName('video')[0].requestPictureInPicture();

#javascript

Reduce Example

 const ageSum = ages.reduce(function(total, age) {
   return total + age;
 }, 0);

#javascript

Sort Function

 const sortedCompanies  = companies.sort(function(c1, c2) {
   if(c1.start > c2.start) {
     return 1;
   } else {
    return -1;
   }
 });

 const sortedCompanies = companies.sort((a, b) => (a.start > b.start ? 1 : -1));

// Sort ages
 const sortAges = ages.sort((a, b) => a - b);

#javascript

Map Example

 const companyNames = companies.map(function(company) {
   return company.name;
 });

#javascript

JS+fundamentals

undefined

#javascript

Sorting by Value in Array of Objects (List Item Value) - Sort by date

    //? GETTER - GET All Technologies sorted by Date Modified
    allTechnologiesDateSorted(state) {
      return state.allTechnologies.sort((a,b) => (a.dateModified.split("-").join("") < b.dateModified.split("-").join("") ? 1 : -1));
    },

#javascript

switch/case function work with numbers

var Number = prompt("Insert number between 0 and 100");

 if (0<Number<50){
       console.log("Low value");
}else if(50<=Number<100){
       console.log("High value");
}else{
       console.log("not a valid number");
}

#javascript

testing

let nodeCounter = 1;

function addChild() {
    let p = document.createElement("p");
    p.setAttribute('class', 'pnode');
    p.innerHTML = `new node created #${nodeCounter}`;
    document.getElementById("div1").appendChild(p);
    nodeCounter++;
}

#javascript

add child

let nodeCounter = 1;

function addChild() {
    let p = document.createElement("p");
    p.setAttribute('class', 'pnode');
    p.innerHTML = `new node created #${nodeCounter}`;
    document.getElementById("div1").appendChild(p);
    nodeCounter++;
}

#javascript

Find which single item is missing from an array (comparing 2 arrays)

// Example Arrays
let filterArrayB = ['aa', 'ab', 'ac', 'ad', 'ae', 'af', 'ag']
let filterArrayA = ['aa', 'ab', 'ac', 'ae', 'af', 'ag']

// This only works if there is a 1 item difference 
compare = (a,b) => {
  let inBoth = []
  let missingItem = []
  a.forEach(item => {
    for (let i=0; i<b.length; i++){
      if (item == b[i]){
        inBoth.push(item) 
        if (i == b.length) return
      } 
      if (a.length < b.length) {
        b.forEach(item => {
          if (!a.includes(item)){
            missingItem = item
          }
        })
      } else {
          a.forEach(item => {
          if (!b.includes(item)){
            missingItem = item
          }
        })
      }
      
    }
  })
  return missingItem
}

compare(filterArrayA, filterArrayB)

#react.js #javascript

forms class based component

import React from 'react';
import ReactDOM from 'react-dom';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
  myChangeHandler = (event) => {
    this.setState({username: event.target.value});
  }
  render() {
    return (
      <form>
      <h1>Hello {this.state.username}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        onChange={this.myChangeHandler}
      />
      </form>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

#javascript

axios get request

    // Make a request for a user with a given ID
  axios.get('/user?ID=12345')
    .then(function (response) {
      // handle success
      console.log(response);
    })
    .catch(function (error) {
      // handle error
      console.log(error);
    })
     .then(function () {
      // always executed
    }); 


 // Optionally the request above could also be done as
  axios.get('/user', {
      params: {
        ID: 12345
      }
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    })
    .then(function () {
      // always executed
    }); 

  // Want to use async/await? Add the `async` keyword to your outer function/method.
   async function getUser() {
    try {
      const response = await axios.get('/user?ID=12345');
      console.log(response);
    } catch (error) {
      console.error(error);
    }
  }

#javascript

imdb menu

document.onmouseover = function(event){
    var elem = event.target;

    if (elem.id !== 'menu4IMDBlink' && elem.parentNode.id !== "menu4IMDBlink" && document.getElementById("menu4IMDBlink")) {
        document.getElementById("menu4IMDBlink").remove();
    }

    if ((elem.tagName == 'A' || elem.parentNode.tagName == 'A') && elem.className !== "menu_link") {
        var elemHref = elem.tagName == 'A' ?  elem.href : elem.parentNode.href;
        var matchArr = elemHref.match(/\/tt(\d+)[\/\?]/);

        if (matchArr && matchArr[1] && !document.getElementById("menu4IMDBlink")) {
            var menuDiv = document.createElement("div");
            menuDiv.id = "menu4IMDBlink";
            menuDiv.style.zIndex = 6999;
            menuDiv.style.position = "fixed";
            menuDiv.style.backgroundColor = "#EEE";

            var rect = elem.getBoundingClientRect();
            var menuTop = rect.top + rect.height;
            menuDiv.style.top = menuTop + "px"
            menuDiv.style.left = rect.left + "px";
            
            var a = document.createElement("a");
            a.href = "https://www.imdb.com/title/tt" + matchArr[1] + "/episodes?season=-1"
            a.target = "_blank";
            a.innerText = "episodes";
            a.className = "menu_link";
            menuDiv.appendChild(a);
            
            menuDiv.innerHTML += "&nbsp;";
            a = document.createElement("a");
            a.href = "https://opensubtitles.org/uk/search2?IMDBID=" + matchArr[1];
            a.target = "_blank";
            a.innerText = "subs";
            a.className = "menu_link";
            menuDiv.appendChild(a);
            
            menuDiv.innerHTML += "&nbsp;";
            a = document.createElement("a");
            a.href = "https://rarbgmirror.org/torrents.php?imdb=tt" + matchArr[1];
            a.target = "_blank";
            a.innerText = "rarbg";
            a.className = "menu_link";
            menuDiv.appendChild(a);

            document.body.appendChild(menuDiv);
        }
    }
}

#javascript

reactjs - How to fix Gatsby JS Link component retaining scroll position and not resetting to top - Stack Overflow

// in gastby-browser.js
exports.shouldUpdateScroll = ({
  routerProps: { location },
  getSavedScrollPosition,
}) => {
  const { pathname } = location
  // list of routes for the scroll-to-top-hook
  const scrollToTopRoutes = [`/privacy-policy`, `/page-2`]
  // if the new route is part of the list above, scroll to top (0, 0)
  if (scrollToTopRoutes.indexOf(pathname) !== -1) {
    window.scrollTo(0, 0)
  }

  return false
}

#javascript

JS Beautify JSON

JSON.stringify(obj, null, “\t”);

#javascript

JS Mandatory parameters

const hello = (name = mandatory()) => { return console.log(`Hello: ${name}!`)};
hello(’Rick’);

#javascript

JS Convert to boolean

const a = '';
const b = "";
const c = null;
const d = undefined;
const e = NaN;
const f = false;
const g = 1;

console.log(!!a); 
console.log(!!b);
console.log(!!c);
console.log(!!d);
console.log(!!e);
console.log(!!f);
console.log(!!g);

#javascript

JS Get random item from array

let names= ['Evelyn', 'Harper', 'Jackson', 'Avery', 'Jack', 'Eleanor', 'Carter'];
const chooseName = () =>{
	let randomName = names[Math.floor(Math.random() * names.length)];
	return randomName;
}
console.log('Random name:', chooseName(names));

#javascript

JS Remove duplicates from array

const removeDuplicatesFromArray = arr => [...new Set(arr)];
removeDuplicatesFromArray([1,1,2,3,4,4,4,true,true,'foo','foo']);

#javascript

JS Fetch and retry with recursion

const fetch_retry = async (url, options, n) => {
    try {
       response = await fetch(url, options);
       if (response === 200) {
         return response;
       }else{
         throw new Error(response)
       }
    } catch(err) {
      //.1      
      if (n === 1) throw err;
   
      //2.
      response = await fetch_retry(url, options, n - 1);
      if (response === 200) {
         return response;
      }else{
         throw new Error(response)
      }
    }
};
let response = fetch_retry("/someUrl/json", options, 10);

#javascript

JS Fetch and retry

const fetch_retry = async (url, options, n) => {
    let error;
    for (let i = 0; i < n; i++) {
        
        try {
            response = await fetch(url, options);
            if (response === 200) {
               return response;
            }else{
               throw new Error(response)
            }
        } catch (err) {
           error = err;     
           //1.           
           if (i + 1 === n) throw err;
        }
    }
    throw error;
};
let response = fetch_retry("/someUrl/json", options, 10);

#javascript

JS Prefers reduced motion

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion)');

const reduceMotionChanges = () => {
  if (pefersReducedMotion.matches) {
    // Handle reduced motion
  }
}

prefersReducedMotion.addListener(reduceMotionChanges)

#javascript

Vue Date Filter (starter)

// NOTE - See Vue Date Filter for best example - this is 'Vue Date Filter 2'
// which may be helpful in a different way
// the other one accounts for time zone

import DateFilter from './filters/date'
// require('firebase/firestore')
// import { firestorePlugin } from 'vuefire';
// import { db } from './components/fbConfig.js';

Vue.config.productionTip = false;

export const port = () => '3000';
let app = '';

Vue.use(VueRouter);
Vue.use(store);
Vue.filter('date', DateFilter)

#javascript

Vue Date Filter

export default (value) => {
  const date = new Date(value)
  if (!value) return ""
  else return date.toLocaleString(['en-US'], {month: 'short', day: '2-digit', year: 'numeric'})

  // THE DATE MAY BE OFF DUE TO TIME ZONES - USE toLocaleDateString and add a timezone to prevent that
  // as long as time isn't being used, this is the better option:
  return date.toLocaleDateString(['en-US'], {month: 'short', day: '2-digit', year: 'numeric', timeZone: 'UTC'})

}

#javascript

javascript code to check special characters - Stack Overflow

function isValid(str){
 return !/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str);
}

#react.js #javascript

Add parens to area code of phone number

export const addParensToFormatAreaCode = (phone?: string) => {
  const phoneParts = phone?.split("-");
  if (phoneParts !== undefined && phoneParts[0] !== "") {
    const phoneJoin: string = `(${phoneParts[0]}) ${phoneParts[1]}-${phoneParts[2]}`;
    return phoneJoin;
  }
  return strings.DEFAULT;
};

#javascript

javascript - Fix the upstream dependency conflict installing NPM packages - Stack Overflow

npm install --legacy-peer-deps

#javascript

Shifting Elements in JS

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2> 

<h2>shift()</h2>

<p>The shift() method removes the first element of an array (and "shifts" all other elements to the left):</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

#javascript

Join all array elements into string/ JS

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2> 

<h2>join()</h2>

<p>The join() method joins array elements into a string.</p>

<p>It this example we have used " * " as a separator between the elements:</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>

</body>
</html>

#javascript

JS Expression

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Expressions</h2>

<p>Expressions compute to values.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 * 10;
</script>

</body>
</html>

#javascript

JS Arrays

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

#javascript

Add two strings

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>If you add two numeric strings, the result will be a concatenated string:</p>

<p id="demo"></p>

<script>
var x = "10";
var y = "20";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

#javascript

Add two numbers

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>If you add two numbers, the result will be a number:</p>

<p id="demo"></p>

<script>
var x = 10;
var y = 20;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

#javascript

String length

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Properties</h2>

<p>The length property returns the length of a string:</p>

<p id="demo"></p>

<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
document.getElementById("demo").innerHTML = sln;
</script>

</body>
</html>

#javascript

JS Strings

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p id="demo"></p>

<script>
var x = "John Doe";  // String written inside quotes
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

#javascript

JS Events

<!DOCTYPE html>
<html>
<body>

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p>

</body>
</html>

#javascript #react.js

Create a Styled Motion Component

const StyledMotionComponent = styled(motion.div)`

  /* ----- styles go here ----- */

`

#javascript

javascript - Creation of a multi-level JSON string - Stack Overflow

 {"countries":[
    {
        "name":"USA",

        "grandfathers":[
            {
                "gFName":"Steve",
                "grandfathersKid":[
                    {
                        "gFKName": "Linda",
                        "kid": [{
                            "name": "Steve JR", 
                            "friends": [{
                                "name": "Kriss|John|Martin|Steven"
                            }]
                        }
                        ]
                    }

                ]
            }
        ]
    }
]}

#javascript

How Recursion Works — Explained with Flowcharts and a Video

function countdown(i) {
    console.log(i)  if (i <= 1) {  // base case
        return;
    } else {     // recursive case
        countdown(i - 1);
    }
}

countdown(5);    // This is the initial call to the function.

#javascript

JS function

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>This example calls a function which performs a calculation and returns the result:</p>

<p id="demo"></p>

<script>
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
  return a * b;
}
</script>

</body>
</html>

#javascript

The += operator

<!DOCTYPE html>
<html>
<body>

<h2>The += Operator</h2>

<p id="demo"></p>

<script>
var x = 10;
x += 5;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

#javascript

The assignment operators in JS

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Operators</h2>

<p>x = 5, y = 2, calculate z = x + y, and display z:</p>

<p id="demo"></p>

<script>
var x = 5;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

#javascript

Multi-lines comment in JS

<!DOCTYPE html>
<html>
<body>

<h1 id="myH"></h1>
<p id="myP"></p>

<script>
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
*/
document.getElementById("myH").innerHTML = "JavaScript Comments";
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>

</body>
</html>

#javascript

JS comments

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comments</h2>

<p id="demo"></p>

<script>
var x = 5;    // Declare x, give it the value of 5
var y = x + 2;  // Declare y, give it the value of x + 2 
// Write y to demo:
document.getElementById("demo").innerHTML = y;
</script>


</body>
</html>

#javascript

Clear HTML table

var clearTable = function(tableId) {
  var tableToClear = document.getElementById(tableId);
  while (tableToClear.rows.length > 1) {
    tableToClear.deleteRow(1);
  }
}

#javascript

Build HTML Table from Object Array

var buildTable = function(tableId, tData) {
  var tableRef = document.getElementById(tableId);
  tData.forEach(dataObj => {
    var row = tableRef.insertRow(1);
    Object.values(dataObj).forEach(val => {
      var dataColumn = document.createElement("td");
      dataColumn.innerHTML = val;
      row.appendChild(dataColumn);
    });
  });
}

#javascript #typescript #angular #react.js

Ukázka použití zpětných uvozovek

`Pomoci zpětné uvozovky vytvoříte speciální řetězec, který lze psát na více 
 řádků a dají se do něj vkládat výrazy ${ 1+2 }, proměnné ${ x+y }, pole ${ seznam[0] },
 objekty ${ uzivatelske.jmeno } a dokonce ihned volané funkce ${ function() { return x+y; }() } 
 nebo metody ${ "sidon".toUpperCase() }.`

#javascript

Recursive ternary

function pow(x, n) {
  return (n == 1) ? x : (x * pow(x, n - 1));
}

#typescript #javascript #html #css

The Fight Within Conference 2020. • The Armor Of God.

https://confva.com/

#javascript #typescript #react.js #next.js

Simple Map for an array

      {arr.map(({ what ever you want to get from map }) => (
        <div>
			code goes here to display through html elements
        </div>
      ))}

#javascript #object #map

Converts Object to Map and Map to Object

const myObject= {
  'Age': '25',
  'Gender': 'Male',
  'Nationality': 'Australian'
};

const myMap = new Map(Object.entries(myObject)); //object to map
const anotherObject = Object.fromEntries(myMap) // map to object

#javascript

Type Conversions

alert( Boolean("0") ); // true
alert( Boolean(" ") ); // spaces, also true (any non-empty string is true)

#html #javascript

Import.html

<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
	
    <!-- U Chen CSS -->
	<link rel="stylesheet" href="homeStyle.css">
	
	<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
	
	<!-- Font Awesome Icons -->
	<script src="https://kit.fontawesome.com/a076d05399.js"></script>

#php #javascript

Add GTM to WordPress

add_action('wp_head', 'add_gtm');

function add_gtm() {
	?>
	{{INSERT SCRIPT HERE}}
<?php
}

add_action( 'wp_body_open', 'add_gtm_no_script' );

function add_gtm_no_script() {
	?>
	{{INSERT SCRIPT HERE}}
<?php
}

#laravel #javascript

Pass the search parameters into a request that has set of filter parameters

<button type="submit" id="customers_filter" onclick="checkWhetherTheTableContainsSearchResults()"
                                class="btn filter-button d-inline-block ml-3">
                                Filter
                            </button>
                            
<input id="search-hidden-input" hidden name="searchValue">

<script>
function checkWhetherTheTableContainsSearchResults() {
        let search = location.search.substring(1)
            searchInputElement = document.getElementById('search-hidden-input');
        
        if(search != '') {
            searchInputElement.setAttribute('value', search);
        }
    }
</script>
    
// If the filter is to work on search results, the original search parameter has to be passed into the request array.
        // Thus, the request array will return more than one parameter 
        // AND
        // one of the parameters will be searchValue
        // WHICH
        // will contain the entire search parameter (key + value)

        if ((count($request->all()) > 1) && (isset($request->searchValue))) {
            if (strpos($request->searchValue, '=')) {
                $string = $request->searchValue;
                $array = explode('=', $string);
                $request->searchValue = $array[1];
            }
        }

#javascript

show div content on hover angular - Google Search

<div (mouseover)="changeText=true" (mouseout)="changeText=false">
  <span *ngIf="!changeText">Hide</span>
  <span *ngIf="changeText">Show</span>
</div>

#javascript

javascript - Bible Verse Regex - Stack Overflow

(?:\d\s*)?[A-Z]?[a-z]+\s*\d+(?:[:-]\d+)?(?:\s*-\s*\d+)?(?::\d+|(?:\s*[A-Z]?[a-z]+\s*\d+:\d+))?

#javascript

JavaScript forEach 2 – How to Loop Through an Array in JS

numbers.forEach((number, index, array) => {
    console.log(array);
});

numbers.forEach((number, index) => {
    console.log('Index: ' + index + ' Value: ' + number);
});

#javascript

JavaScript forEach – How to Loop Through an Array in JS

numbers.forEach(function(number) {
    console.log(number);
});

numbers.forEach(function() {
    // code
});

#javascript

String.prototype.includes()

const str = 'To be, or not to be, that is the question.' 

console.log(str.includes('To be'))        // true
console.log(str.includes('question'))     // true
console.log(str.includes('nonexistent'))  // false
console.log(str.includes('To be', 1))     // false
console.log(str.includes('TO BE'))        // false
console.log(str.includes(''))             // true

#javascript

Scheduling: setTimeout and setInterval

function sayHi(phrase, who) {
  alert( phrase + ', ' + who );
}

setTimeout(sayHi, 1000, "Hello", "John"); // Hello, John

#javascript

iterate over a JSON array in Node.js

var tables = [
    { "art":"A","count":"0","name":"name1","ean":"802.0079.127","marker":"null","stammkost":"A","tablename":"IWEO_IWBB_01062015" },
    { "art":"A","count":"0","name":"2","ean":"657.7406.559","marker":"null","stammkost":"A","tablename":"IWEO_IWBB_02062015" }
];

tables.forEach(function(table) {
    var tableName = table.name;
    console.log(tableName);
});

#javascript

SET INTERVAL

function tick() {
  //get the mins of the current time
  var mins = new Date().getMinutes();
  if (mins == "00") {
    alert('Do stuff');
  }
  console.log('Tick ' + mins);
}

setInterval(tick, 1000);

#javascript

try-catch? | Node.js

console.log("entering try-catch statement");

try {
  console.log("entering try block");
  throw "thrown message";
  console.log("this message is never seen");
}
catch (e) {
  console.log("entering catch block");
  console.log(e);
  console.log("leaving catch block");
}
finally {
  console.log("entering and leaving the finally block");
}

console.log("leaving try-catch statement");

#javascript

Loop over an Array

fruits.forEach(function(item, index, array) {
  console.log(item, index)
})
// Apple 0
// Banana 1

#javascript

Prevent duplicate values to be added to an array.

if (array.includes(value) === false) array.push(value);

#javascript

Integer division in Javascript - avoiding wrong negatives and floats as results | Nick the Coder

function intDiv(a,b)
{
var result = a/b;
if(result>=0)
return Math.floor(result);
else
return Math.ceil(result);
}

#javascript

Array.prototype.concat() (3 arrays) - JavaScript | MDN

const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

const numbers = num1.concat(num2, num3);

console.log(numbers); 
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]

#javascript

Array.prototype.concat() (2 arrays) - JavaScript | MDN

const letters = ['a', 'b', 'c'];
const numbers = [1, 2, 3];

letters.concat(numbers);
// result in ['a', 'b', 'c', 1, 2, 3]

#javascript

Conditional (ternary) operator shortcut for if-else - JavaScript | MDN

function example(…) {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

// Equivalent to:

function example(…) {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

#typescript #javascript #express #nodejs #bash

Config, Compile and Run TypeScript with Concurrently, Nodemon, & Express

// BASH
mkdir src
mkdir build
touch src/index.ts
touch .gitignore
touch README.md
tsc -y
npm init -y
npm install nodemon concurrently @types/express --save-dev

// package.json
...
"scripts": {
  "start:build": "tsc -w",
  "start:run": "nodemon ./build/index.js",
  "start": "concurrently npm:start:*"
},
...

// tsconfig.json
...
"outDir": "./build",
"rootDir": "./src",
...

// .gitignore
node_modules
*.env

// README.md
### Start
```bash
npm run start
```

// src/index.ts
import express from 'express'
const port = 3000
const app = express()

console.log("Hello, World!!!")

logSomething("This is a string that I'm logging")

app.listen(port, () => {
  console.log(`Listening on port ${port}`)
})

#javascript

capitalize string javascript - Google Search

//capitalize only the first letter of the string. 
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}
//capitalize all words of a string. 
function capitalizeWords(string) {
    return string.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
};

#javascript

find the largest number in a JavaScript array? - Stack Overflow

var array = [267, 306, 108];
var largest = Math.max.apply(Math, array); // 306

#javascript

date - setting day of week in javascript - Stack Overflow

var date, daytoset; // given: a Date object and a integer representing the week day

var currentDay = date.getDay();
var distance = daytoset - currentDay;
date.setDate(date.getDate() + distance);

#javascript #typescript

50% Probability with JS/TS (m/f example)

let rand = Math.random()
rand < 0.5 ? gender = 0 : gender = 1
this.name = `${gender ? '👩‍💼' : '👨‍💼'} ${faker.name.firstName(gender)} ${faker.name.lastName(gender)}`

#javascript #react.js #yup

Check The Password Confirmation With Yup - Today I Learned

import * as Yup from 'yup';

validationSchema: Yup.object({
  password: Yup.string().required('Password is required'),
  passwordConfirmation: Yup.string()
     .oneOf([Yup.ref('password'), null], 'Passwords must match')
});

#javascript

Javascript design patterns - Module pattern - Object - POO

const bookModule = (function() {
  // private
  let title = ‘JavaScript’;
  let price = 15;
  // public
  return {
    printTitle: function () {
      console.log(title);
    }
  }
})();
bookModule.printTitle(); // JavaScript

#javascript

Javascript design patterns - Singleton pattern - Object - POO

const utils = (function () {
  let instance;
  
  function initialize() {
    return {
      sum: function (a, b) {
        return a + b;
      }
    };
  }
  return {
    getInstance: function () {
      if (!instance) {
        instance = initialize();
      }
      return instance;
    }
  };
})();
let sum = utils.getInstance().sum(3, 5); // 8

#javascript

Javascript design patterns - Prototype pattern - Object - POO

function Book(title, price) {
  this.title = title;
  this.price = price;
  this.printTitle = () => console.log(this.title);
}
function BookPrototype(prototype) {
  this.prototype = prototype;
  this.clone = () => {
    let book = new Book();
    book.title = prototype.title;
    book.price = prototype.price;
    
    return book;
  };
}
let sampleBook = new Book(‘JavaScript’, 15);
let prototype = new BookPrototype(sampleBook);
let book = prototype.clone();
book.printTitle();

#javascript

Javascript design patterns - Constructor pattern - Object - POO

// Using {} to create empty objects:
let person = {};
// Using Object() to create empty objects:
let person = new Object();
// Using function constructor:
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.showName = () => console.log(this.name);
}
let person = new Person(‘Amy’, 28);
person.showName();

#javascript

Promise - Async/Await - Ajax - Request

function getBook(bookId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let book = {
        title: ‘JavaScript’,
        authorId: ‘123’
      }
    
      resolve(book);
    }, 500);
  });
}
function getAuthor(authorId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let author = {
        name: ‘Amy’,
        age: 28
      }
      resolve(author);
    }, 500);
  });
}
async function fetchData() {
  let book = await getBook(2020);
  let author = await getAuthor(book.authorId);
  console.log(author)
}
fetchData(); // { name: ‘Amy’, age: 28 }

#javascript

ES6 snippet - JavaScript - Copy to clipboard - Copy string

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  const selected =
    document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
  if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  }
};

// Example
copyToClipboard('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard.

#javascript #http #get #url

ES6 snippet - JavaScript - GET parameters - GET URL parameters

const getURLParameters = url =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
    {}
  );

// Examples
getURLParameters('http://url.com/page?n=Adam&s=Smith'); // {n: 'Adam', s: 'Smith'}
getURLParameters('google.com'); // {}

#javascript

ES6 snippet - JavaScript - Detect device type

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    ? 'Mobile'
    : 'Desktop';

// Example
detectDeviceType(); // "Mobile" or "Desktop"

#javascript

ES6 snippet - JavaScript - scroll to top snippet - window - scrolltotop btn

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};

// Example
scrollToTop();

#javascript

ES6 snippet - JavaScript - scroll snippet - window

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

// Example
getScrollPosition(); // {x: 0, y: 200}

#javascript

Open all external links in new window

document.querySelectorAll('body a').forEach((val) => {
  let linkCheck = new RegExp('/' + window.location.host + '/')
  if (!linkCheck.test(val.href)) {
	let currentRel = val.getAttribute('rel')
    val.setAttribute('target', '_blank')
	if (currentRel) {
		val.setAttribute('rel', 'noreferrer noopener ' + val.getAttribute('rel'))
	} else {
		val.setAttribute('rel', 'noreferrer noopener')
	}
  }
})


//Replace 'body a' with desired selector

#javascript

flatten an array of arrays (also array of arrays objects)

const arr = [1, 2, [3, 4, [5, 6]]];
arr.flat();

#javascript

get list of only duplicates from a list of objects with duplicate objects

// filterProperty i.e. 'id' or 'name'
function GetDuplicates(array, filterProperty) {
	//lookup with our intended filter to get the duplicates by a given property
    const lookup = array.reduce((a, e) => {
        a[e.filterProperty] = ++a[e.filterProperty] || 0;
        return a;
    }, {});
    
    let duplicates = array.filter(e => lookup[e.filterProperty]);
    
    return duplicates;
}

#javascript

get list of unique items from a list of objects with duplicate objects

// filterProperty i.e. 'id' or 'name'
function GetUniqueItems(array, filterProperty) {
	return array
    .map(e => e['filterProperty'])
    .map((e, i, final) => final.indexOf(e) === i && i)
    .filter(obj=> array[obj])
    .map(e => array[e]);
}

#javascript

React - Router

    <Router>
        <div className="app">
            <GlobalContextProvider>
                <Header />
                <Switch>
                    <Route path="/CodeSystem" component={PageCodeSystem} />
                    <Route path="/ValueSet" component={PageValueSet} />
                    <Route path="/RefSets" component={PageRefSets} />
                    <Route path="/" exact component={HomePage} />
                </Switch>
            </GlobalContextProvider>
        </div>
    </Router>

#javascript

sort array javascript - Google Search

var points = [40, 100, 1, 5, 25, 10];
points.sort((a,b) => a-b)

#scroll #javascript

Scroll into a div with buttons

https://codepen.io/robertostringa/pen/XWKEeRw

#javascript

use App network info hook

import { useNetInfo } from '@react-native-community/netinfo';

const useAppNetworkInfo = () => {
  const netInfo = useNetInfo();
  const count = useRef(0);
  const isConnected = useRef(false);
  useEffect(() => {
    if (count.current > -1) {
      if (netInfo?.isConnected && netInfo?.isInternetReachable) {
        if (!isConnected.current) {
          if (count.current > 2) {
            Toast.success(i18next.t('global.onlineAlert', 10));
          }
        }
        const socket = GlobalLib.SocketClient.get();
        if (socket && typeof socket.open === 'function') {
          socket.open();
        }
        isConnected.current = true;
      } else {
        if (isConnected.current) {
          Toast.offline(i18next.t('global.offlineAlert', 10));
        }
        isConnected.current = false;
      }
    }
    count.current = count.current + 1;
  }, [netInfo]);
};

#javascript

use Socket hook

import { useEffect, useRef } from 'react';
import { useSelector } from 'react-redux';

const useAppSocket = () => {
  const token = useSelector(selectAccessToken());
  const user = useSelector(selectUser());
  const { set: setChatAccount } = useSharedValue(
    AppConstants.sharedValueKey.CHAT_ACCOUNT,
    {},
  );
  const socket = useRef(null);
  useEffect(() => {
    if (user && token) {
      socket.current = new SocketClient({
        userId: user.id,
        userIdentityName: user.identityName,
        token: token,
        onSocketError: () => {},
        onChatInfo: setChatAccount,
      });
      GlobalLib.SocketClient.set(socket.current);
    }
  }, [token, user, setChatAccount]);

  return {
    get: GlobalLib.SocketClient.get,
    socket,
  };
};

#javascript

useReduxValue hook

import { useCallback, useEffect } from 'react';
import { useDispatch, useSelector, useStore } from 'react-redux';
import { combineReducers } from 'redux';

// add to store object
// const reducerMap = {
// };
// store.reducerMap = reducerMap;
//


const useSharedValue = (key, defaultValue) => {
  const reducer = useCallback(
    (state = defaultValue, action) => {
      switch (action.type) {
        case `SHARED_VALUE_ACTION_KEY/${key}`:
          return action.payload.value;

        default:
          return state;
      }
    },
    [key, defaultValue],
  );
  const action = useCallback(
    value => ({
      type: `SHARED_VALUE_ACTION_KEY/${key}`,
      payload: { value },
    }),
    [key],
  );
  const selector = useCallback(() => state => state[key] || defaultValue, [
    defaultValue,
    key,
  ]);

  const store = useStore();
  useEffect(() => {
    if (store?.reducerMap) {
      store.replaceReducer(
        combineReducers({
          ...store.reducerMap,
          [key]: reducer,
        }),
      );
      store.reducerMap[key] = reducer;
    }
  }, [store, reducer, key]);

  const data = useSelector(selector());
  const dispatch = useDispatch();
  const set = useCallback(value => dispatch(action(value)), [dispatch, action]);

  return {
    data,
    set,
  };
};

#javascript

useLogout Hook

import { useCallback, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

/**
 * @description Get me API hook. Perform the get me API call when component mounted
 * @returns {Object}
 */
const useLogout = () => {
  const dispatch = useDispatch();
  const token = useSelector(selectAccessToken());
  const Loading = useRef(GlobalLib.Loading.get());
  const callLogout = useCallback(async () => {
    try {
      Loading.current.show();
      await ApiLib.authApi.postApiV1AuthLogout(
        UtilLib.getAuthorizationHeaders(token),
      );
      dispatch(updateAccessToken(null));
      dispatch(updateUser({}));
      NavigationServiceLib.reset(screens.Launch);
    } catch (error) {
    } finally {
      Loading.current.hide();
    }
  }, [dispatch, token]);
  return {
    logout: callLogout,
  };
};

#javascript

Get me hooks

import { useCallback, useRef, useState } from 'react';
import { useAsync } from 'react-async';
import SplashScreen from 'react-native-splash-screen';

/**
 * @description Get me API hook. Perform the get me API call when component mounted
 * @returns {Object}
 */
const useGetMe = () => {
  const dispatch = useDispatch();
  const token = useSelector(selectAccessToken());
  const lastCallInstance = useRef(null);
  const getUserProfile = useCallback(
    async ({ accessToken }) => {
      if (lastCallInstance.current) {
        clearTimeout(lastCallInstance.current);
      }
      const cancelToken = setTimeout(async () => {
        try {
          const { data } = await ApiLib.accountApi.getApiV1AccountsMe(
            UtilLib.getAuthorizationHeaders(accessToken),
          );
          SplashScreen.hide();
          dispatch(updateUser(data?.data));
          await UtilLib.delay(1000);
          NavigationServiceLib.reset(screens.Main);
        } catch (error) {
          await UtilLib.delay(1000);
          SplashScreen.hide();
          NavigationServiceLib.reset(screens.Login);
        }
      }, 1000);
      lastCallInstance.current = cancelToken;
    },
    [dispatch],
  );
  useAsync({ promiseFn: getUserProfile, accessToken: token, watch: token });
};

#javascript

Scroll - to - Top Button with Vanilla JS - Detecting the scroll position

var scrollToTopBtn = document.querySelector(".scrollToTopBtn")

var rootElement = document.documentElement



function handleScroll() {

  // Do something on scroll

  var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight

  if ((rootElement.scrollTop / scrollTotal ) > 0.0) {
8
    // Show button

    scrollToTopBtn.classList.add("showBtn")

  } else {

    // Hide button

    scrollToTopBtn.classList.remove("showBtn")

  }

}



function scrollToTop() {

  // Scroll to top logic

  rootElement.scrollTo({

    top: 0,

    behavior: "smooth"

  })

}

scrollToTopBtn.addEventListener("click", scrollToTop)

#javascript

JavaScript Essentials - Types - Tests - Vars - Variables - Loops - data structures - function - operators - conditionals

1. Number 
2. String
3. Boolean
4. Undefined
5. Null
6. Symbol (new in ECMAScript 6)
7. Object


!==
===
>=
<=
>
<


var
let (new in ECMAScript 6)
const (new in ECMAScript 6)


if
else
else if
ternary operator
switch


&&
||
!


var a = function name() {}
function name() {}
return
() => (fat arrow function — new in ECMAScript 6)


Array
Object


or
while
do 
forEach (new in ECMAScript 5) 
forin (new in ECMAScript 5) 
forof (new in ECMAScript 5)


LET and CONST variables 
Hoisting variables (LET and CONST) 
Arrow => function short hand 
Arrow functions and THIS
Function default parameter values
Object literals short hand
Rest … operator 
Spread … operator 
For Of Loop
Template literals
Destructing arrays[ ] with default parameters
Destructing {Objects} with alias

#javascript

JavaScript Fetch API - Async Await - Ajax

// Get wrapper
const get = async (url, callback) => {   
  const response = await fetch(url)   
  const status = await response.status      
  if (callback) callback[status](await response.json()) 
}  
// Get usage based callback
get(url, {   
  200: body => doSomething,   
  401: body => showSignInModal,   
  403: body => redirectToSafeArea,   
  422: body => showModalWithInstruction 
})

#javascript #ajax

JavaScript Fetch API - Ajax - Request

// GET Request.
fetch('https://api.github.com/users/rich-harris')
  // Handle success
  .then(response => response.json())  // convert to json
  .then(json => console.log(json))    // print data to console
  .catch(err => console.log('Request Failed', err)); // Catch errors

#javascript #html

insertAdjacentHTML - DOM - Insert HTML - Add html tag

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

list.insertAdjacentHTML('beforebegin', myDiv);

#javascript #html

Adding HTML to the page - append

myDiv.appendChild(image);

#javascript #html #css

Create HTML using JavaScript

image.src = 'http://placekitten.com/200/300';
image.width = 250;
image.classList.add('cute');
image.alt = 'Cute Kitten';

#javascript

Scaled/Proportional Content with CSS and JavaScript | CSS-Tricks

var scale = Math.min( 
  availableWidth / contentWidth, 
  availableHeight / contentHeight 
);

#svelte #javascript

svelte-toggle@1.0.0 • REPL • Svelte

<script>
  import Toggle from "svelte-toggle@1.0.0";

  let toggled = false;
</script>

<svelte:head>
	<!-- override REPL button margin rule -->
	<style>button{margin:0}</style>
</svelte:head>
        
<Toggle
  label="My toggle label"
  switchColor="#eee"
  toggledColor="#24a148"
  untoggledColor="#fa4d56"
  on="On"
  off="Off"
  bind:toggled />

#javascript

reactjs - Why is there no onchange for `<Input>` in Ant design - Stack Overflow

<Input
     placeholder="Flight name"
     size="large"
     value={this.state.someVal || ''}
     onChange={this.onChange}
   />
onChange = (e) => {
  this.setState({someVal: e.target.value})
}

#javascript

js code for getting results from fetch and parsing to display results w/ links.

var repoNameEl = document.querySelector('#repo-name');
var issueContainerEl = document.querySelector('#issues-container');
var limitWarningEl = document.querySelector('#limit-warning');

var getRepoName = function () {
  // Where is this value coming from?
  // TODO: from the URL and returns a string.  
  var queryString = document.location.search;
  //splits string into array.
  var repoName = queryString.split('=')[1];//takes second element of array/repor name

  if (repoName) {
    repoNameEl.textContent = repoName;

    getRepoIssues(repoName);  //calls repo issues for that repo
  } else {
    // Under what condition will this run?
    // TODO: Write your answer here 
    document.location.replace('./index.html');
  }
};

var getRepoIssues = function (repo) {
  var apiUrl = 'https://api.github.com/repos/' + repo + '/issues?direction=asc';

  fetch(apiUrl).then(function (response) {
    if (response.ok) {
      response.json().then(function (data) {
        displayIssues(data);

        // What is this checking for? Under what condition will this be `true`?
        // TODO: link is a response from the github there are more than 30 issues.
        if (response.headers.get('Link')) {
          displayWarning(repo);
        }
      });
    } else {
      document.location.replace('./index.html');
    }
  });
};

var displayIssues = function (issues) {
  // Is there a difference between this and `!issues.length`?
  // TODO: Write your answer here
  if (issues.length === 0) {
    issueContainerEl.textContent = 'This repo has no open issues!';
    return;
  }

  for (var i = 0; i < issues.length; i++) {
    var issueEl = document.createElement('a');
    issueEl.classList = 'list-item flex-row justify-space-between align-center';
    issueEl.setAttribute('href', issues[i].html_url);
    issueEl.setAttribute('target', '_blank');

    var titleEl = document.createElement('span');
    titleEl.textContent = issues[i].title;
    issueEl.appendChild(titleEl);

    var typeEl = document.createElement('span');

    if (issues[i].pull_request) {
      typeEl.textContent = '(Pull request)';
    } else {
      typeEl.textContent = '(Issue)';
    }

    issueEl.appendChild(typeEl);

    issueContainerEl.appendChild(issueEl);
  }
};

// What does this function do?
// TODO: if 'link' is returned, this runs to create a link to the issues.
var displayWarning = function (repo) {
  limitWarningEl.textContent = 'To see more than 30 issues, visit ';

  var linkEl = document.createElement('a');
  linkEl.textContent = 'GitHub.com';
  linkEl.setAttribute('href', 'https://github.com/' + repo + '/issues');
  linkEl.setAttribute('target', '_blank');

  // Where does this appear on the page?
  // TODO: appends it to the bottom of the page
  limitWarningEl.appendChild(linkEl);
};

getRepoName();

#javascript

javascript for grabbing attribute from element/use in planner app

var buttonClickHandler = function (event) {
  // What is `event.target` referencing?
  // TODO: Write your answer here
  var language = event.target.getAttribute('data-language');
 //event target uses get attribute from the 
  // Why is this `if` block in place?
  // TODO: Write your answer here
  if (language) {
    getFeaturedRepos(language);

    repoContainerEl.textContent = '';
  }
};

#javascript

good example for button click handler

var buttonClickHandler = function (event) {
  // What is `event.target` referencing?
  // TODO: Write your answer here
  var language = event.target.getAttribute('data-language');
 //event target uses get attribute from the 
  // Why is this `if` block in place?
  // TODO: Write your answer here
  if (language) {
    getFeaturedRepos(language);

    repoContainerEl.textContent = '';
  }
};

#javascript

findLastIndex

const findLastIndex = (array, predicate) => {
    let l = array.length;
    while (l--) {
        if (predicate(array[l], l, array)) {
            return l;
        }
    }

    return -1;
};

#javascript #html

Element.insertAdjacentElement() - beforebegin - afterend - beforeend - afterbegin - insert node element

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

beforeBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement('beforebegin', tempDiv);
  }
  setListener(tempDiv);
});

afterBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement('afterend', tempDiv);
  }
  setListener(tempDiv);
});

#javascript #typescript

Deep merging of JS objects (in TypeScript)

interface IIsObject {
  (item: any): boolean;
}

interface IObject {
  [key: string]: any;
}

interface IDeepMerge {
  (target: IObject, ...sources: Array<IObject>): IObject;
}

/**
 * @description Method to check if an item is an object. Date and Function are considered
 * an object, so if you need to exclude those, please update the method accordingly.
 * @param item - The item that needs to be checked
 * @return {Boolean} Whether or not @item is an object
 */
export const isObject: IIsObject = (item: any): boolean => {
  return (item === Object(item) && !Array.isArray(item));
};

/**
 * @description Method to perform a deep merge of objects
 * @param {Object} target - The targeted object that needs to be merged with the supplied @sources
 * @param {Array<Object>} sources - The source(s) that will be used to update the @target object
 * @return {Object} The final merged object
 */
export const deepMerge: IDeepMerge = (target: IObject, ...sources: Array<IObject>): IObject => {
  // return the target if no sources passed
  if (!sources.length) {
    return target;
  }

  const result: IObject = target;

  if (isObject(result)) {
    const len: number = sources.length;

    for (let i = 0; i < len; i += 1) {
      const elm: any = sources[i];

      if (isObject(elm)) {
        for (const key in elm) {
          if (elm.hasOwnProperty(key)) {
            if (isObject(elm[key])) {
              if (!result[key] || !isObject(result[key])) {
                result[key] = {};
              }
              deepMerge(result[key], elm[key]);
            } else {
              if (Array.isArray(result[key]) && Array.isArray(elm[key])) {
                // concatenate the two arrays and remove any duplicate primitive values
                result[key] = Array.from(new Set(result[key].concat(elm[key])));
              } else {
                result[key] = elm[key];
              }
            }
          }
        }
      }
    }
  }

  return result;
};

#angular #javascript

angularfire example app

import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { isDevMode, NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

import { AngularFireModule } from '@angular/fire';
import { AngularFireStorageModule } from '@angular/fire/storage';

import {
  AngularFireAnalyticsModule,
  DEBUG_MODE as ANALYTICS_DEBUG_MODE,
  ScreenTrackingService,
  UserTrackingService
} from '@angular/fire/analytics';

import { FirestoreComponent } from './firestore/firestore.component';

import { AngularFireDatabaseModule, URL as DATABASE_URL } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFirestoreModule, SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/firestore';
import { AngularFireMessagingModule } from '@angular/fire/messaging';
import { AngularFireFunctionsModule, ORIGIN as FUNCTIONS_ORIGIN } from '@angular/fire/functions';
import { AngularFireRemoteConfigModule, SETTINGS as REMOTE_CONFIG_SETTINGS } from '@angular/fire/remote-config';
import { AngularFirePerformanceModule, PerformanceMonitoringService } from '@angular/fire/performance';
import { AngularFireAuthGuardModule } from '@angular/fire/auth-guard';
import { DatabaseComponent } from './database/database.component';
import { StorageComponent } from './storage/storage.component';
import { RemoteConfigComponent } from './remote-config/remote-config.component';
import { HomeComponent } from './home/home.component';
import { AuthComponent } from './auth/auth.component';
import { MessagingComponent } from './messaging/messaging.component';

const shouldUseEmulator = () => false;

@NgModule({
  declarations: [
    AppComponent,
    StorageComponent,
    FirestoreComponent,
    DatabaseComponent,
    RemoteConfigComponent,
    HomeComponent,
    AuthComponent,
    MessagingComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserTransferStateModule,
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireStorageModule,
    AngularFireAnalyticsModule,
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFirestoreModule.enablePersistence({ synchronizeTabs: true }),
    AngularFireMessagingModule,
    AngularFireFunctionsModule,
    AngularFireRemoteConfigModule,
    AngularFirePerformanceModule,
    AngularFireAuthGuardModule
  ],
  providers: [
    UserTrackingService,
    ScreenTrackingService,
    PerformanceMonitoringService,
    {
      provide: ANALYTICS_DEBUG_MODE,
      useFactory: () => isDevMode()
    },
    {
      provide: DATABASE_URL,
      useFactory: () => shouldUseEmulator() ? `http://localhost:9000?ns=${environment.firebase.projectId}` : undefined
    },
    { provide: FIRESTORE_SETTINGS, useFactory: () => shouldUseEmulator() ? { host: 'localhost:8080', ssl: false } : {} },
    { provide: FUNCTIONS_ORIGIN, useFactory: () => shouldUseEmulator() ? 'http://localhost:9999' : undefined },
    { provide: REMOTE_CONFIG_SETTINGS, useFactory: () => isDevMode() ? { minimumFetchIntervalMillis: 10_000 } : {} }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

#javascript

onload - js event - body event - event

<body onload="window.alert('Document is loaded!');">

#javascript

Javascipt reduce (Objects)

[{value:5}, {value:10}].map(item => item.value).reduce((previousValue, currentValue) => {return previousValue + currentValue })

>> 15

#javascript

Function in JavaScript that can be called only once - Stack Overflow

var something = (function() {
    var executed = false;
    return function() {
        if (!executed) {
            executed = true;
            // do something
        }
    };
})();

something(); // "do something" happens
something(); // nothing happens

#javascript

How to store an array in localstorage js

// Store an array in local storage

// The array to store
var array = [1, 2, 3];
// Store after JSON stringifying (is this a verb?) it
localStorage.setItem('myArray', JSON.stringify(array));

// Get an array from local storage

// Retrieve the array from local storage
var array = localStorage.getItem('myArray');
// Parse it to something usable in js
array = JSON.parse(array);

#javascript #react.js

Remote Table Hook

const useRemoteTable = ({ promiseFn, searchOption, defaultOrder, columnSchema = [] }) => {
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(10);
  const [order, setOrder] = useState(defaultOrder);
  const [reloadTimeStamp, setTimeStamp] = useState(Date.now());

  const onChange = (onChangeNest) => (pagination, filter, sorter, ...args) => {
    if (pagination.current !== page) {
      setPage(pagination.current);
    }
    if (pagination.pageSize !== limit) {
      setPage(1);
      setLimit(pagination.pageSize);
    }
    if (!isEmpty(sorter) && sorter.column) {
      const newOrder = map(columnSchema, (item, index) =>
        index === sorter.column?.columnIndex ? sorter.order : false
      );
      setOrder(newOrder);
    } else {
      setOrder(undefined);
    }
    onChangeNest(pagination, filter, sorter, ...args);
  };

  const reload = useCallback(() => {
    setTimeStamp(Date.now());
  }, []);

  useEffect(() => {
    setPage(1);
  }, [searchOption]);

  const watchWalue = useMemo(
    () => ({
      limit,
      page,
      order,
      searchOption,
      reload: reloadTimeStamp
    }),
    [limit, order, page, reloadTimeStamp, searchOption]
  );

  const { data, error, isPending } = useAsync({
    promiseFn,
    searchOption,
    watch: watchWalue,
    pagination: {
      order: getOrderFromTableToAPI(order),
      orderField: columnSchema[findIndex(order, (i) => i)],
      skip: (page - 1) * limit,
      limit
    }
  });
  return {
    loading: isPending,
    reload,
    page,
    limit,
    error,
    data,
    order,
    onChange
  };
};

#javascript

npm - How can I specify the required Node.js version in package.json? - Stack Overflow

{ "engines" : { "node" : ">=0.12" } }

#javascript

Send a POST Request

const httpPost = (url, data, callback, err = console.error) => {
  const request = new XMLHttpRequest();
  request.open('POST', url, true);
  request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
  request.onload = () => callback(request.responseText);
  request.onerror = () => err(request);
  request.send(data);
};

const newPost = {
  userId: 1,
  id: 1337,
  title: 'Foo',
  body: 'bar bar bar'
};
const data = JSON.stringify(newPost);
httpPost(
  'https://jsonplaceholder.typicode.com/posts',
  data,
  console.log
); 

// Logs: {"userId": 1, "id": 1337, "title": "Foo", "body": "bar bar bar"}

#javascript

Send a GET Request

const httpGet = (url, callback, err = console.error) => {
  const request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.onload = () => callback(request.responseText);
  request.onerror = () => err(request);
  request.send();
};

httpGet(
  'https://jsonplaceholder.typicode.com/posts/1',
  console.log
); 

// Logs: {"userId": 1, "id": 1, "title": "sample title", "body": "my text"}

#javascript

FormData to Object

const formToObject = form =>
  Array.from(new FormData(form)).reduce(
    (acc, [key, value]) => ({
      ...acc,
      [key]: value
    }),
    {}
  );

// Example
formToObject(document.querySelector('#form')); // { email: 'test@email.com', name: 'Test Name' }

#javascript

Get the current URL

const currentURL = () => window.location.href;

// Example
currentURL(); // 'https://google.com'

#javascript

Check Device type (Mobile/Desktop)

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    ? 'Mobile'
    : 'Desktop';

// Example
detectDeviceType(); // "Mobile" or "Desktop"

#javascript

Scroll to the top of the page

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};

// Example
scrollToTop();

#javascript

inches to feet

import java.util.Scanner;

class U1_L4_Activity_Two {
    public static void main(String[] args) {
      
       /* Write your code here */
       Scanner scan = new Scanner(System.in);
       int inches;
       int feet;
       
       System.out.println("How many inches?");
       inches = scan.nextInt();
       
       feet = inches/12;
       System.out.println(inches + "\" equals " + feet + "\'" );

#javascript

circumference n area

Scanner scan = new Scanner (System.in);
        
        System.out.println("Enter a radius:");
        double r = scan.nextDouble();
        System.out.println("Circumference: " + (2*3.14*r));
        System.out.println("Area: " + 3.14*r*r);

#javascript #date

Get readable format of the given number of milliseconds

const formatDuration = ms => {
  if (ms < 0) ms = -ms;
  const time = {
    day: Math.floor(ms / 86400000),
    hour: Math.floor(ms / 3600000) % 24,
    minute: Math.floor(ms / 60000) % 60,
    second: Math.floor(ms / 1000) % 60,
    millisecond: Math.floor(ms) % 1000
  };
  return Object.entries(time)
    .filter(val => val[1] !== 0)
    .map(([key, val]) => `${val} ${key}${val !== 1 ? 's' : ''}`)
    .join(', ');
};

// Examples
formatDuration(1001); // '1 second, 1 millisecond'
formatDuration(34325055574); // '397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds'

#javascript #nodejs #mongoose

Handling mongoose validation error messages - Stack Overflow

router.post("/user", async (req, res) => {
  try {
    var user = new User(req.body);
    await user.save();
    res.status(200).send(user);
  } catch (error) {
    if (error.name === "ValidationError") {
      let errors = {};

      Object.keys(error.errors).forEach((key) => {
        errors[key] = error.errors[key].message;
      });

      return res.status(400).send(errors);
    }
    res.status(500).send("Something went wrong");
  }
});

#nodejs #javascript #graphql #express

GraphQL Setup with ExpressJS

const express = require('express')
const { graphqlHTTP } = require("express-graphql");
const {
  GraphQLSchema,
  GraphQLObjectType,
  GraphQLString,
  GraphQLList,
  GraphQLInt,
  GraphQLNonNull
} = require('graphql')
const app = express()
const port = 3000

// Sample Data
const authors = [
	{ id: 1, name: 'Dan Brown' },
	{ id: 2, name: 'J. R. R. Tolkien' },
	{ id: 3, name: 'Brent Weeks' }
]

const books = [
	{ id: 1, name: 'The Lost Symbol', authorId: 1 },
	{ id: 2, name: 'Angels and Demons', authorId: 1 },
	{ id: 3, name: 'The Davinci Code', authorId: 1 },
	{ id: 4, name: 'The Fellowship of the Ring', authorId: 2 },
	{ id: 5, name: 'The Two Towers', authorId: 2 },
	{ id: 6, name: 'The Return of the King', authorId: 2 },
	{ id: 7, name: 'The Way of Shadows', authorId: 3 },
	{ id: 8, name: 'Beyond the Shadows', authorId: 3 }
]

const BookType = new GraphQLObjectType({
  name: 'Book',
  description: 'This represents a book written by an author',
  fields: () => ({
    id: { type: GraphQLNonNull(GraphQLInt) },
    name: { type: GraphQLNonNull(GraphQLString) },
    authorId: { type: GraphQLNonNull(GraphQLInt) },
    author: {
      type: AuthorType, // AuthorType is defined below the same way that BookType is defined above
      resolve: (book) => {
        return authors.find(author => author.id === book.authorId)
      }
    }
  })
})

const AuthorType = new GraphQLObjectType({
  name: 'Author',
  description: 'This represents the author of a book',
  fields: () => ({
    id: { type: GraphQLNonNull(GraphQLInt) },
    name: { type: GraphQLNonNull(GraphQLString) }
  })
})

const RootQueryType = new GraphQLObjectType({
  name: 'Query',
  description: 'Root Query',
  fields: () => ({
    books: {
      type: new GraphQLList(BookType),
      description: "List of books",
      resolve: () => books
    }
  })
})

const schema = new GraphQLSchema({
  query: RootQueryType
})



app.use('/graphql', graphqlHTTP({
  schema: schema,
  graphiql: true
}))


app.get('/', (req, res) => {
  res.send(`<a href="http://localhost:${port}/graphql">GraphiQL</a>`)
})

// QUERY:
// 
// {
// 	books {
//     id
//   	name
//     author {
//       name
//     }
// 	}
// }

// RESULT
// 
// {
//   "data": {
//     "books": [
//       {
//         "id": 1,
//         "name": "The Lost Symbol",
//         "author": {
//           "name": "Dan Brown"
//         }
//       },
//       {
//         "id": 2,
//         "name": "Angels and Demons",
//         "author": {
//           "name": "Dan Brown"
//         }
//       }, //...
//     ]
//   }
// }

app.listen(port, () => {
  console.log(`App listening on http://localhost:${port}`)
});

#perfomance #javascript #console

Performance snippet

const inicio = performance.now();

// Codigo a chequear 

const fin= perfomance.now();

console.log( fin - inicio );

#javascript #css

Javacript cambios varios de cursor -

https://csspl.us/

#javascript

How to change node.js's console font color? - Stack Overflow

Reset = "\x1b[0m"
Bright = "\x1b[1m"
Dim = "\x1b[2m"
Underscore = "\x1b[4m"
Blink = "\x1b[5m"
Reverse = "\x1b[7m"
Hidden = "\x1b[8m"

FgBlack = "\x1b[30m"
FgRed = "\x1b[31m"
FgGreen = "\x1b[32m"
FgYellow = "\x1b[33m"
FgBlue = "\x1b[34m"
FgMagenta = "\x1b[35m"
FgCyan = "\x1b[36m"
FgWhite = "\x1b[37m"

BgBlack = "\x1b[40m"
BgRed = "\x1b[41m"
BgGreen = "\x1b[42m"
BgYellow = "\x1b[43m"
BgBlue = "\x1b[44m"
BgMagenta = "\x1b[45m"
BgCyan = "\x1b[46m"
BgWhite = "\x1b[47m"

#javascript

javascript - Using immutability-helper with Array, Object, Map - Stack Overflow

import update from 'immutability-helper';

const oldArray = [
    {name: 'Stacey', age: 55},
    {name: 'John', age: 77},
    {name: 'Kim', age: 62},
];

// add an item
const newArray = update(oldArray, {$push: [
    {name: 'Trevor', age: 45},
]});

// replace an item
const itemIndex = 1; // replace *John* at index `1`
const newValue = {name: 'Kevin', age: 25};
const newArray = update(oldArray, { [itemIndex]: {$set: newValue} });

// modify an item
const itemIndex = 1; // modify *John* at index `1`
const newArray = update(oldArray, {
    [itemIndex]: {$merge, {
        age: 85, // change John's age to 85
    }}
});         

// remove an item
const itemIndex = 0; // delete *Stacey* at index `0`
const newArray = update(oldArray, {$splice: [[itemIndex, 1]] } });

#javascript #css #html #php

Home.php

<html lang="en">
	<head>
		<!--using external files-->
		<?php require('import.html') ?>
		
		<title>U Chen Daily | Home</title>
	</head>
	<style>
		@media only screen and (min-width: 893px) {
		.card-img-top{
		width: 100%;
		height: 15vw; 
		object-fit: cover;
		}
		}
		
		.card-body{
		background: #1f52a3;
		}
		
		.card-footer{
		background: #1f52a3;
		}
		
		.h5{
		color: #1f52a3;
		}
		
		.card-text{
		font-size: 12px;
		}
	</style>
	<body class="bg-light">
		<!--using external files-->
		<?php require('header.php'); ?>
		<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>First slide label</h5>
						<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>Second slide label</h5>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>Third slide label</h5>
						<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
					</div>
				</div>
			</div>
			<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		<!--4 latest news START-->
		<div class="container-fluid bg-light" style="padding: 40px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-6">
					<h5 style="color: #1f52a3;">Latest News</h5>
				</div>
				
				<div class="col-6 d-flex justify-content-end">
					<a href="" class="btn btn-link font-weight-bold" style="color: #1f52a3;">MORE NEWS <i class="fas fa-angle-double-right" style="font-size: 18px;"></i></a>
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 latest news END-->
		<!--4 nation news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">Nation News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="Nation" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php	
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 nation news END-->
		<!--4 world news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">World News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="World" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 world news END-->
		<!--4 entertainment news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0; margin-bottom: 40px;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">Entertainment News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="Entertainment" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 entertainment news END-->
		<!--using external files-->
		<?php require('footer.html'); ?>
	</body>
</html>

#javascript

Promisifying XMLHttpRequest - ECMAScript 6 Tutorial

let request = obj => {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open(obj.method || "GET", obj.url);
        if (obj.headers) {
            Object.keys(obj.headers).forEach(key => {
                xhr.setRequestHeader(key, obj.headers[key]);
            });
        }
        xhr.onload = () => {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.response);
            } else {
                reject(xhr.statusText);
            }
        };
        xhr.onerror = () => reject(xhr.statusText);
        xhr.send(obj.body);
    });
};


request({url: "employees.json"})
    .then(data => {
        let employees = JSON.parse(data);
        let html = "";
        employees.forEach(employee => {
            html += `
                <div>
                    <img src='${employee.picture}'/>
                    <div>
                        ${employee.firstName} ${employee.lastName}
                        <p>${employee.phone}</p>
                    </div>
                </div>`;
        });
        document.getElementById("list").innerHTML = html;
    })
    .catch(error => {
        console.log(error);
    });

#javascript

Convert Base 64 String to Image

var image = new Image();
var base64 = 'iVBORw0K...'
image.src = `data:image/png;base64,${base64}`;
document.body.appendChild(image);

#javascript

Get a JSON-object using pure Promises - fetch.then

fetch(%27https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits%27)
  .then(response => response.json())
  .then(commits => alert(commits[0].author.login));

#javascript

Scroll Window to Bottom

window.scrollTo(0,document.body.scrollHeight);

#javascript

Quick format data YYYY-MM-DD

new Date(date).toISOString().split('T')[0]

#javascript

Javascript string replace with regex to strip off illegal characters - Stack Overflow

var cleanString = dirtyString.replace(/[|&;$%@"<>()+,]/g, "");

#javascript #html

JavaScript eksempel

<!DOCTYPE html>
<html>
<body>

<h2>My First JavaScript</h2>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html>

#javascript

javascript - prevent touchstart when swiping / scrolling - Stack Overflow

var touchmoved;
$('button').on('touchend', function(e){
    if(touchmoved != true){
        // button click action
    }
}).on('touchmove', function(e){
    touchmoved = true;
}).on('touchstart', function(){
    touchmoved = false;
});

#javascript

Constructor Function

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("Jack");

#javascript

Factory Function

function User(name, age) {
  return {
    name,
    age,
  }
};

let user = User("Tom", 23);

#javascript

javascript - React: Dynamic styles in component not updating - Stack Overflow

// Cell.js
import React, { Component } from 'react';

export default class Cell extends Component {

  render() {
    const cellSize = {
      width: this.props.size,
      height: this.props.size
    }

    return (
      <div style={cellSize}>
      </div>
    );
  }
}

#javascript

Fastest way to duplicate an array in JavaScript - slice vs. 'for' loop - Stack Overflow

myArray.slice(0);

#javascript

Onclick image swapping - JavaScript - The SitePoint Forums

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Select box event</title>
<script type="text/javascript">
    function swapImage(hash) {
        document.getElementById('imageSwap').src = hash + '.jpg';
    }
</script>
</head>
<body>

<div id="builder_image">
    <img src="rw_blue.jpg" id="imageSwap" alt="" />
</div>

<select name="option3" onchange="swapImage(this.options[selectedIndex].label)">
    <option value="No thanks" selected="selected" label="rw_blue">No thanks</option>
    <option value="Blue" label="rw_blue">Blue</option>
    <option value="Black" label="rw_black">Black</option>
    <option value="Red" label="rw_red">Red</option>
</select>

</body>
</html>

#javascript

Javascript simple onclick image swap - Stack Overflow

<script type="text/javascript">
function test()
{
    alert(window.document.pic.src);
     //alert msg print like http://localhost/test/pic1.png
    if (document.pic.src=='http://localhost/test/pic1.png'){

document.pic.src='pic2.png';
} 
else if (document.pic.src=='http://localhost/test/pic2.png'){

document.pic.src='pic1.png';
}
}
</script>
<img src="pic1.png" name="pic" onclick="test()"/>

#javascript

jquery - How to set time delay in javascript - Stack Overflow

var delayInMilliseconds = 1000; //1 second

setTimeout(function() {
  //your code to be executed after 1 second
}, delayInMilliseconds);

#javascript

combining promises

Promise
  .all([ p1, p2, p3 ])
  .then(([ v1, v2, v3 ]) => {
    // Values always correspond to the order of promises,
    // not the order they resolved in (i.e. v1 corresponds to p1)
  });

Promise
  .race([ p1, p2, p3 ])
  .then(val => {
    // val will take the value of the first resolved promise
  });
  
 // Promise.all() turns an array of promises into a promise of an array.
 // If any promise is rejected, the error will pass through.
 // Promise.race() passes throuh the first settled promise.

#javascript #jest

Testing Asynchronous Code · Jest

test('the data is peanut butter', () => {
  expect.assertions(1);
  return fetchData().then(data => {
    expect(data).toBe('peanut butter');
  });
});

#javascript #jest

Testing Asynchronous Code · Jest

test('the data is peanut butter', done => {
  function callback(data) {
    expect(data).toBe('peanut butter');
    done();
  }

  fetchData(callback);
});

#javascript

Elementor Pagination WordPress 5.5 Fix

const pages = Array.prototype.slice.call(document.querySelectorAll('a.page-numbers'))
pages.map((page, index) => {
  const oldUrl = page.getAttribute('href')
  const patt = /\/[0-9]{1,2}\//;
  const result = oldUrl.match(patt)
  const result2 = '/page' + result
  const url = oldUrl.replace(result, result2)
  page.setAttribute('href', url)
});

#javascript

JS Page Load

//The ready event occurs after the HTML document has been loaded
$(document).ready(function () {
    
});

// The onload event occurs later, when all content (e.g. images) also has been loaded.
$(window).load(function() {
    SearchAction(); // used to autoload a grid    
});

#javascript

javascript - Chrome Extension - Simple Content Script for running js on any page - Stack Overflow

{
    "name": "Highlight some phrases",
    "description": "Hightlight some pre defined text after page loads",
    "version": "0.1",
    "permissions": [
        "tabs","<all_urls>"
    ],
    "browser_action": {
        "default_icon": "icon.png"
    },
    "content_scripts": [
        {
        "matches": [
            "http://*/*",
            "https://*/*"
            ],
        "js": ["content.js"],
        "run_at": "document_end"    // Pay attention to this line
        }
    ], 
    "manifest_version": 2
}

#javascript

object.assign()

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

#javascript #react.js

loop in react jsx

render() {
  const elements = ['one', 'two', 'three'];

  const items = []

  for (const [index, value] of elements.entries()) {
    items.push(<li key={index}>{value}</li>)
  }

  return (
    <div>
      {items}
    </div>
  )
}

////////// or:

render: function() {
  const elements = ['one', 'two', 'three'];
  return (
    <ul>
      {elements.map((value, index) => {
        return <li key={index}>{value}</li>
      })}
    </ul>
  )
}

#javascript

Disapproved Extensions Report Script

/*
Disapproved Extensions Report Script.
This scripts generates an email if there are some non-removed disapproved extensions.
Disapproval reasons are taken from PLACEHOLDER_FEED_ITEM_REPORT.
Check the nameMapping veriable below for the list of supported extensions.
Email message could also include a long list of dissaproved remarketing feed items, so adjust settings to skip this if necessary.

Developed by Dmytro Bulakh, 2020, bulakh@ppchead.com
*/


// SCRIPT SETIINGS:

// EMAIL:  add recipients emails, like ['john@doe.com', 'doe@john.com']
// If there are no emails, like [] , the script would only log the report
var EMAIL = ['john@doe.com']

// SKIP DYNAMIC REMARKETING: set to true to skip remarketing feed items report or false otherwise

var SKIP_DYNAMIC_REMARKETING = true

function main() {

  // PlaceholderType mapping as of API version v201809 (https://developers.google.com/adwords/api/docs/appendix/placeholders)
  var nameMapping = {
    "1": "Sitelink",
    "2": "Call",
    "3": "App",
    "7": "Location",
    "30": "Affiliate location",
    "17": "Callout",
    "24": "Structured snippet",
    "31": "Message",
    "35": "Price",
    "38": "Promotion",
    "10": "Ad customizers",
    "12": "Dynamic remarketing item: Education",
    "13": "Dynamic remarketing item: Flights",
    "14": "Dynamic remarketing item: Custom Feed",
    "15": "Dynamic remarketing item: Hotels",
    "16": "Dynamic remarketing item: Real estate",
    "17": "Dynamic remarketing item: Travel",
    "19": "Dynamic remarketing item: Local",
    "20": "Dynamic remarketing item: Jobs"
  }

  var query = "SELECT PlaceholderType, DisapprovalShortNames, FeedId, FeedItemId, AttributeValues, Status " +
    "FROM PLACEHOLDER_FEED_ITEM_REPORT " +
    "WHERE DisapprovalShortNames != '' " +
    "AND Status != REMOVED " +
    "DURING TODAY"

  var report = AdsApp.report(query)
  var rows = report.rows(), values = [], iterator = {}, reasons = {}, total = 0
  var unknownTypes = {}
  while (rows.hasNext()) {
    var row = rows.next()
    if (SKIP_DYNAMIC_REMARKETING && nameMapping[row.PlaceholderType] && nameMapping[row.PlaceholderType].match('Dynamic')) continue
    row.ExtensionType = nameMapping[row.PlaceholderType]
    total++
    if (!row.ExtensionType) {
      if (!unknownTypes[row.PlaceholderType]) unknownTypes[row.PlaceholderType] = 0.0
      unknownTypes[row.PlaceholderType]++
      continue
    }
    iterator[row.ExtensionType] = iterator[row.ExtensionType] || []
    iterator[row.ExtensionType].push({
      'id': row.FeedItemId,
      'attr': row.AttributeValues,
      'status': row.Status
    })
    reasons[row.FeedItemId] = row.DisapprovalShortNames
    if (values.indexOf(row.DisapprovalShortNames) == -1) {
      values.push(row.DisapprovalShortNames)
    }
  }
  if (total < 1) {
    Logger.log('found no dissaproved extensions')
    return 'no dissaproved'
  }

  var message = ''
  for (var type in iterator) {
    message += '\n>>' + type + ': ' + (iterator[type].length) + ' disapproved extensions:\n'
    Logger.log('there are %s disapproved %s extensions:', iterator[type].length, type)
    var typeMessage = iterator[type].map(function (item) {
      var reason = JSON.parse(reasons[item.id])[0].split('\t')[0]
      return 'reason: ' + reason + ' (id:' + item.id + ')\n' + flat(JSON.parse(item.attr))
    })
    message += typeMessage.join('\n') + '\n'
  }
  Logger.log(message)

  if (EMAIL && EMAIL.length && EMAIL.length > 0) { 
    MailApp.sendEmail(EMAIL, 'Disapproved Extensions Report for ' + AdsApp.currentAccount().getName(), message)
  }
}

// Helper function for displaying extensions
function flat(record) {
  var s = []
  for (var key in record) {
    if (key > 3) {
      s.push('...')
      break
    }
    var val = record[key].join ? record[key].join(',') : record[key]
    s.push(val)
  }
  return s.join('\n')
}

#javascript

ETA vs RSA Query Report

/******************************************
* ETA vs RSA Test
* @version: 1.0
* @author: Naman Jindal (Optmyzr)
* March 2, 2020
*******************************************/

var LOOKBACK_DAYS = 30; // Number of Days to look back for stats
var EMAILS = ['example@example.com']; // Array of Emails separated by comma
var CAMPAIGN_NAME_CONTAINS = ''; // Case Insensitive
var CAMPAIGN_NAME_DOES_NOT_CONTAIN = ''; // Case Insensitive


// Do not edit anything below this line

function main() {
  
  var DATE_RANGE = getAdWordsFormattedDate(LOOKBACK_DAYS, 'yyyyMMdd') + ',' + getAdWordsFormattedDate(1, 'yyyyMMdd');
  
  var adMap = {}, agMap = {};
  var query = [
    'SELECT Id, AdGroupId, AdType, Status FROM AD_PERFORMANCE_REPORT',
    'WHERE CampaignStatus = ENABLED and AdGroupStatus = ENABLED',
    'and AdType IN [RESPONSIVE_SEARCH_AD, EXPANDED_TEXT_AD]',
    CAMPAIGN_NAME_CONTAINS ? 'and CampaignName CONTAINS_IGNORE_CASE "' + CAMPAIGN_NAME_CONTAINS + '"' : '',
    CAMPAIGN_NAME_DOES_NOT_CONTAIN ? 'and CampaignName DOES_NOT_CONTAIN_IGNORE_CASE "' + CAMPAIGN_NAME_DOES_NOT_CONTAIN + '"' : '',
    'DURING', DATE_RANGE
  ].join(' ');
  
  var rows = AdsApp.report(query, {'includeZeroImpressions': false }).rows();
  while(rows.hasNext()) {
   var row = rows.next();
    var key = [row.AdGroupId, row.Id].join('-');
    adMap[key] = row.AdType;
    
     if(!agMap[row.AdGroupId] ) { 
       agMap[row.AdGroupId] = {
         'Responsive search ad': 0, 'Expanded text ad': 0
       }; 
     }
    
    if(row.Status == 'enabled') {
     agMap[row.AdGroupId][row.AdType]++;
    }
  }
  
  
  var agIds = Object.keys(agMap)
  var initMap = {
    'ETA': 0, 'RSA': 0,
    'Responsive search ad': { 'Impressions': 0, 'Clicks': 0, 'Conversions': 0, 'Cost': 0, 'ConversionValue': 0 } ,
    'Expanded text ad': { 'Impressions': 0, 'Clicks': 0, 'Conversions': 0, 'Cost': 0, 'ConversionValue': 0 } 
  };
    
  var statsMap = {};
  var query = [
    'SELECT',
    'Query, CampaignName, AdGroupName, AdGroupId, CreativeId, Impressions, Clicks, Conversions, Cost, ConversionValue',
    'FROM SEARCH_QUERY_PERFORMANCE_REPORT',
    'WHERE CampaignStatus = ENABLED and AdGroupStatus = ENABLED',
    CAMPAIGN_NAME_CONTAINS ? 'and CampaignName CONTAINS_IGNORE_CASE "' + CAMPAIGN_NAME_CONTAINS + '"' : '',
    CAMPAIGN_NAME_DOES_NOT_CONTAIN ? 'and CampaignName DOES_NOT_CONTAIN_IGNORE_CASE "' + CAMPAIGN_NAME_DOES_NOT_CONTAIN + '"' : '',
    agIds.length < 10000 ? 'and AdGroupId IN [' + agIds.join(',') + ']' : '',
    'DURING', DATE_RANGE
  ].join(' ');
  
  var rows = AdsApp.report(query, {'includeZeroImpressions': false }).rows();
  while(rows.hasNext()) {
   var row = rows.next();
    var adKey = [row.AdGroupId, row.CreativeId].join('-');
    var adType = adMap[adKey];
    if(!initMap[adType]) {
      continue; 
    }
    
    var agRow = agMap[row.AdGroupId];
    if(!agRow) {
      agRow = { 'Responsive search ad': 0, 'Expanded text ad': 0 }
    }
    
    var key = [row.Query, row.AdGroupName, row.CampaignName].join('!~!');
    
    if(!statsMap[key]) {
      statsMap[key] = JSON.parse(JSON.stringify(initMap));
    }
    
    statsMap[key]['ETA'] = agRow['Expanded text ad'];
    statsMap[key]['RSA'] = agRow['Responsive search ad'];
    
    row.Impressions = parseFloat(row.Impressions);
    row.Clicks = parseFloat(row.Clicks);
    row.Cost = parseFloat(row.Cost.toString().replace(/,/g, ''));
    row.Conversions = parseFloat(row.Conversions.toString().replace(/,/g, ''));
    row.ConversionValue = parseFloat(row.ConversionValue.toString().replace(/,/g, ''));
    
    statsMap[key][adType].Impressions += row.Impressions;
    statsMap[key][adType].Clicks += row.Clicks;
    statsMap[key][adType].Cost += row.Cost;
    statsMap[key][adType].Conversions += row.Conversions;
    statsMap[key][adType].ConversionValue += row.ConversionValue;
  }
  
  var output = [];
  var results = {
    'rsa':  { 'incrementalClicks': 0, 'incrementalConversions': 0 },
    'all':  { 'incrementalClicks': 0, 'incrementalConversions': 0 }
  }
  
  for(var key in statsMap) {
    var row = statsMap[key];
    var out =  key.split('!~!');
    out.push(row['ETA'], row['RSA']);
    
    var rsaRow = row['Responsive search ad']; 
    rsaRow.Ctr = rsaRow.Impressions > 0 ? rsaRow.Clicks / rsaRow.Impressions : 0;
    rsaRow.CPI = rsaRow.Impressions > 0 ? rsaRow.Conversions / rsaRow.Impressions : 0;
    rsaRow.CPA = rsaRow.Conversions > 0 ? rsaRow.Cost / rsaRow.Conversions : 0;
    rsaRow.Cpc = rsaRow.Clicks > 0 ? rsaRow.Cost / rsaRow.Clicks : 0;
    rsaRow.ROAS = rsaRow.Cost > 0 ? rsaRow.ConversionValue / rsaRow.Cost : 0;
    
    out.push(rsaRow.Impressions, rsaRow.Clicks, rsaRow.Conversions, rsaRow.Ctr, rsaRow.CPI, rsaRow.Cost, rsaRow.CPA, rsaRow.ROAS);
    
    var etaRow = row['Expanded text ad'];
    etaRow.Ctr = etaRow.Impressions > 0 ? etaRow.Clicks / etaRow.Impressions : 0;
    etaRow.CPI = etaRow.Impressions > 0 ? etaRow.Conversions / etaRow.Impressions : 0;
    etaRow.CPA = etaRow.Conversions > 0 ? etaRow.Cost / etaRow.Conversions : 0;
    etaRow.Cpc = etaRow.Clicks > 0 ? etaRow.Cost / etaRow.Clicks : 0;
    etaRow.ROAS = etaRow.Cost > 0 ? etaRow.ConversionValue / etaRow.Cost : 0;
    
    out.push(etaRow.Impressions, etaRow.Clicks, etaRow.Conversions, etaRow.Ctr, etaRow.CPI, etaRow.Cost, etaRow.CPA, etaRow.ROAS);
    
    var incrementalClicks = rsaRow.Impressions * (rsaRow.Ctr - etaRow.Ctr);
    var incrementalConversions = rsaRow.Impressions * (rsaRow.CPI - etaRow.CPI);
    var incrementalCost = rsaRow.Clicks * (rsaRow.Cpc - etaRow.Cpc);
    
    var recommendation = '';
    if(row['ETA'] == 0) {
      recommendation = 'Test ETAs';
    } else if(row['RSA'] == 0) {
      recommendation = 'Test RSAs';
    } else if(incrementalConversions > 0) {
      recommendation = 'SKAG query with existing RSA';
    } else if(incrementalConversions < 0) {
      recommendation = 'SKAG query with existing ETA';
    } else if(etaRow.Impressions == 0) {
      recommendation = 'Test ETAs';
    } else if(rsaRow.Impressions == 0) {
      recommendation = 'Test RSAs';
    } 
    
    if(row['ETA'] == 0 && etaRow.Impressions == 0) {
      results['rsa'].incrementalClicks += incrementalClicks;
      results['rsa'].incrementalConversions += incrementalConversions;
    }
    
    if(etaRow.Impressions > 0 && rsaRow.Impressions > 0) {
      results['all'].incrementalClicks += incrementalClicks;
      results['all'].incrementalConversions += incrementalConversions;
    }
    
    out.push(incrementalClicks, incrementalConversions, incrementalCost, recommendation);
    
    output.push(out);
  }
  
  if(!output.length) {
    Logger.log('No Data found');
    return;   
  }
  
  var TEMPLATE_URL = 'https://docs.google.com/spreadsheets/d/1AAk_Vsdq0LezvezOarzhOzVXsQq5BN-EKMRtGX-eDVQ/edit';
  var template = SpreadsheetApp.openByUrl(TEMPLATE_URL);
  
  var now = getAdWordsFormattedDate(0, 'MMM d, yyyy')
  var name = AdsApp.currentAccount().getName() + ' - ETA vs RSA (' + now + ')';
  var ss = template.copy(name);
  var reportUrl = ss.getUrl();
  Logger.log('Report URL: ' + reportUrl);
  ss.addEditors(EMAILS);
  
  ss.getSheets()[0].getRange(3,1,output.length,output[0].length).setValues(output);
  
  sendEmail(results, reportUrl);
}

function sendEmail(results, reportUrl) {
  var sub = AdsApp.currentAccount().getName() + ' - ETA vs RSA Test Report';
  var msg = 'Hi,\n\nPlease find below summary of latest test results:\n';
  
  var rsaResults = results['rsa'];
  if(rsaResults.incrementalClicks > 0) {
    msg += 'You got ' + Math.round(rsaResults.incrementalClicks) + 'more clicks and ' + Math.round(rsaResults.incrementalConversions)  + ' more convversions from queries that only triggered with RSA ads.\n';
  }
  
  var change = ''
  if(results['all'].incrementalConversions > 0) {
    change = 'gained';
  } else if(results['all'].incrementalConversions < 0) {
    change = 'lost';
  }
  
  if(change) {
    msg += 'For queries that showed both RSA and ETA ads, you ' + change + ' ' + Math.round(results['all'].incrementalConversions) + ' conversions.\n';
  }
  
  msg += '\n\n' + reportUrl;
  msg +- '\n\nThanks';
  
  MailApp.sendEmail(EMAILS.join(','), sub, msg);
}

function getAdWordsFormattedDate(d, format){
  var date = new Date();
  date.setDate(date.getDate() - d);
  return Utilities.formatDate(date,AdWordsApp.currentAccount().getTimeZone(),format);
}
 Save

#javascript

Report Trending Search Terms

/**
*
* Report Trending Search Terms
*
* Creates a Google Sheets report containing two sheets:
*
* 1. Sheet with trending search terms for Last Week versus Week Before last Week
* 2. Sheet with trending search terms for Last Week versus Same Week Last Year
*
* @author: Nils Rooijmans
*
* contact nils@nilsrooijmans.com for questions and a High Performance MCC version of the script	
*/


/*** ADD YOUR CONFIGURATION HERE ***/

var SPREADSHEET_URL = "";  //insert a new blank spreadsheet url between quotes
var EMAIL_ADDRESSES = ""; //insert your email between quotes
var EMAIL_SUBJECT = "Search Terms Trends for Account - XYZ"; // replace XYZ with the account/client name


/*** NO NEED TO CHANGE ANYTHING BELOW THIS LINE ***/

var IMPRESSIONS_MIN = 10; //igore search terms with less impresssions last week 
var IMPRESSIONS_MIN_ABS_DIFFERENCE = 50; // ignore search terms with absolute difference that is smaller then the value you set here
var IMPRESSIONS_MIN_REL_DIFFERENCE = 0.2; // ignore search terms with relative difference that is smaller then the value you set here

var DEBUG = true;
var SEND_EMAIL = true; // set to false if you do not want to send alert email
var EMAIL_BODY = "";


/*** DO NOT CHANGE ANYTHING BELOW THIS LINE ***/

function main() {
    
  var searchtermsLastWeek = {};
  var searchtermsWeekBeforeLastWeek = {};
  var searchtermsLastWeekLastYear = {};
  
  var trendingSearchterms_LastWeek_vs_WeekBefore = {};
  var trendingSearchterms_LastWeek_vs_LastYear = {};
  
  searchtermsLastWeek = getSearchterms("lastWeek"); 
  searchtermsWeekBeforeLastWeek = getSearchterms("weekBeforeLastWeek"); 
  searchtermsLastWeekLastYear = getSearchterms("lastWeekLastYear"); 
    
  
  debug("Nr of searchterms last week: "+Object.keys(searchtermsLastWeek).length);
  debug("Nr of searchterms week before last week: "+Object.keys(searchtermsWeekBeforeLastWeek).length);
  debug("Nr of searchterms week last week last year: "+Object.keys(searchtermsLastWeekLastYear).length);
  
  trendingSearchterms_LastWeek_vs_WeekBefore = getTrendingSearchterms(searchtermsLastWeek, searchtermsWeekBeforeLastWeek);
  trendingSearchterms_LastWeek_vs_LastYear = getTrendingSearchterms(searchtermsLastWeek, searchtermsLastWeekLastYear);
  
  debug("Nr of trending searchterms LastWeek_vs_WeekBefore: "+Object.keys(trendingSearchterms_LastWeek_vs_WeekBefore).length);
  debug("Nr of trending searchterms LastWeek_vs_LastYear: "+Object.keys(trendingSearchterms_LastWeek_vs_LastYear).length);
  
  generateReport(trendingSearchterms_LastWeek_vs_WeekBefore, trendingSearchterms_LastWeek_vs_LastYear);

  // send email
  if (SEND_EMAIL) {
   
    var emailBody = 
        "\nNumber of trending search terms: " + ( Object.keys(trendingSearchterms_LastWeek_vs_WeekBefore).length + Object.keys(trendingSearchterms_LastWeek_vs_LastYear).length ) + "\n" + 
        "See details: "+ SPREADSHEET_URL+ "\n---\n\n" + EMAIL_BODY + "\n"+
    		"For more FREE Google Ads Scripts to improve your results and make your working day feel like a breeze, visit https://nilsrooijmans.com \n" + 
      	"---\n" + 
      	"This email is generated by a copy of the free Google Ads Script - Trending Search Terms, (C) Nils Rooijmans \n" +
      	"---\n";

    MailApp.sendEmail(EMAIL_ADDRESSES, EMAIL_SUBJECT, emailBody);
    debug("Report email sent");
  }
}


function generateReport(trendingSearchterms_LastWeek_vs_WeekBefore, trendingSearchterms_LastWeek_vs_LastYear) {
    
  var rowsThisYear  = getReportRows(trendingSearchterms_LastWeek_vs_WeekBefore);
  var rowsLastYear  = getReportRows(trendingSearchterms_LastWeek_vs_LastYear);
    
  
  var spreadsheet = SpreadsheetApp.openByUrl(SPREADSHEET_URL) ;
  if (!spreadsheet) {
    Logger.log("Cannot open new reporting spreadsheet") ;
    return ;
  }

  // First, generate the sheet for this year's data
  var sheet=spreadsheet.getSheetByName('LastWeek_vs_WeekBefore');
    
  if (!sheet) {
    Logger.log("Cannot open exisiting reporting sheet 'LastWeek_vs_WeekBefore', creating new one") ;
    spreadsheet.insertSheet('LastWeek_vs_WeekBefore');
    var sheet=spreadsheet.getSheetByName('LastWeek_vs_WeekBefore');
  }
  
  generateReportSheet(sheet, rowsThisYear); 
  debug("-> Generated report sheet: "+sheet.getName());
 
  
  // Second, generate the sheet for this year's data
  var sheet=spreadsheet.getSheetByName('LastWeek_vs_LastYear');
    
  if (!sheet) {
    Logger.log("Cannot open exisiting reporting sheet 'LastWeek_vs_LastYear' , creating new one") ;
    spreadsheet.insertSheet('LastWeek_vs_LastYear');
    var sheet=spreadsheet.getSheetByName('LastWeek_vs_LastYear');
  }
  
  generateReportSheet(sheet, rowsLastYear);
  debug("-> Generated report sheet: "+sheet.getName());
}


function generateReportSheet(sheet, rows) {
  
  debug("--> Generating report sheet: "+sheet.getName());

  if (sheet.getName()=='LastWeek_vs_WeekBefore') {
    var header = [
      "Searchterm",
      "Impressions Last Week",
      "Impressions week Before Last Week",
      "Diff",
      "Relative Diff (%)"
    ];
  } else if (sheet.getName()=='LastWeek_vs_LastYear') {
    var header = [  
      "Searchterm",
      "Impressions Last Week",
      "Impressions Last Week Last Year",
      "Diff",
      "Relative Diff (%)"
    ];  
  } else {
    Logger.log("### ERROR: name of sheet not recognized");
  }
  
  
  sheet.clear();
  sheet.clearConditionalFormatRules();
  sheet.appendRow(header);
  var range = sheet.getRange(1,1,1,header.length);
  range.setFontWeight("bold");
  
  var rules = sheet.getConditionalFormatRules();
  
  if ( !(rows.length < 1) ) { range = sheet.getRange(2,1,rows.length,5); var diffRange = [sheet.getRange("E2:E"+ (2+rows.length))]; var rule = SpreadsheetApp.newConditionalFormatRule().whenNumberGreaterThan(100).setFontColor("#32CD32").setRanges(diffRange).build(); rules.push(rule); var rule = SpreadsheetApp.newConditionalFormatRule().whenNumberLessThan(-50).setFontColor("#FF8C00").setRanges(diffRange).build(); rules.push(rule); sheet.setConditionalFormatRules(rules); range.setValues(rows); range.sort([{column: 4, ascending: false}]); } else { debug("ZERO trending search terms"); } } function getReportRows(trendingSearchTermObject) { var rows = []; for (var searchterm in trendingSearchTermObject) { var impressions_period1 = trendingSearchTermObject[searchterm].impressions_1; var impressions_period2 = trendingSearchTermObject[searchterm].impressions_2; var absoluteDiff = impressions_period1-impressions_period2; var relativeDiff = (((impressions_period1-impressions_period2)/impressions_period2)*100).toFixed(0); rows.push([searchterm, impressions_period1, impressions_period2, absoluteDiff, relativeDiff]); } return rows; } function getTrendingSearchterms(searchtermsPeriod_1,searchtermsPeriod_2) { var trendingSearchTerms = {}; for (var searchterm in searchtermsPeriod_1) { if (searchtermsPeriod_1.hasOwnProperty(searchterm)) { var impressions1 = searchtermsPeriod_1[searchterm]; if (searchtermsPeriod_2.hasOwnProperty(searchterm)) { var impressions2 = searchtermsPeriod_2[searchterm]; } else { var impressions2 = 0; } if (Math.abs(impressions1-impressions2) > IMPRESSIONS_MIN_ABS_DIFFERENCE && 
          Math.abs((impressions1-impressions2)/impressions2) > IMPRESSIONS_MIN_REL_DIFFERENCE ) {
        
         var searchTermObject = {};
        
         searchTermObject.impressions_1 = impressions1;     
         searchTermObject.impressions_2 = impressions2;
        
         trendingSearchTerms[searchterm] = searchTermObject;
      }
    }
  }
  
 
  // now add searchterms that were not present in data from period_1
  for (var searchterm in searchtermsPeriod_2) {
    
    if (searchtermsPeriod_2.hasOwnProperty(searchterm)) {
      
      var impressions2 = searchtermsPeriod_2[searchterm];
      
      if (!searchtermsPeriod_1.hasOwnProperty(searchterm)) { // searchterm not present in data from period_1
        var impressions1 = 0;
 
        if (Math.abs(impressions1-impressions2) > IMPRESSIONS_MIN_ABS_DIFFERENCE && 
            Math.abs((impressions1-impressions2)/impressions2) > IMPRESSIONS_MIN_REL_DIFFERENCE ) {

           var searchTermObject = {};

           searchTermObject.impressions_1 = impressions1;     
           searchTermObject.impressions_2 = impressions2;

           trendingSearchTerms[searchterm] = searchTermObject;
        }
      }
    }
  }   
  
  return trendingSearchTerms;
}



function getSearchterms(period) {
  
  var searchtermObject = {};
  var periodString;
  
  switch(period) {    
    case "today" :
      periodString = "TODAY"; 
      break;
    case "yesterday" :
      periodString = "YESTERDAY";
      break;
    case "dayBeforeYesterday" :
      periodString = dates(2) + "," + dates(2);
      break;
    case "lastWeek" :
      periodString = dates(7) + "," + dates(1);
      break;
    case "weekBeforeLastWeek" :
      periodString = dates(14) + "," + dates(8);
      break; 
    case "lastWeekLastYear" :
      periodString = dates(372) + "," + dates(366);
      break;      
    default :
      Logger.log("### ERROR: Could not recognize the period for which to add search terms");
  }
  
  var awqlQuery="SELECT Query, Impressions FROM SEARCH_QUERY_PERFORMANCE_REPORT WHERE Impressions > "+IMPRESSIONS_MIN+" DURING "+periodString;   
  debug("awqlQuery: "+awqlQuery);
  
  var rows=AdWordsApp.report(awqlQuery).rows(); 
  
  while (rows.hasNext()) {
    var row = rows.next();
    var searchterm = row['Query'];
    var impressions = numericalize(row['Impressions']);
    
    if (searchtermObject.hasOwnProperty(searchterm)) {
      searchtermObject[searchterm] += impressions;
    } else {
      searchtermObject[searchterm] = impressions;      
    }    
  }
  
  return searchtermObject;
}


function numericalize(string){
  return parseFloat(string.toString().replace(/\,/g, ''));
}


function debug(string) {
  if (DEBUG == true) {
    Logger.log(string);
  }
}


// return date x days before today
function dates(x){ 
 var MILLIS_PER_DAY = 1000 * 60 * 60 * 24;
 var now = new Date();
 var date = new Date(now.getTime() - x * MILLIS_PER_DAY);
 var timeZone = AdWordsApp.currentAccount().getTimeZone();
 var output = Utilities.formatDate(date, timeZone, 'yyyyMMdd')
 return output;
}

#javascript

Disapproved Ads Alerts

https://nilsrooijmans.com/google-ads-script-disapproved-ads-alerts/

#javascript

Report Disapproved Ads

/**
*
* Report Disapproved Ads
*
* Creates a report indicating which ads are disapproved, including the reason why
* Sends an alert via email whenever ads are disapproved
*
* @author: Nils Rooijmans
*
* contact nils@nilsrooijmans.com for questions and the MCC version of the script 
*/
  
 
// CHANGE SETTINGS HERE
 
var SPREADSHEET_URL = "";  //insert a new blank spreadsheet url between the quotes
var EMAIL = ""; //insert your email adresses between the quotes
 
 
// NO CHANGES NEEDED BELOW THIS LINE
 
var SHEET_REPORT_HEADER = [
    "Campaign Name", 
    "AdGroup Name", 
    "AdID",
    "Ad Type",
    "Ad Status",
    "Disapproval Reason"
  ];
 
 
function main() {
 
  // first we clear the report sheet and add header
  prepareSpreadsheet();  
   
  // now let's check for disapprovals
  var disapprovedAds = getDisApprovedAds();    
   
  // finally, let's report on any issues
  if (disapprovedAds.length > 0) { // there is at least one issue
    Logger.log("Total NR of Ads Disapproved: "+disapprovedAds.length);
    reportResults(disapprovedAds);
  }  
}
 
 
function prepareSpreadsheet() {
 
  var ss = SpreadsheetApp.openByUrl(SPREADSHEET_URL);
  var sheet = ss.getActiveSheet();
  sheet.clear(); //remove earlies alerts
  sheet.clearConditionalFormatRules();
  sheet.appendRow(SHEET_REPORT_HEADER);
}
 
 
function getDisApprovedAds() {
   
  var issues = [];
   
  var whereClause = "WHERE CampaignStatus = 'ENABLED' AND AdGroupStatus = 'ENABLED' AND Status = 'ENABLED' AND CombinedApprovalStatus = 'DISAPPROVED' ";
   
  var awqlQuery = "SELECT CampaignName, AdGroupName, Id, AdType, CombinedApprovalStatus, PolicySummary FROM AD_PERFORMANCE_REPORT "+whereClause;
   
  //debug("awqlQuery: "+awqlQuery);
   
  var rows=AdsApp.report(awqlQuery).rows() ; 
   
  while (rows.hasNext()) {
     
    var row=rows.next() ;
     
    var campaignName = row["CampaignName"];
    var adGroupName = row["AdGroupName"];
    var adId = row["Id"];
    var adType = row["AdType"];
    var approvalStatus = row["CombinedApprovalStatus"];
    var policySummary = row["PolicySummary"];
 
    issues.push([
        campaignName,
        adGroupName,
        adId,  
        adType,
        approvalStatus, 
        policySummary
    ]);  
  } 
  return issues;
}
 
 
function reportResults(results) {
 
    var ss = SpreadsheetApp.openByUrl(SPREADSHEET_URL);
    var sheet = ss.getActiveSheet();
    var lastRow = sheet.getLastRow();
 
    // write issues to sheet
    var range = sheet.getRange(lastRow+1, 1, results.length, SHEET_REPORT_HEADER.length);
    range.setValues(results);
 
    // send the email
    var emailBody = 
      "Number of Ads Disapproved: " + results.length + "\n" + 
      "See details: "+ SPREADSHEET_URL + "\n\n" +
      "For more FREE Google Ads Scripts to improve your results and make your working day feel like a breeze, visit https://nilsrooijmans.com \n" + 
      "---\n" + 
      "This email is generated by a copy of the free Google Ads Script - Disapproved Ads Checker, (C) Nils Rooijmans \n" +
      "---\n";
 
    MailApp.sendEmail(EMAIL, "[GOOGLE ADS ALERT] - Disapproved Ads", emailBody);
}

#nodejs #javascript

Pagination in Node js

router.get("/search/:page", (req, res, next) => {
  const resultsPerPage = 5;
  const page = req.params.page >= 1 ? req.params.page : 1;
  const query = req.query.search;

  Product.find({ name: query })
    .select("name")
    .sort({ name: "asc" })
    .limit(resultsPerPage)
    .skip(resultsPerPage * page)
    .then((results) => {
      return res.status(200).send(results);
    })
    .catch((err) => {
      return res.status(500).send(err);
    });
});

#javascript

javascript - Script Tag - async & defer - Stack Overflow

<script       src="myscript.js"></script>

<script async src="myscript.js"></script>

<script defer src="myscript.js"></script>

#javascript

node.js - How to edit a node module installed via npm? - Stack Overflow

npx patch-package <package name>

#javascript

How to get started with ReactJS Hello World example? - Stack Overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>First Component</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0-beta.1/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0-beta.1/JSXTransformer.js"></script>
</head>
<body>
    <script type="text/jsx">
    /** @jsx React.DOM */
    var APP = React.createClass({
        render: function() {
            return (
                <h1>Hello World</h1>
            );
        }
    });

    React.renderComponent(<APP />, document.body);
    </script>
</body>
</html>

#nodejs #javascript

For Model password encrypting

userSchema.pre('save', async function(next){
    if (!this.isModified('password')) return next()
    this.password = await bcrypt.hash(this.password, 8)

    next()
})

#javascript

javascript - How to watch for array changes? - Stack Overflow

function processQ() {
   // ... this will be called on each .push
}

var myEventsQ = [];
myEventsQ.push = function() { Array.prototype.push.apply(this, arguments);  processQ();};

#javascript

jquery - Javascript - convert youtube/vimeo url's into embed versions for use on a forum comment feature - Stack Overflow

var videoEmbed = {
    invoke: function(){

        $('body').html(function(i, html) {
            return videoEmbed.convertVideo(html);
        });

    },
    convertVideo: function(html){
        var pattern1 = /(?:http?s?:\/\/)?(?:www\.)?(?:vimeo\.com)\/?(.+)/g;
        var pattern2 = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g;

        if(pattern1.test(html)){
            console.log("html", html);

           var replacement = '<iframe width="420" height="345" src="//player.vimeo.com/video/$1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';

           var html = html.replace(pattern1, replacement);
        }


        if(pattern2.test(html)){
              console.log("html", html);

           var replacement = '<iframe width="420" height="345" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';

            var html = html.replace(pattern2, replacement);
        } 


        return html;
    }
}






setTimeout(function(){
    videoEmbed.invoke();
},3000);

#javascript

Menggunakan library masa untuk memformat tanggal ke bahasa Indonesia

import { masa } from 'masa';

masa(new Date('2020-08-17')).format('[hari] dddd, [tanggal] D MMMM YYYY');
// hari Senin, tanggal 17 Agustus 2020

#javascript

javascript - parse the request body for scripted rest api's

var payload = (new global.JSON().encode(request.body.data));

#javascript

regex - How to validate an email address in JavaScript - Stack Overflow

function validateEmail(email) 
    {
        var re = /\S+@\S+\.\S+/;
        return re.test(email);
    }
    
console.log(validateEmail('anystring@anystring.anystring'));

#javascript #nodejs

Get the path of image for unlink and display

//You must require fs and path before this action can be done
//set this on the top of the model
const imagePath = 'uploads/image'


//Create a virtual with the schema name e.g.
blogSchema.virual('imagePath').get(function(){
if(this.image != null){
return path.join('/', imagePath, this.image)
}
})

//exports the imagePath as like this
module.exports.imagePath = imagePath 


//go to the route and require it with the model name e.g.
const uploadPath = path.join("public", BlogModel.imagePath);

//set your function for unlink and call it on the delete route
function removeImage(image){
	fs.unlink(uploadPath, image), (err)=>{
    if(err) console.log(err)
    })
}

#javascript

javascript - How to find nearest location using latitude and longitude from a json data - Stack Overflow

function distance(lat1, lon1, lat2, lon2, unit) {
    var radlat1 = Math.PI * lat1/180
    var radlat2 = Math.PI * lat2/180
    var theta = lon1-lon2
    var radtheta = Math.PI * theta/180
    var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
    if (dist > 1) {
        dist = 1;
    }
    dist = Math.acos(dist)
    dist = dist * 180/Math.PI
    dist = dist * 60 * 1.1515
    if (unit=="K") { dist = dist * 1.609344 }
    if (unit=="N") { dist = dist * 0.8684 }
    return dist
}

#javascript

formatting - How to print a number with commas as thousands separators in JavaScript - Stack Overflow

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

#nodejs #javascript

Generalize user information in nodejs

// Let generalize user data
app.use((req, res, next) => {
    res.locals.user = req.isAuthenticated() ? req.user : null
    return next()
})

#nodejs #javascript

To set Passport session

const passport = require('passport')
const LocalStrategy = require("passport-local").Strategy;

passport.use(new LocalStrategy({
    usernameField: 'email'
}, async (email, password, done)=>{
    try{    
    const user = await User.findOne({ email })
        if (!user) return done(null, false, { message: 'User not exists' })
        if (!await user.checkPassword(password)) return done(null, false, { message: 'Incorrect Password' })
        return done(null, user)
    } catch (e) {
        
        return done(e)
    }
}
))

passport.serializeUser((user, done)=>{
    return done(null, user._id)
})

passport.deserializeUser(async (_id, done) => {
    try {
        const user = await User.findOne({ _id })
        return done(null, user)
    } catch (e) {
        return done(e)
    }
})





//place this one on the route
router.post('/login', (req, res, next) => {
  console.log(req.body.email)
  passport.authenticate('local', (err, user, info) => {
    if (err) {
      req.session.flashData = {
        message: {
          type: 'error',
          body: 'Login failed'
          }
      }
      return res.redirect('/user/login')
      }
    // Let check for user
    if (!user) {
      req.session.flashData = {
        message: {
          type: 'error',
          body: info.message
        }
      }
      return res.redirect('/user/login')
    }
    req.logIn(user, (err) => {
      if (err) {
        req.session.flashData = {
          message: {
            type: 'error',
            body: 'Login failed'
          }
        }
      }
      return res.redirect('/task/viewtask')
    })
  })(req, res, next)
})


//place this on index.js

// For Passport to work with session
app.use(passport.initialize());
app.use(passport.session());

#nodejs #javascript

Store Mongoose validations on session

const flashMsg = (req, res, next) => {
    if (req.session.flashData) {
        for (const key in req.session.flashData) {
            res.locals[key] = req.session.flashData[key]
        }

        req.session.flashData = null
    }
     
    next()
}

module.exports = flashMsg

#nodejs #javascript

Mongoose Validation to front end

const mongooseValidation = (theError) => {
    const errors = {}
    const details = errors.theError
    for (const key in details)
    {
        errors[key] = [details[key].message]
    }
    return errors
}

module.exports = mongooseValidation

#javascript

javascript - How can I find matching values in two arrays? - Stack Overflow

Array.prototype.diff = function(arr2) {
    var ret = [];
    this.sort();
    arr2.sort();
    for(var i = 0; i < this.length; i += 1) {
        if(arr2.indexOf(this[i]) > -1){
            ret.push(this[i]);
        }
    }
    return ret;
};

#javascript

javascript - How to append something to an array? - Stack Overflow

var arr = [1, 2, 3];
arr.unshift(0);
console.log(arr);

#javascript

javascript - How to append something to an array? - Stack Overflow

var arr = [
  "apple",
  "banana",
  "cherry"
];

arr = arr.concat([
  "dragonfruit",
  "elderberry",
  "fig"
]);

console.log(arr);

#javascript

In a javascript array, how do I get the last 5 elements, excluding the first element? - Stack Overflow

arr.slice(Math.max(arr.length - 5, 0))

#javascript

getter method javascript - Google Search

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}

mycar = new Car("Ford");

document.getElementById("demo").innerHTML = mycar.cnam; //"Ford"

#javascript

javascript - How to remove a item/index from a FlatList in react native? - Stack Overflow

deleteItemById = id => {
  const filteredData = this.state.data.filter(item => item.id !== id);
  this.setState({ data: filteredData });
}

render() {
  ...

  return (   
    <FlatList 
      data={data} // Assuming this is `this.state.data`
      keyExtractor={({item}) => item.id}                
      renderItem={({item}) => (
        <View style={styles.container}>
          <SwipeView
            ...
            onSwipedLeft={() => this.deleteItemById(item.id)}
            ...
          />
        </View>  
      )}
    />
  );
}

#javascript

javascript - Sending a JSON file to Express server using JS - Stack Overflow

app.get('/search', function (req, res) {
  res.json(data);
})

#javascript

javascript - Sending a JSON file to Express server using JS - Stack Overflow

const data = require('/path/to/data.json')

app.get('/search', function (req, res) {
  res.header("Content-Type",'application/json');
  res.send(JSON.stringify(data));
})

#javascript

React Native backgroundColor overlay over image - Stack Overflow

render() {
  return (
    <View style={styles.container}>
      <Image source={require('./assets/climbing_mountain.jpeg')} style={styles.imageContainer}>
      </Image>
      <View style={styles.overlay} />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: null,
    height: null,
  },
  imageContainer: {
    flex: 1,
    width: null,
    height: null,
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(69,85,117,0.7)',
  }
})

#javascript

node.js - npm WARN package.json: No repository field - Stack Overflow

"repository": {
  "type": "git",
  "url": "git://github.com/username/repository.git"
}

#javascript

ReactJS - onSubmit Send email using Sendgrid or something similiar - Stack Overflow

import React, { Component } from 'react';
import { FormErrors } from './FormErrors';
import './Form.css';

class Form extends Component {
 constructor (props) {
    super(props);
    this.state = {
      fname: '',
      lname: '',
      email: '',
      phone: '',
      formErrors: {fname: '', lname: '', email: '', phone: ''},
      fnameValid: false,
      lnameValid: false,
      emailValid: false,
      phoneValid: false,
      formValid: false
    }


    this.handleSubmit = this.handleSubmit.bind(this);
  }


    handleUserInput = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    this.setState({[name]: value},
                  () => { this.validateField(name, value) });
  }

  validateField(fieldName, value) {
    let fieldValidationErrors = this.state.formErrors;
    let fnameValid = this.state.fnameValid;
    let lnameValid = this.state.lnameValid;
    let emailValid = this.state.emailValid;
    let phoneValid = this.state.phoneValid;

    switch(fieldName) {
      case 'fname':
        fnameValid = value.match(/^[a-zA-Z]*$/);
        fieldValidationErrors.first = fnameValid ? '' : ' name is invalid. ';
        fieldValidationErrors.first += value.length >= 2 ? '' : ' name should contain at least 2 chars. ';
        break;      
      case 'lname':
        lnameValid = value.match(/^[a-zA-Z]*$/) && value.length >= 2;
        fieldValidationErrors.last = lnameValid ? '' : ' name is invalid. ';
        fieldValidationErrors.last += value.length >= 2 ? '' : ' name should contain at least 2 chars. ';
        break;      
      case 'email':
        emailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
        fieldValidationErrors.email = emailValid ? '' : ' is invalid. ';
        break;
      case 'phone':
        phoneValid = value.length == 10;
        fieldValidationErrors.phone = phoneValid ? '' : ' should contain 10 digits exactly. ';
        fieldValidationErrors.phone += value.match(/^\d+$/) ? '' : ' should contain numbers only. ';
        break;
      default:
        break;
    }
    this.setState({formErrors: fieldValidationErrors,
                    fnameValid: fnameValid,
                    lnameValid: lnameValid,
                    emailValid: emailValid,
                    phoneValid: phoneValid
                  }, this.validateForm);
  }

  validateForm() {
    this.setState({formValid: this.state.fnameValid && this.state.lnameValid && this.state.emailValid && this.state.phoneValid});
  }

  errorClass(error) {
    return(error.length === 0 ? '' : 'has-error');
  }


  handleSubmit(event) {

        const sgMail = require('@sendgrid/mail');
        sgMail.setApiKey(process.env.SENDGRID_API_KEY);
          const msg = {
          to: 'avivday@gmail.com',
          from: 'avivday@gmail.com',
          subject: 'JonesForm',
          text: 'and easy to do anywhere, even with Node.js',
          html: '<strong>and easy to do anywhere, even with Node.js</strong>',
        };
        sgMail.send(msg);
      event.preventDefault();
  }



 render () {
   return (
     <form className="demoForm" onSubmit={this.handleSubmit}>
        <div className="panel panel-default">
          <FormErrors formErrors={this.state.formErrors} />
        </div>

       <br />
        <div className={"form-group ${this.errorClass(this.state.formErrors.fname)}"}>
          <input type="text" className="form-control" name="fname"
            placeholder="First Name"
            value={this.state.fname}
            onChange={this.handleUserInput}  />
        </div>        
       <br />
       <div className={"form-group ${this.errorClass(this.state.formErrors.lname)}"}>
          <input type="text" className="form-control" name="lname"
            placeholder="Last Name"
            value={this.state.lname}
            onChange={this.handleUserInput}  />
        </div>
              <br />
        <div className={"form-group ${this.errorClass(this.state.formErrors.email)}"}>
          <input type="email" required className="form-control" name="email"
            placeholder="Email"
            value={this.state.email}
            onChange={this.handleUserInput}  />
        </div>
              <br />
        <div className={"form-group ${this.errorClass(this.state.formErrors.phone)}"}>
          <input type="text" className="form-control" name="phone"
            placeholder="Phone Number"
            value={this.state.phone}
            onChange={this.handleUserInput}  />
        </div>

       <br/>
        <button type="submit" disabled={!this.state.formValid}>Submit</button>
      </form>
   )
 }
}
export default Form;

#javascript

Send email with ReactJS and SendGrid? - Stack Overflow

//Form.js
class Form extends React.Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);

    fetch('/api/form-submit-url', {
      method: 'POST',
      body: data,
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Enter username</label>
        <input id="username" name="username" type="text" />

        <label htmlFor="email">Enter your email</label>
        <input id="email" name="email" type="email" />

        <label htmlFor="birthdate">Enter your birth date</label>
        <input id="birthdate" name="birthdate" type="text" />

        <button>Send data!</button>
      </form>
    );
  }
}
//index.js

    const sgMail = require('@sendgrid/mail');
    sgMail.setApiKey(process.env.SENDGRID_API_KEY);
    const msg = {
      to: test@example.com',
      from: 'test@example.com',
      subject: 'Sending with SendGrid is Fun',
      text: 'and easy to do anywhere, even with Node.js',
      html: '<strong>and easy to do anywhere, even with Node.js</strong>',
    };

sgMail.send(msg);

#javascript

Search through an array of objects

function search(nameKey, myArray){
    for (var i=0; i < myArray.length; i++) {
        if (myArray[i].name === nameKey) {
            return myArray[i];
        }
    }
}

var array = [
    { name:"string 1", value:"this", other: "that" },
    { name:"string 2", value:"this", other: "that" }
];

var resultObject = search("string 1", array);

#javascript

node.js - npm WARN package.json: No repository field - Stack Overflow

"repository": {
  "type": "git",
  "url": "git://github.com/username/repository.git"
}

#javascript

js startsWith

const str = "Saturday night plans";
const res = str.startsWith("Sat");
console.log(res); //> true

#javascript #nodejs

require nodejs file system

const fs = require('fs')

#javascript #strings #arrays

Palindrome Checker (FreeCodeCamp)

function palindrome(str) {
    const alphanumericOnly = str
        // 1) Lowercase the input
        .toLowerCase()
        // 2) Strip out non-alphanumeric characters
        .match(/[a-z0-9]/g);
        
    // 3) return string === reversedString
    return alphanumericOnly.join('') ===
        alphanumericOnly.reverse().join('');
}



palindrome("eye");

#javascript #array-methods

.join() using delimiters

[1, 2, 3].join('my separator');
// "1my separator2my separator3"

[1, 2, 3].join(',');
// "1,2,3"

[1, 2, 3].join(', ');
// "1, 2, 3"

[1, 2, 3].join('sandwich');
// "1sandwich2sandwich3"

#javascript

RegEx - The .match method's first parameter can instead be a regular expression.

myName = 'yazeed';

myName.match(/e/);
// ["e", index: 3, input: "yazeed", groups: undefined]

#javascript

A Walkthrough of the FreeCodeCamp Palindrome Checker Project

https://www.freecodecamp.org/news/freecodecamp-palindrome-checker-walkthrough/

#javascript #string-methods

js .math() example

myName = 'yazeed';

myName.match('e');
// ["e", index: 3, input: "yazeed", groups: undefined]

#javascript #arrays

javascript array.split - Google Search

var str = "How are you doing today?";

var res = str.split(" ");

#javascript

lowercase in js string - Google Search

var str = "Hello World!";
var res = str.toLowerCase();

#javascript

Compare two arrays regardless of the order

// `a` and `b` are arrays
const isEqual = (a, b) => JSON.stringify(a.sort()) === JSON.stringify(b.sort());

#javascript

jQuery Lazyload and AOS issue solution

document.querySelectorAll('img')
    .forEach((img) =>
        img.addEventListener('load', () =>
            AOS.refresh()
        )
    );

#javascript

How to merge two objects in JavaScript

const object1 = {
  name: 'Flavio'
}

const object2 = {
  age: 35
}

const object3 = {...object1, ...object2 }

#javascript

JS Get the current Date & Time

        //Gets the Current Date and Time
        var todayDate = new Date();

        //Gets the Date Values
        var dd = ("0" + todayDate.getDate()).slice(-2);
        var mm = ("0" + (todayDate.getMonth() + 1)).slice(-2);
        var yyyy = todayDate.getFullYear();
        document.getElementById('currentDate').innerHTML = mm + " / " + dd + " / " + yyyy;

        //Gets the Time Values
        var hh = ("0" + todayDate.getHours()).slice(-2);
        var min = ("0" + todayDate.getMinutes()).slice(-2);
        var ss = ("0" + todayDate.getSeconds()).slice(-2);
        document.getElementById('currentTime').innerHTML = hh + " : " + min + " : " + ss;

        //Sets the Current Data
        var currentMonth = ("0" + (todayDate.getMonth() + 1)).slice(-2);
        var currentHour = (("0" + todayDate.getHours()).slice(-2)) * 100;

#javascript

javascript - Node.js heap out of memory - Stack Overflow

 node --max-old-space-size=4096 yourFile.js

#javascript

Merge array of array into one

const x = [
    [
        1, 2, 3
    ],
    [
        5, 6, 7
    ],
    [
        'a','b'
    ]
]
const y = [].concat(...x)

console.log(y)

#javascript #react.js

Hooks at a Glance – React

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);


  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

#javascript #async

Async loop for callbacks

const async = require("async");
async.eachSeries(updates, (up, next) => {
  techEntriesList.push(up.entryId);
  if (up.subJobType && up.userId) {
    up.jobId = jobId;
    updatePeopleWithCallback(jobId, up, jobUpdates, (err, technician) => {
      if (technician) technicianList.push(technician);
      console.log(Date.now());
      next();
      return;
    });
  }
});

#javascript

format a JavaScript date (2019-02-12)

var today = new Date().toISOString().slice(0, 10);

#javascript

Add days to JavaScript Date

Date.prototype.addDays = function(days) {
    var date = new Date(this.valueOf());
    date.setDate(date.getDate() + days);
    return date;
}

var date = new Date();

alert(date.addDays(5));

#javascript

Get difference between 2 dates in JavaScript

const date1 = new Date('7/13/2010');
const date2 = new Date('12/15/2010');
const diffTime = Math.abs(date2 - date1);
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
console.log(diffTime + " milliseconds");
console.log(diffDays + " days");

#javascript

underscore groupby to group an array objects

var groupedCars = _.groupBy(cars, function(car) { return car.make; });

#javascript

Auto refresh vue js API call

axios.get('api/mesas/ListarTodos').then(function(response){
    //console.log(response);
    me.mesas=response.data;
    me.loading=false;
}).catch(function(error){
    console.log(error);
}).finally(function(){
    setTimeout(/*call listen in a function*/, 30 * 1000);
});

#javascript

handlebars node js get object name

{{#each myObject}}
    Key: {{@key}} Value = {{this}}
{{/each}}

#javascript

javascript - How to reload page every 5 seconds? - Stack Overflow

setTimeout(function(){
   window.location.reload(1);
}, 5000);

#javascript #jquery

jQuery Search Gallery

     let images = document.getElementsByClassName('thumb-image');
     $('#search_templates').keyup(function (e) { 
         let search = $('#search_templates').val().toLowerCase();
         for (let i = 0; i < images.length; i++) {
             let searchVal = images[i].getAttribute('data-search');
             if (searchVal.toLowerCase().indexOf(search) > -1) {
                 images[i].style.display = "";
             }else{
                 images[i].style.display = "none";
             }
             
         }
         
     });
     
     //#search_templates is input and each image has keywords in data-search="" attribute

#javascript

Javascript create dynamic elements function

function createElement(type, attributes) {
  var element = document.createElement(type);
  for (var key in attributes) {
    if (key == "class") {
        element.classList.add.apply(element.classList, attributes[key]); // add all classes at once
    } else {
      element[key] = attributes[key];
    }
  }
  someElement.appendChild(element);
}

#javascript

node.js - RequestBody.file did not receive any file - Stack Overflow

@post(%27/files%27, {
    responses: {
      %27204%27: {
        description: %27Uploaded%27,
      },
    },
  })
  async fileUpload(
    @requestBody.file()
    request: Request,
    @inject(RestBindings.Http.RESPONSE) response: Response,
  ): Promise<string> {
    console.log(request.file.filename);

    const storage = multer.diskStorage({
      destination: %27./public/uploads%27,
      filename: function (req, file, cb) {
        cb(null, %27image-%27 + Date.now() + path.extname(file.filename));
      },
    });

    const upload = multer({storage: storage}).single(%27image%27);

    upload(request, response, (err: unknown) => {
      if (err) console.log(err);
      else {
        console.log(request.file.filename);
      }
    });

    return %27Yes%27;
  }

#javascript

Add event listener to multiple buttons with the same class

    btns = document.getElementsByClassName("saveBtn");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function () {
			//Add function here
        });
    }

#javascript

javascript - Detect if a page has a vertical scrollbar? - Stack Overflow

var hasVScroll = document.body.scrollHeight > document.body.clientHeight;

#javascript

javascript - Detect if a page has overflow

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        alert("Vertical Scrollbar! D:");
    }

    // Check if body width is higher than window width :)
    if ($("body").width() > $(window).width()) {
        alert("Horizontal Scrollbar! D:<");
    }
});

#javascript

Show alert on page refresh or going back on page.

   window.onbeforeunload = function() {
    return "Data will be lost if you leave the page, are you sure?";
  };

#html #javascript #materialize

Floating scroll back to top of page button in mobile view

<div class="fixed-action-btn show-mobile-only">
  <a class="btn-floating btn-large light-green" title="Back to Top" onclick="scrolltoTop()" id="scrollBtn">
    <i class="material-icons">keyboard_arrow_up</i>
  </a>
</div>

<script>
  // When the user scrolls down 100px from the top of the document, show the button
  window.onscroll = function () { scrollFunction() };

  function scrollFunction() {
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
      document.getElementById("scrollBtn").style.display = "inline-block";
    } else {
      document.getElementById("scrollBtn").style.display = "none";
    }
  }

  // When the user clicks on the button, scroll to the top of the document
  function scrolltoTop() {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
  }
</script>

#javascript #sort #typescript

Sort by boolean flags

const a = [
    {
        k: 1, me: false, prim: false
    }, {
        k: 2, me: false, prim: false
    }, {
        k: 3, me: false, prim: false
    }, {
        k: 4, me: false, prim: false
    }, {
        k: 5, me: true, prim: true
    }, {
        k: 6, me: false, prim: false
    }
]

a
    .sort((x, y) => (x.prim === y.prim) ? 0 : x.prim ? -1 : 1)
    .sort((x, y) => (x.me === y.me) ? 0 : x.me ? -1 : 1)

console.log(a)

#javascript

Shortcut of calling a method without writing parameters in Javascript - Stack Overflow

const myFunc = (...data) => (data.map((curVal,index,arr) => console.log(curVal,index,arr)))

myFunc('mango', 'apple', 'orange')

#javascript #jquery

Simple Auto-Playing Slideshow

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

#javascript

Detect click outside element (vanilla JavaScript) - Stack Overflow

var specifiedElement = document.getElementById(%27a%27);

//I%27m using "click" but it works with any event
document.addEventListener(%27click%27, function(event) {
  var isClickInside = specifiedElement.contains(event.target);

  if (!isClickInside) {
    //the click was outside the specifiedElement, do something
  }
});

#javascript

Test if Mac or PC with JavaScript

if (navigator.userAgent.indexOf('Mac OS X') != -1) {
  $("body").addClass("mac");
} else {
  $("body").addClass("pc");
}

#javascript

Loop Over querySelectorAll Matches

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    console.log("forEach worked");
  });
});

#javascript

JS Proxy Example

import uuid from 'uuid/v4'

export default function getTestIDs() {
  if (process.env.NODE_ENV !== 'test') return {}

  let ids = new Map()
  let proxy = new Proxy({}, {
    get: function(obj, prop) {
      if (ids.has(prop) === false) {
        ids.set(prop, uuid())
      }
      return ids.get(prop)
    }
  })
  return proxy
}

#javascript

javascript - Retrieve the position (X,Y) of an HTML element relative to the browser window - Stack Overflow

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById(%27yourElId%27) ).left;

#javascript

javascript - How to generate a random number from an array - Stack Overflow

function bookRentData(bookData) {

   bookData.forEach((book) => {

      //generate random sku number

      const sku = book.sku
      var random = sku[Math.floor(Math.random() * sku.length - 1)];
      document.getElementById("message").innerHTML = sku[random];   

      });
        wrap.innerHTML += `<tr>
                             <td>${book.sku}</td>
                             <td>${book.price}</td>
                          </tr>`
   }

#javascript

JavaScript Arrow Functions

const playThe = (funky) => {
  return funky + " music";
}

const playThe = funky => {
  return funky + " music";
}

const playThe = funky => funky + " music";

// You can call all of these functions like: `playThe('blues')`

#javascript #express

node.js - How to get current url path in express with ejs - Stack Overflow

var fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;

#javascript #mongoose #mongodb #mean

mongodb - How to find items using regex in Mongoose for partial text search

   var Person = mongoose.model('Person', yourSchema);
   // find each person with a name contains 'Ghost'
   Person.findOne({ "name" : { $regex: /Ghost/, $options: 'i' } },
          function (err, person) {
                 if (err) return handleError(err);
                 console.log('%s %s is a %s.', person.name.first, person.name.last, person.occupation);

   });

#javascript

algorithm - Calculate distance between two latitude-longitude points? (Haversine formula) - Stack Overflow

function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
  var R = 6371; // Radius of the earth in km
  var dLat = deg2rad(lat2-lat1);  // deg2rad below
  var dLon = deg2rad(lon2-lon1); 
  var a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
    Math.sin(dLon/2) * Math.sin(dLon/2)
    ; 
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  var d = R * c; // Distance in km
  return d;
}

function deg2rad(deg) {
  return deg * (Math.PI/180)
}

#javascript

Create an empty HTML anchor so the page doesn't "jump up" when I click it?

<a href="javascript:;" onclick="jquery_stuff">

#javascript

Javascript: Como ordenar un array de objetos por cualquier campo | comoprogramo

items = [ {id:1, value:3, perc:0.5}, {id:2, value:2, perc:0.3}, {id:3, value:1, perc:0.2} ]
items.sort(function (a, b){
    return (b.value - a.value)
})

Ordenar ascendentemente por perc
items.sort(function (a, b) {
    return (a.perc - b.perc)
})

#javascript

javascript - Convert Array to Object - Stack Overflow

function toObject(arr) {
  var rv = {};
  for (var i = 0; i < arr.length; ++i)
    rv[i] = arr[i];
  return rv;
}

#javascript

Format currency

amount
	.toFixed(2)
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    
// or

amount
	.toLocaleString('en-US', { style: 'currency', currency: 'USD' });

#nodejs #fs #javascript

single line file copy

var fs = require('fs');

fs.createReadStream('test.log').pipe(fs.createWriteStream('newLog.log'));

#css #html #javascript

FAQ Snippet / Question Section Zappos

<ol><li><a href="#return">I want to return my purchase! What do I do?</a></li><li><a href="#return-a-gift">I would like to return a gift that was sent to me. How do I do that?</a></li><li><a href="#exchange">Can I exchange my order instead of returning it?</a></li><li><a href="#label-and-misplaced">I printed out my label and misplaced it. How can I retrieve it again?</a></li><li><a href="#does-it-take">How long does it take for me to get a refund?</a></li><li><a href="#international-returns">Do your pre-paid labels cover international returns?</a></li><li><a href="#gift-card-cert-return">I am returning an item purchased with a Gift Certificate or Gift Card, how does that work?</a></li><li><a href="#I only see the option to return my order through UPS on the website. Am I able to return through USPS instead?">I only see the option to return my order through UPS on the website. Am I able to return through USPS instead?</a></li></ol>

#css #html #javascript

Zappos - FAQ Table

https://www.zappos.com/general-questions

#javascript

Calculating execution time in Javascript

var t0 = performance.now();

for (let i = 0; i < 10000; i++) {   
    // Do stuff here 
}  

// Do some other stuff here

var t1 = performance.now();
console.log("Call to doSomething took " + (t1 - t0) + " ms.")

#javascript

Removing duplicates from array of strings in JavaScript

let old_arr = ["A", "A", "B", "C", "D", "E", "F", "F"]
let new_arr = [...new Set(old_arr)];

new_arr
["A", "B", "C", "D", "E", "F"]

#javascript

Fabricjs

https://fabricjs.com

#javascript

最长上升子序列 - 提交记录 - 力扣 (LeetCode)

// 社区优秀解法
var lengthOfLIS = function(nums) {
    let n = nums.length;
    if(n <= 1){
        return n;
    }

    let tail = [nums[0]];
    for(let i = 0;i < n;i++){
        // 比tail数组最后一个元素大，则添加到数组尾部
        if(nums[i] > tail[tail.length-1]){
            tail.push(nums[i]);
        }else{
            let left = 0;
            let right = tail.length-1;
            while(left < right){
                let mid = (left + right) >> 1;
                if(tail[mid] < nums[i]){
                    left = mid + 1;
                }else{
                    right = mid;
                }
            }

            // 上面二分查找代码，不断逼近与nums[i]最靠近的tail元素
            // 最后left位置的元素是比nums[i]大的最小元素，则调整tail数组
            // 显然根据逻辑推理，将nums[left]替换为nums[i]并不会改变
            // 原来tail的升序列状态，同时尽量降低tail中"山峰"出现
            tail[left] = nums[i];
        }
    }

    return tail.length;
};

#javascript

opens/closes coupon field

// Coupon Env
		$( 'div.woocommerce' ).on( 'click', '.coupon-env .coupon-enter', function( ev ) {
			ev.preventDefault();
			
			var $couponEnv = $( this ).parent(),
				$input = $couponEnv.find('.form-control');
			
			$couponEnv.addClass('coupon-visible');

			setTimeout(function(){ $input.focus(); }, 200);
		} ).on( 'click', '.coupon-env .close-coupon', function( ev ) {
			ev.preventDefault();
			
			$( this ).closest( '.coupon-env' ).removeClass('coupon-visible');
		} );

#javascript

#15 Data Structures with JS examples: Sets - Frontend Weekly - Medium

const mySet = new Set();
// adding items
mySet.add("a new item");
// searching for a item
mySet.has("a new item");
// getting the set  size
mySet.size()
// getting all items inside a set
mySet.values()
// removing item
mySet.delete("a new item");
// removing all items inside a set
mySet.clear()

#javascript

#15 Data Structures with JS examples: Sets - Frontend Weekly - Medium

// from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
function isSuperset(set, subset) {
    for (var elem of subset) {
        if (!set.has(elem)) {
            return false;
        }
    }
    return true;
}
function union(setA, setB) {
    var _union = new Set(setA);
    for (var elem of setB) {
        _union.add(elem);
    }
    return _union;
}

function intersection(setA, setB) {
    var _intersection = new Set();
    for (var elem of setB) {
        if (setA.has(elem)) {
            _intersection.add(elem);
        }
    }
    return _intersection;
}


function difference(setA, setB) {
    var _difference = new Set(setA);
    for (var elem of setB) {
        _difference.delete(elem);
    }
    return _difference;
}

//Examples
var setA = new Set([1, 2, 3, 4]),
    setB = new Set([2, 3]),
    setC = new Set([3, 4, 5, 6]);

isSuperset(setA, setB); // => true
union(setA, setC); // => Set [1, 2, 3, 4, 5, 6]
intersection(setA, setC); // => Set [3, 4]
difference(setA, setC); // => Set [1, 2]

#javascript

#15 Data Structures with JS examples: Sets - Frontend Weekly - Medium

var mySet = new Set();

mySet.add(1); // Set [ 1 ]
mySet.add(5); // Set [ 1, 5 ]
mySet.add(5); // Set [ 1, 5 ]
mySet.add('some text'); // Set [ 1, 5, 'some text' ]
var o = {a: 1, b: 2};
mySet.add(o);

mySet.add({a: 1, b: 2}); // o is referencing a different object so this is okay

mySet.has(1); // true
mySet.has(3); // false, 3 has not been added to the set
mySet.has(5);              // true
mySet.has(Math.sqrt(25));  // true
mySet.has('Some Text'.toLowerCase()); // true
mySet.has(o); // true

mySet.size; // 5

mySet.delete(5); // removes 5 from the set
mySet.has(5);    // false, 5 has been removed

mySet.size; // 4, we just removed one value
console.log(mySet);// Set [ 1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2} ]

#javascript

#15 Data Structures with JS examples: Sets - Frontend Weekly - Medium

subset(secondSet) {
  if (secondSet.size() < this.size()) {
    return false
  }
  
  return this.values().every(value => secondSet.has(value))
}

#javascript

#15 Data Structures with JS examples: Sets - Frontend Weekly - Medium

difference(secondSet) {
  const differenceSet = new Set()
  const firstSetValues = this.values()
  firstSetValues.forEach(value => {
    if (!secondSet.has(value)) {
      differenceSet.add(value)
    }
  })
  return differenceSet
}

#javascript

#15 Data Structures with JS examples: Sets - Frontend Weekly - Medium

intersection(secondSet) {
  const intersectionSet = new Set()
  const firstSetValues = this.values()
  const secondSetValues = secondSet.values()
  const allValues = [...firstSetValues, ...secondSetValues]
  allValues.forEach(
    value =>
      secondSet.has(value) && 
      this.has(value) && 
      intersectionSet.add(value),
  )
  return intersectionSet
}

#javascript

#15 Data Structures with JS examples: Sets - Frontend Weekly - Medium

union(secondSet) {
  const unionSet = new Set()
  const firstSetValues = this.values()
  const secondSetValues = secondSet.values()
  const allSetValues = [...firstSetValues, ...secondSetValues]
  allSetValues.forEach(value => unionSet.add(value))
  return unionSet
}

#javascript

#15 Data Structures with JS examples: Sets - Frontend Weekly - Medium

values(){
  let valuesList = []
  for(let value in items){
    valuesList.push(value)
  }
  return valuesList
}

#javascript

#15 Data Structures with JS examples: Sets - Frontend Weekly - Medium

size(){
  return size
}

#javascript

#15 Data Structures with JS examples: Sets - Frontend Weekly - Medium

clear(){
  items = {}
  size = 0
}

#javascript

#15 Data Structures with JS examples: Sets - Frontend Weekly - Medium

delete(item){
  if(!this.has(item)){
    return false
  }
  delete items[item]
  size--
  return true
}

#javascript

#15 Data Structures with JS examples: Sets - Frontend Weekly - Medium

delete(item){
  if(!this.has(item)){
    return false
  }
  delete items[item]
  size--
  return true
}

#javascript

#15 Data Structures with JS examples: Sets - Frontend Weekly - Medium

add(item){
  if(this.has(item)){
    return false
  }
  items[item] = item
  size++
  return true
}

#javascript

#15 Data Structures with JS examples: Sets - Frontend Weekly - Medium

has(item) {
  return typeof items[item] !== 'undefined'
}

#javascript

#15 Data Structures with JS examples: Sets - Frontend Weekly - Medium

has(item) {
  return items.hasOwnProperty(item)
}

#javascript

Makes year in copyrite day correct.

<script>
var year = new Date();
year = year.getFullYear();
jQuery(function($){
	$('#footer-info').html('&copy; ' + year + ' <a href="https://thisweekinworcester.com">This Week In Worcester</a> | All Rights Reserved');
});
</script>

#javascript #php

Test if String Starts With Certain Characters in PHP | CSS-Tricks

<?php 
  
function startsWith($string, $startString) { 
  $len = strlen($startString); 
  return (substr($string, 0, $len) === $startString); 
} 

// usage
echo startsWith("cat", "c"); // true
echo startsWith("dog", "x"); // false

?>

#javascript

Strip Whitespace From String

var str = " a b    c d e   f g   ";
var newStr = str.trim();
// "a b    c d e   f g"

#javascript

javascript - How can I show specific texts inside a div by the click of a button? - Stack Overflow

$(document).ready(function(){
        $('.btnWrapper button').click(function(){
            $('.btnWrapper button').removeClass('active');
            $(this).addClass('active');
            var realtion = $(this).data('relation');
            $('.translatedText>div').removeClass('active');
            $('.translatedText').find('#' + realtion).addClass('active');
        });
        
    });

#javascript #php

Test if String Starts With Certain Characters in PHP

function startsWith($string, $startString) {
  return strncmp($string, $startString, strlen($startString)) === 0;
}

#javascript

Check if a substring exists in an array Javascript - Stack Overflow

The includes array method checks whether the string "Gold" is contained as an item in the array, not whether one of the array items contains the substring. You'd want to use some with the includes string method for that:

Ressources.some(res => res.includes("Gold"))

#javascript

Vue search filter

filteredList() {
      return this.postList.filter(post => {
        return post.title.toLowerCase().includes(this.search.toLowerCase())
      })
    }

#javascript

Loops and iteration - JavaScript | MDN

for (let step = 0; step < 5; step++) {
  // Runs 5 times, with values of step 0 through 4.
  console.log('Walking east one step');
}

#javascript

Nodejs Sleep

await sleep(1000)
function sleep(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

#javascript

React.js cheatsheet

import PropTypes from 'prop-types'

#javascript

React.js cheatsheet

render() {
  return 'Look ma, no spans!';
}

#javascript

javascript - Mapping Array in a Props - Stack Overflow

import React from 'react';
import Card from './Card';

function CardList ({jobs}) {
  return (
    jobs.map((job,i) => {
      return (
        <Card
          key={i}
          id={jobs[i].id}
          name={jobs[i].name}
          langs={jobs[i].langs} 
        />
     );
  );
}

export default CardList;

#javascript #mongoshell

How do I query referenced objects in MongoDB? - Stack Overflow

db.Foo.aggregate(
  {$unwind: "$bars"},
  {$lookup: {
    from:"bar",
    localField: "bars",
    foreignField: "_id",
    as: "bar"

   }},
   {$match: {
    "bar.testprop": true
   }}
)

#javascript

Preserve linebreaks/newlines in selected text in chrome.contextMenus

chrome.tabs.executeScript( {
	code: "window.getSelection().toString();"
}, function(selection) {
	// selected contains text including line breaks
	var selected = selection[0];
});

#javascript

Array.prototype.slice() - JavaScript | MDN

let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
let citrus = fruits.slice(1, 3)

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

#javascript

Array.prototype.slice() - JavaScript | MDN

arr.slice([begin[, end]])

#javascript

Move Cursor to End of Input | JavaScript

function moveCursorToEnd(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
}

#javascript

javascript - How to upload images to graphql backend with axios? - Stack Overflow

  scalar DateTime
  scalar Upload

  input addUser {
    Email: String!
    Password: String
    FirstName: String!
    LastName: String!
    Age: DateTime!
    JobTitle: String!
    File: Upload
  }

  type Mutation {
    register(input: addUser!): Boolean
  }

#javascript

1024x768 Bookmarklet | CSS-Tricks

javascript:resizeTo(1024,768)

#javascript

Loop Over querySelectorAll Matches Javascript

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    console.log("forEach worked");
  });
});

#javascript

How to remove iframe within itself by using javascript

//Replace the closeSelf() function in iframe page to the following

function closeSelf() {
   parent.window.postMessage("removetheiframe", "*");
}

//and on the parent page, add the following code to listen when the iframe sends a message :

function receiveMessage(event){
   if (event.data=="removetheiframe"){
      var element = document.getElementById('iframe-element');
      element.parentNode.removeChild(element);
   }
}
window.addEventListener("message", receiveMessage, false);

#javascript

Async Wrap

export function asyncWrap(promise) {
  return promise.then(result => [null, result]).catch(err => [err]);
}

#javascript

Vanilla Javascript - How to make an AJAX call without jQuery?

<script type="text/javascript">
function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
           if (xmlhttp.status == 200) {
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}
</script>

#javascript

Array.prototype.slice() - JavaScript | MDN

let unboundSlice = Array.prototype.slice
let slice = Function.prototype.call.bind(unboundSlice)

function list() {
  return slice(arguments)
}

let list1 = list(1, 2, 3) // [1, 2, 3]

#javascript

Array.prototype.slice() - JavaScript | MDN

// Using slice, create newCar from myCar.
let myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }
let myCar = [myHonda, 2, 'cherry condition', 'purchased 1997']
let newCar = myCar.slice(0, 2)

// Display the values of myCar, newCar, and the color of myHonda
//  referenced from both arrays.
console.log('myCar = ' + JSON.stringify(myCar))
console.log('newCar = ' + JSON.stringify(newCar))
console.log('myCar[0].color = ' + myCar[0].color)
console.log('newCar[0].color = ' + newCar[0].color)

// Change the color of myHonda.
myHonda.color = 'purple'
console.log('The new color of my Honda is ' + myHonda.color)

// Display the color of myHonda referenced from both arrays.
console.log('myCar[0].color = ' + myCar[0].color)
console.log('newCar[0].color = ' + newCar[0].color)

#javascript

JavaScript Class Reference

https://www.w3schools.com/jsref/jsref_classes.asp

#javascript #jquery

jQuery.post() - AJAX for post requests

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

#javascript

Membuat RESTful Web Service Dengan Framework Spring Boot – Rizki Mufrizal

                                package com.rizki.mufrizal.belajar.spring.boot.domain

import org.springframework.data.annotation.Id
import org.springframework.data.mongodb.core.mapping.Document
import org.springframework.data.mongodb.core.mapping.Field

/**
 *
 * @Author Rizki Mufrizal <mufrizalrizki@gmail.com>
 * @Web <https://RizkiMufrizal.github.com>
 * @Since 12 January 2017
 * @Time 10:13 PM
 * @Project Belajar-Spring-Boot
 * @Package com.rizki.mufrizal.belajar.spring.boot.domain
 * @File Barang
 *
 */
@Document(collection = "tb_barang")
class Barang implements Serializable {

    @Id
    @Field(value = "id_barang")
    String idBarang

    @Field(value = "nama_barang")
    String namaBarang

    @Field(value = "jenis_barang")
    JenisBarang jenisBarang

    @Field(value = "tanggal_kadaluarsa")
    Date tanggalKadaluarsa

    @Field(value = "harga_satuan_barang")
    BigDecimal hargaSatuanBarang

    @Field(value = "jumlah_barang_tersedia")
    Integer jumlahBarangTersedia

}

#javascript

formatting - How to print a number with commas as thousands separators in JavaScript - Stack Overflow

var n = 34523453.345
n.toLocaleString()
"34,523,453.345"

#javascript

javascript - Get last element inside new array with key value from Object? - Stack Overflow

    let data = {"classA":[{"date":"01-01","present":49,"absent":14},{"date":"02-01","present":39,"absent":24},{"date":"03-01","present":35,"absent":28}],"classB":[{"date":"01-01","present":49,"absent":14},{"date":"02-01","present":39,"absent":24},{"date":"03-01","present":35,"absent":28}],"classC":[{"date":"01-01","present":49,"absent":14},{"date":"02-01","present":39,"absent":24},{"date":"03-01","present":35,"absent":28}]}

    let newData = [];

    for (let [key, value] of Object.entries(data)) {
        newData.push({class:key, ...value[value.length - 1]});
    }

    console.log(newData);

#javascript

Using of React Use Hooks + ContextApi

https://blog.logrocket.com/use-hooks-and-context-not-react-and-redux/

#javascript

chunkIntoN In javasScript

const chunkIntoN = (arr, n) => {
  const size = Math.ceil(arr.length / n);
  return Array.from({ length: n }, (v, i) =>
    arr.slice(i * size, i * size + size)
  );
}
EXAMPLES
chunkIntoN([1, 2, 3, 4, 5, 6, 7], 4); // [[1,2], [3,4], [5,6], [7]]

#javascript

renameKeys in javascript

const renameKeys = (keysMap, obj) =>
  Object.keys(obj).reduce(
    (acc, key) => ({
      ...acc,
      ...{ [keysMap[key] || key]: obj[key] }
    }),
    {}
  );
EXAMPLES
const obj = { name: 'Bobo', job: 'Front-End Master', shoeSize: 100 };
renameKeys({ name: 'firstName', job: 'passion' }, obj); // { firstName: 'Bobo', passion: 'Front-End Master', shoeSize: 100 }

#javascript

Draws a line in canvas

                                
function drawLine( color, xInit, yInit, xEnd, yEnd, canvas)
{
    canvas.beginPath();
    canvas.strokeStyle=color;
    canvas.lineWidth=grosorLinea;
    canvas.moveTo(xInit, yInit);
    canvas.lineTo(xEnd, yEnd);
    canvas.stroke();
    canvas.closePath();
}

#javascript

Mapping an Object

const object1 = {
  a: 'somestring',
  b: 42
};

for (let [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

#javascript #jquery

How to use switchClass and toggleClass in jQuery

https://makitweb.com/how-to-use-switchclass-and-toggleclass-in-jquery/

#javascript

Saving contenteditable Content Changes as JSON with Ajax

document.addEventListener('keydown', function (event) {
  var esc = event.which == 27,
      nl = event.which == 13,
      el = event.target,
      input = el.nodeName != 'INPUT' && el.nodeName != 'TEXTAREA',
      data = {};

  if (input) {
    if (esc) {
      // restore state
      document.execCommand('undo');
      el.blur();
    } else if (nl) {
      // save
      data[el.getAttribute('data-name')] = el.innerHTML;

      // we could send an ajax request to update the field
      /*
      $.ajax({
        url: window.location.toString(),
        data: data,
        type: 'post'
      });
      */
      log(JSON.stringify(data));

      el.blur();
      event.preventDefault();
    }
  }
}, true);

function log(s) {
  document.getElementById('debug').innerHTML = 'value changed to: ' + s;
}

#javascript

Add a Number to Two Variables At Once

 foo += -bar + (bar += 5);
// foo and bar are now 15

#javascript

Get URL and URL Parts in JavaScript

var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + window.location.search

#javascript

Lighten / Darken Color

  function LightenDarkenColor(col, amt) {
  
    var usePound = false;
  
    if (col[0] == "#") {
        col = col.slice(1);
        usePound = true;
    }
 
    var num = parseInt(col,16);
 
    var r = (num >> 16) + amt;
 
    if (r > 255) r = 255;
    else if  (r < 0) r = 0;
 
    var b = ((num >> 8) & 0x00FF) + amt;
 
    if (b > 255) b = 255;
    else if  (b < 0) b = 0;
 
    var g = (num & 0x0000FF) + amt;
 
    if (g > 255) g = 255;
    else if (g < 0) g = 0;
 
    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
  
}

#javascript

Select Random Item from an Array

 var myArray = [
  "Apples",
  "Bananas",
  "Pears"
];

var randomItem = myArray[Math.floor(Math.random()*myArray.length)];

#javascript

mapObject(JavaScript, Array, Object, Intermediate)

const mapObject = (arr, fn) =>
  arr.reduce((acc, el, i) => {
    acc[el] = fn(el, i, arr);
    return acc;
  }, {});
  
EXAMPLES
mapObject([1, 2, 3], a => a * a); // { 1: 1, 2: 4, 3: 9 }

#javascript

get (Javascript, Object, Intermediate)

const get = (from, ...selectors) =>
  [...selectors].map(s =>
    s
      .replace(/\[([^\[\]]*)\]/g, '.$1.')
      .split('.')
      .filter(t => t !== '')
      .reduce((prev, cur) => prev && prev[cur], from)
  );
EXAMPLES
const obj = { selector: { to: { val: 'val to select' } }, target: [1, 2, { a: 'test' }] };
get(obj, 'selector.to.val', 'target[0]', 'target[2].a'); // ['val to select', 1, 'test']

#javascript

How to get URL Parameters?

const getURLParameters = url =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
    {}
  );
EXAMPLES
getURLParameters('http://url.com/page?name=Adam&surname=Smith'); // {name: 'Adam', surname: 'Smith'}
getURLParameters('google.com'); // {}

#javascript #nodejs

Querying SQL Server in Node.js Using Async/Await - JavaScript in Plain English

https://medium.com/javascript-in-plain-english/querying-sql-server-in-node-js-using-async-await-5cb68acf2144

#javascript

Change CSS Style of Element with jQuery

$("p").css("background-color", "yellow");

#javascript #nodejs

AJAX Call for a HTTP POST request without refreshing the page

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: function (result) {
       alert("The result is "+result);
	}
});

#javascript #javascript #functions #parameters

Required Parameters for Functions in JavaScript

 const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// These will throw errors
hello();
hello(undefined);

// These will not
hello(null);
hello('David');
The idea here is that it uses default parameters, like how the b parameter here has a default if you don’t send it anything:
function multiply(a, b = 1) {
  return a * b;
}

#javascript #javascript #string #html

Inject HTML From a String of HTML

  document.body.innerHTML = string_of_html;

// Append it instead
document.body.innerHTML += string_of_html;

#javascript #javascript #spaces #whitespaces

JavaScript White Space

var person = "Hege";
var person="Hege";

A good practice is to put spaces around operators ( = + - * / ):

var x = y + z;

#javascript #nodejs #handlebars #express

Pagination Helper for Handlebars - Node.js Express

https://gist.github.com/trantorLiu/5924389

#commandline #javascript #tutorial #react

Creating a CLI to Automate File Creation

https://dev.to/m0nica/automating-file-creation-with-javascript-8j5

#html #javascript #jsfunctions #dom #dommanipulation

getAttribute() - how to get the value of any attribute of HTML element

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

#html #javascript #jsfunctions #dom #dommanipulation

How to change any attribute of a HTML element

<html>	
   
   <input id="contact" name="address">
 
 <script>

    document.getElementById("contact").attribute = "phone";
	
    //ALTERNATIVE METHOD TO CHANGE
    document.getElementById("contact").setAttribute('name', 'phone');	

  </script>

</html>

#html #javascript #dom #dommanipulation

innerHTML - How to get or change the inside of a HTML element

<html>	
	<div id="target">
    	<p>This is some text</p>
    </div>

  <script>

    //GET
      var divElement = document.getElementById("target").innerHTML;

    //CHANGE
      var heading = '<h1>Example text</h1>';
      document.getElementById("target").innerHTML = heading;

    //TO MAKE DIV EMPTY
        document.getElementById("target").innerHTML = '';

  </script>
  
</html>

#javascript #json #jsfunctions

JSON.stringify() - convert objects into JSON

var profile = {
  name: 'John',
  age: 25,
  isAdmin: false,
  courses: ['html', 'css', 'js']
};

var person = JSON.stringify(profile);

#javascript #json #jsfunctions

JSON.parse() - convert string into a JavaScript object

var contacts = '{ "people" : [' +
'{ "firstName":"Joe" , "lastName":"Smith" },' +
'{ "firstName":"Tom" , "lastName":"Hardy" },' +
'{ "firstName":"Ben" , "lastName":"Stiller" } ]}';

var newObject = JSON.parse(contacts);

#javascript #arrays #jsfunctions

Remove false values from Javascript Array

const compact = arr => arr.filter(Boolean);

compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]);

#javascript #promises #howto

How to Get the Domain From A URL Using Javascript

var url = "http://scratch99.com/web-development/javascript/";
var urlParts = url.replace('http://','').replace('https://','').split(/[/?#]/);
var domain = urlParts[0];

#javascript #jsfunctions #numbers

parseInt() Method - returns a whole number from a string

parseInt("10");         // returns 10
parseInt("10.33");      // returns 10
parseInt("10 20 30");   // returns 10
parseInt("10 years");   // returns 10
parseInt("years 10");   // returns NaN

#javascript #jsfunctions #numbers

toExponential() - Round off numbers in exponential notation

var x = 1.234;
 
var y = x.toExponential(2); 
// returns y = 1.23e+0
 
var y = x.toExponential(5);  
// returns y = 1.23450e+0

#javascript #jsfunctions #numbers

toFixed() Method - convert number to string with fixed number of decimal places

var x = 1.2345;

var y = x.toFixed(0);
//y equals 1;

var y = x.toFixed(2);
//y equals 1.23

var y = x.toFixed(5);
//y equals 1.23400

#javascript #numbers #jsfunctions

toString() - Convert numbers to string

var x = 123;

//OPTION 1
var y = x.toString();           

//OPTION 2
var y = (123).toString();        

//OPTION 3
var y = (100 + 23).toString();   

// value of y is 123 in all 3 cases.

#javascript #jsfunctions #numbers

The valueOf() Method - Returns number of mathematical expression or number variable

var x = 1234;
var y = x.valueOf(); 

var y = (1234).valueOf();

var y (1000+234).valueOf();

//y equals 1234 in all 3 cases

#javascript #webdev #arrays #math

Get average value of items in a javascript array

const arrAvg = arr => arr.reduce((a,b) => a + b, 0) / arr.length
// arrAvg([20, 10, 5, 10]) -> 11.25

#javascript #webdev #arrays #math

Get sum of all values in javascript array

const arrSum = arr => arr.reduce((a,b) => a + b, 0)
// arrSum([20, 10, 5, 10]) -> 45

#javascript #webdev #javascript #arrays #math

Function to find maximum value in javascript array

const arrMax = arr => Math.max(...arr);
// arrMax([20, 10, 5, 10]) -> 20

#javascript #webdev #arrays #math

Function to find the minimum value in Javascript Arrays

const arrMin = arr => Math.min(...arr);
// arrMin([20, 10, 5, 10]) -> 5

#javascript #python #search #historicalcode #google #algorithms

Google’s PageRank Algorithm from 1996 - the origin of internet search

import numpy as np

def pagerank(M, num_iterations=100, d=0.85):
    N = M.shape[1]
    v = np.random.rand(N, 1)
    v = v / np.linalg.norm(v, 1)
    iteration = 0
    while iteration < num_iterations:
        iteration += 1
        v = d * np.matmul(M, v) + (1 - d) / N
    return v

#javascript #errors #howto

Handle Javascript errors with try-catch, throw and finally

try {
  let hello = prompt("Type hello");
  if (hello !== 'hello'){
    throw new Error("Oops, you didn't type hello");
  }
}
catch(e) {
  alert(e.message);
}
finally {
  alert('thanks for playing!');
}

#javascript #interesting #historicalcode #leftpad

Leftpad: 11 lines of code that broke the internet in 2016

module.exports = leftpad;
function leftpad (str, len, ch){
   str = String(str);
   var i = -1;
   if (!ch && ch !== 0) ch = ' ';
   len = len - str.length;
   while (++i < len){
      str = ch + str;
   }
   return str;
}

#html #javascript #howto

How to dynamically update your site's copyright year

<p id="copyrightyear"></p>

<script>
   document.getElementById('copyrightyear').innerHTML
</script>

#javascript

Safer margins for a graph

    let findMargins = (maximum: number) => {
      const _sign = maximum < 0 ? -1 : 1;
      const _maximum = Math.abs(maximum);
      const _multiplier = Math.pow(10, Math.floor(_maximum).toString().length - 1);
      return Math.ceil(_maximum / _multiplier) * _multiplier * _sign;
    }

#html #javascript

Display Date Objects in Shorter Format - MMM DD YYY HH:MM

<p id="date-stamp">Sat Dec 14 2019 16:58:20 GMT+0500 (Pakistan Standard Time)</p>

<script>
        var dateStamp = document.getElementById("date-stamp");
        var date = dateStamp.innerHTML;
        var date2 = date.substr(4, 17);
        dateStamp.innerHTML = date2;
    
</script>

#html #javascript

Stop YouTube Embedded Video from Playing with Javascript

<main>
	<iframe src="https://www.youtube.com/embed/KQetemT1sWc"></iframe>   
    <a href="#!" onclick="stopThis()">Stop Playing</a>
</main>

<script>
  function stopThis(){
      var iframe = container.getElementsByTagName("iframe")[0];
      var url = iframe.getAttribute('src');
      iframe.setAttribute('src', '');
      iframe.setAttribute('src', url);
  }
</script>

#css #html #javascript

Responsive Modal Image Gallery using HTML and CSS

<h2 style="text-align:center">Modal Image Gallery</h2>
<div class="row">
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">
    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
    <div class="caption-container">
      <p id="caption"></p>
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(1)" alt="Sample image 1">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(2)" alt="Sample image 2">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(3)" alt="Sample image 3">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(4)" alt="Sample image 4">
    </div>
  </div>
</div>

> More steps

#javascript #nodejs

Save to MongoDB without Duplicates Using Mongoose

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

const exampleSchema = new Schema({
    title: { type: String , required: true},
    content: [{type: String}]
});


var Example = mongoose.model('Example', exampleSchema);
module.exports = Example;

> More steps

#javascript

Javascript Code to Copy Text to Clipboard

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();

}

#javascript #jquery

How to Select All Elements with jQuery

var allElements = $("*");

#html #javascript #nodejs

How to Save HTML Form Data in JSON - Express

<form action="/new" method="post">
 
  <input name="title" type="text">
  <input name="description" type="text">
  <button type="submit">Submit Form</button>
 
</form>

> More steps

#javascript

Copy Text to Clipboard with Line Breaks

function copyToClipboard(){

    var codeToBeCopied = document.getElementById('code-snippet').innerText;
    var emptyArea = document.createElement('TEXTAREA');
    emptyArea.innerHTML = codeToBeCopied;
    const parentElement = document.getElementById('post-title');
    parentElement.appendChild(emptyArea);

    emptyArea.select();
    document.execCommand('copy');

    parentElement.removeChild(emptyArea);
    M.toast({html: 'Code copied to clipboard'})

    }

#javascript

Replace Textarea with Codemirror editor

<link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css">

<body>
	<textarea class="codemirror-textarea"></textarea>
</body>

<script>

$(document).ready(function(){
    var codeText = $(".codemirror-textarea")[0];
    var editor = CodeMirror.fromTextArea(codeText, {
        lineNumbers : true
    });
});

</script>

<script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>

#javascript #nodejs #commandline

HTTPS Redirect in Nodejs

npm install heroku-ssl-redirect

> More steps

#javascript #nodejs

Slugify a Field in Mongoose Schema

var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var slug = require('mongoose-slug-generator');

mongoose.plugin(slug);

const pageSchema = new Schema({
    title: { type: String , required: true},
    slug: { type: String, slug: "title" }
});

var Page = mongoose.model('Page', pageSchema);
module.exports = Page;

#javascript

Live Search Bar on Website

(function(){
    //
    var $posts = $('#posts li');
    var $search = $('#search');
    var cache = [];

    $posts.each(function(){
        cache.push({
            element: this,
            title: this.title.trim().toLowerCase(),
        });
    });

    function filter(){
        var query = this.value;
        console.log("query is "+query);
        cache.forEach(function(post){
            var index = 0;

            if (query) {
                index = post.title.indexOf(query);

            }
            var results = document.getElementsByClassName('search-results');
            results.innerHTML = "<li>"+cache.title+"</li>";
            post.element.style.display = index === -1 ? 'none' : '';
        });
    }

   if ('oninput' in $search[0]){
        $search.on('input', filter);
    } else {
        $search.on('keyup', filter);
    }

}());

#javascript

How to Get Current Year in Javascript

var d = new Date();
var n = d.getFullYear();

#javascript #json #objects #jsvariables

Creating a JSON Object in Javascript

var eventsVariable = '"{events":[' +
    '{"location": "New York", "date": "May 1", "public": "true"},' +
    '{"location": "London", "date": "Apr 24", "public": "false"},' +
    '{"location": "San Frans", "date": "Nov 30", "public": "false"}]}';

#html #javascript

Open Mobile Sidebar on button click

<button id="open-sesame">Open</button>

                <script>
                    var openSesame = document.getElementById('open-sesame');
                    openSesame.addEventListener("click", function(){
                        $('.sidenav').sidenav('open');
                    });
                </script>

#html #javascript

How to Use External Javascript File

//Link javascript file in your project
<script type="text/javascript" src="/javascripts/main.js"></script>

//Link javascript file from web (usually found in documentation)
 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

#html #javascript

How to Detect a HTML Element Has a Class

var newForm = document.getElementById('new-form');

if ( newForm.getAttribute('class') === 'make-blue' ) {
        //  Do something
    }

#javascript #nodejs

Search inside an array

const songs[];
const results;

for (var i, i++, i<songs.length){
    if(song[i].artist == "Drake"){
      result.push(songs[i]);
    };

// OR

const songs [];
const result = songs.filter ( song => song.artist == "Drake");

#javascript

How to Access Clicked Element From an Array With the Same Class

var allActionButtons = document.getElementsByClassName("action-buttons");

for (var i = 0; i < allActionButtons.length; i++) {

  allActionButtons[i].addEventListener('click', functionToRunWhenClicked, false);

}

var functionToRunWhenClicked = function {
  // Add some stuff here
}

#javascript

Select Elements with Class Attribute using jQuery

<h2 class="redHeading">Welcome</h2>
<p>A passage of text</p>
<h2 class="redHeading">Thank you</h2>

> More steps

#javascript

How to Select Specific Elements with jQuery

var blogHeaders = $("h2");

#javascript

Vue Widget to generate CRON expressions

          <!-- Intuitive Cron format input -->
          <label> Reportes Programados </label>
          <md-button-toggle md-single>
            <md-tooltip md-direction="bottom">Los reportes se pueden enviar periodicamente (cada cierto tiempo cada ciertos dias) o a una hora fija cada ciertos dias.</md-tooltip>
            <md-button v-on:click='cron_type="periodically"' v-bind:class='{"md-toggle": cron_type == "periodically"}'> <md-icon>publish</md-icon> Periodicamente </md-button>
            <!-- <md-button v-on:click='cron_type="timeFrame"' v-bind:class='{"md-toggle": cron_type == "timeFrame"}'> <md-icon>publish</md-icon> Periodicamente en un rango de tiempo</md-button> -->
            <md-button v-on:click='cron_type="fixedTime"' v-bind:class='{"md-toggle": cron_type == "fixedTime"}'> <md-icon>publish</md-icon> Hora fija recurrente </md-button>
          </md-button-toggle>

          <div v-if="cron_type==='periodically'">
            <md-button-toggle md-single>
              <md-button v-on:click='periodicity="minutes"' v-bind:class='{"md-toggle": periodicity == "minutes"}'> Minutos </md-button>
              <md-button v-on:click='periodicity="hours"' v-bind:class='{"md-toggle": periodicity == "hours"}'> Horas </md-button>
            </md-button-toggle>

            <md-input-container>
              <md-tooltip md-direction="bottom">Cada cuantos minutos será enviado el reporte.</md-tooltip>
              <label v-if="periodicity=='minutes'">¿Cada cuantos minutos?</label>
              <label v-if="periodicity=='hours'">¿Cada cuantas horas?</label>
              <md-input v-if="periodicity=='minutes'" numeric v-model='every_x_minutes'></md-input>
              <md-input v-if="periodicity=='hours'" numeric v-model='every_x_hours'></md-input>
            </md-input-container>  

            <md-button-toggle md-single>
              <md-button v-on:click='day_type="week_days"' v-bind:class='{"md-toggle": day_type == "week_days"}'> Días de la semana </md-button>
              <md-button v-on:click='day_type="month_days"' v-bind:class='{"md-toggle": day_type == "month_days"}'> Días del mes </md-button>
            </md-button-toggle>

            <md-input-container v-if="day_type=='week_days'">
              <md-tooltip md-direction="bottom">Día en que será enviado el reporte. Deje en blanco para que sea ninguno</md-tooltip>
              <label >¿Qué día de la semana?</label>
                <md-select v-model="week_day" placeholder="Día de la semana">
                  <md-option value='1'>Lunes</md-option>
                  <md-option value='2'>Martes</md-option>
                  <md-option value='3'>Miércoles</md-option>
                  <md-option value='4'>Jueves</md-option>
                  <md-option value='5'>Viernes</md-option>
                  <md-option value='6'>Sábado</md-option>
                  <md-option value='7'>Domingo</md-option>
                  <md-option value="*">Todos los días</md-option>
                </md-select>
            </md-input-container>  

            <md-input-container v-if="day_type=='month_days'">
              <md-tooltip md-direction="bottom">Día en que será enviado el reporte.</md-tooltip>
              <label >¿Qué día del mes?</label>
              <md-input numeric v-model='month_day'></md-input>
            </md-input-container>  
          </div>

          <div v-else>
            <md-input-container>
              <md-tooltip md-direction="bottom">Hora a la que el reporte será enviado en los días deseados</md-tooltip>
              <label >¿A qué hora?</label>
                <md-select v-model="recurrent_fixed_time" placeholder="Hora del día">
                  <md-option value='0'>Media noche</md-option>
                  <md-option value='1'>1:00 AM</md-option>
                  <md-option value='2'>2:00 AM</md-option>
                  <md-option value='3'>3:00 AM</md-option>
                  <md-option value='4'>4:00 AM</md-option>
                  <md-option value='5'>5:00 AM</md-option>
                  <md-option value='6'>6:00 AM</md-option>
                  <md-option value="7">7:00 AM</md-option>
                  <md-option value="8">8:00 AM</md-option>
                  <md-option value="9">9:00 AM</md-option>
                  <md-option value="10">10:00 AM</md-option>
                  <md-option value="11">11:00 AM</md-option>
                  <md-option value="12">Medio día</md-option>
                  <md-option value="13">1:00 PM</md-option>
                  <md-option value="14">2:00 PM</md-option>
                  <md-option value="15">3:00 PM</md-option>
                  <md-option value="16">4:00 PM</md-option>
                  <md-option value="17">5:00 PM</md-option>
                  <md-option value="18">6:00 PM</md-option>
                  <md-option value="19">7:00 PM</md-option>
                  <md-option value="20">8:00 PM</md-option>
                  <md-option value="21">9:00 PM</md-option>
                  <md-option value="22">10:00 PM</md-option>
                  <md-option value="23">11:00 PM</md-option>
                </md-select>
            </md-input-container>  

            <md-button-toggle md-single>
              <md-button v-on:click='day_type="week_days"' v-bind:class='{"md-toggle": day_type == "week_days"}'> Días de la semana </md-button>
              <md-button v-on:click='day_type="month_days"' v-bind:class='{"md-toggle": day_type == "month_days"}'> Días del mes </md-button>
            </md-button-toggle>

            <md-input-container v-if="day_type=='week_days'">
              <md-tooltip md-direction="bottom">Día en que será enviado el reporte. Deje en blanco para que sea ninguno</md-tooltip>
              <label >¿Qué día de la semana?</label>
                <md-select v-model="week_day" placeholder="Día de la semana">
                  <md-option value='1'>Lunes</md-option>
                  <md-option value='2'>Martes</md-option>
                  <md-option value='3'>Miércoles</md-option>
                  <md-option value='4'>Jueves</md-option>
                  <md-option value='5'>Viernes</md-option>
                  <md-option value='6'>Sábado</md-option>
                  <md-option value='7'>Domingo</md-option>
                  <md-option value="*">Todos los días</md-option>
                </md-select>
            </md-input-container>  

            <md-input-container v-if="day_type=='month_days'">
              <md-tooltip md-direction="bottom">Día en que será enviado el reporte.</md-tooltip>
              <label >¿Qué día del mes?</label>
              <md-input numeric v-model='month_day'></md-input>
            </md-input-container>  
          </div>

> More steps

#html #javascript

How to Javascript in HTML

<body>

	//Some HTML code here...

</body>


<script>

	//Insert javascript code here...

</script>

#html #javascript

Add Code to HTML by Manipulating the DOM

const randomElement = document.getElementById('someElement');
randomElement.innerHTML = '<p>changing the DOM</p>'

good bad attr for what

make all input copy paste

GOOGLE RANKING CHECKER

Why Entrepreneurs Choose Crypto Exchange Script for Their Business

Code - Spin on scroll in Elementor » Nicolai Palmkvist

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial) - Reboot Websites

Off Codium/windsurf auto suggestion

20 NHÓM CÔNG CỤ AI NHẤT ĐỊNH CẦN BIẾT VÀ THÀNH THẠO TRONG 2025

Cryptocurrency Exchange Development Services

Deletes key after checking its existence in other data

PancakeSwap Claims the #1 DEX Spot! Build a DEX Like PancakeSwap!

Upwork Clone Website – Launch Your Own Freelance Marketplace

Sum of column values from the screen on console

Newsletter Js

Client Script: Get related records and show error message. Cancel Save action

SEO & Digital Marketing Experts – Whiz Marketers

nrich script

BRC20 Wallet Development

USDT TRC20 Wallet Development

P2P Crypto Exchange Development Company

Crypto Trading Bot development Company

Algo Trading Software Development

AI Boom: 15 Startup Ideas That Can Make You a Millionaire in 2025!

Prevents kaggle from exiting due to inactivity

What are the Key Features to Look for in a Bybit Clone Script

Lagence Size System tracking

Stablecoin Development Company

Decentralized exchange development company

Top 15 Blockchain Business Ideas for 2025!

Cryptocurrency Exchange Development Company

Why Cryptocurrency Exchange Script as a business venture?

javascript - I tried to request body json to node js using await fetch the body is empty - Stack Overflow

i d k

i d k

node server - Google Search

fetchMovies function

page d'inscription

AP PT CodePrint | Print Code

emoji-picker-element

Future Trading Clone Script

Paxful Clone Script

P2P Cryptocurrency Exchange Script

WazirX Clone Script: A Tool To Create Your Secure Cryptocurrency Exchange Platform

Dominate the Crypto Market with Cryptocurrency Exchange Script

Establish Your Lucrative Crypto Business With Bybit Clone Script

Splide JS - On Page Initialization

Darkmode JS Library within HTML [HTML/JS LIBRARY]

HTML Form to google sheet (JS/Google Scripts)

Bracket Matcher

GSAP Blueprint code – Elementor Templates – Nicolai Palmkvist

Custom Script CDN

Javascript/HTML: Detect if element if off screen

Alert com timeout

Extending classes | LinkedIn Learning

Mastering Concurrency and Parallelism in TypeScript

Quick Shortcode

Top NFT Marketplaces on Solana blockchain

HISE | MIDI Latch last notes

HISE | Press a button to play a specific note

HISE | Play Chords from single notes

POST Requests | Axios Docs

Developing a Multichain NFT Marketplace Business

change variable products add to cart text

love latter

Get the week of the year

scroll to top

Cordova: Fingerprint auth

Методы объекта, "this"

Cordova: Live reload

Dappfort Crypto trading bot development Company

behavior_displayToolTipHelpInfoText_customField

BACKEND NODE.JS CREATED COMMEND