Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
March 19, 2022 10:45 pm GMT

Day 13 of 100 Days of Code

Today I developed a chrome extension that inputs the URL of a page that could be used to contact the lead(s) in the future. This was a code-along project.
HTML

     <link rel="stylesheet" href="index.css">    </head>    <body>        <input type="text" id="input-el">        <button id="input-btn">SAVE INPUT</button>        <ul id="ul-el">        </ul>        <script src="index.js"></script>    </body>

CSS

body {    margin: 0;    padding: 10px;    font-family: Arial, Helvetica, sans-serif;    min-width: 400px;}input {    width: 100%;    padding: 10px;    box-sizing: border-box;    border: 1px solid #5f9341;    margin-bottom: 4px;}button {    background: #5f9341;    color: white;    padding: 10px 20px;    border: none;    font-weight: bold;}ul {    margin-top: 20px;    list-style: none;    padding-left: 0;}li {    margin-top: 5px;}a {    color: #5f9341;}

The Javascript

// chrome://extensions/let myLeads = []const inputEl = document.getElementById("input-el")const inputBtn = document.getElementById("input-btn")const ulEl = document.getElementById("ul-el")inputBtn.addEventListener("click", function() {    myLeads.push(inputEl.value)    inputEl.value = ""    renderLeads()})function renderLeads() {    let listItems = ""    for (let i = 0; i < myLeads.length; i++) {        listItems += `            <li>                <a target='_blank' href='${myLeads[i]}'>                    ${myLeads[i]}                </a>            </li>        `    }    ulEl.innerHTML = listItems  }

The JSON script

{    "manifest_version": 3,    "version": "1.0",    "name": "Leads Sales tracker",    "action": {        "default_popup": "index.html",        "default_icon": "icon.png"    }}

Original Link: https://dev.to/nkemdev/day-13-of-100-days-of-code-okp

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To