This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

Day 13 of 100 Days of Code


Immediately I developed a chrome extension that inputs the URL of a web page that could possibly be used to contact the lead(s) sooner or later. This was a code-along challenge.
HTML

     <hyperlink rel="stylesheet" href="https://style-tricks.com/nkemdev/index.css">
    </head>
    <physique>
        <enter kind="textual content" id="input-el">
        <button id="input-btn">SAVE INPUT</button>
        <ul id="ul-el">
        </ul>
        <script src="index.js"></script>
    </physique>
Enter fullscreen mode

Exit fullscreen mode

CSS

physique {
    margin: 0;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    min-width: 400px;
}

enter {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px strong #5f9341;
    margin-bottom: 4px;
}

button {
    background: #5f9341;
    shade: white;
    padding: 10px 20px;
    border: none;
    font-weight: daring;
}

ul {
    margin-top: 20px;
    list-style: none;
    padding-left: 0;
}

li {
    margin-top: 5px;
}

a {
    shade: #5f9341;
}

Enter fullscreen mode

Exit fullscreen mode

The Javascript

// chrome://extensions/
let myLeads = []
const inputEl = doc.getElementById("input-el")
const inputBtn = doc.getElementById("input-btn")
const ulEl = doc.getElementById("ul-el")

inputBtn.addEventListener("click on", operate() {
    myLeads.push(inputEl.worth)
    inputEl.worth = ""
    renderLeads()
})

operate renderLeads() {
    let listItems = ""
    for (let i = 0; i < myLeads.size; i++) {
        listItems += `
            <li>
                <a goal="_blank" href="https://style-tricks.com/nkemdev/${myLeads[i]}">
                    ${myLeads[i]}
                </a>
            </li>
        `
    }
    ulEl.innerHTML = listItems  
}

Enter fullscreen mode

Exit fullscreen mode

The JSON script

{
    "manifest_version": 3,
    "model": "1.0",
    "title": "Leads Gross sales tracker",
    "motion": {
        "default_popup": "index.html",
        "default_icon": "icon.png"
    }
}
Enter fullscreen mode

Exit fullscreen mode

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?