Hello! Today I started a new project to learn JavaScript. I want to build a Chrome extension, where you can save links. These links then are listed underneath the input button and you can click on them later on. This could be good for a salesperson who wants to save profiles of people that are for example potential buyers so he can just work the list down and doesn't have to search for the profiles manually.
So now we know that we need an array that contains all the leads. Also, we need an input element where we paste in the link and a button that saves the link into the array.
Here are the HTML and CSS files I needed to do previously to continue with JS:
<!doctype html>
<html>
<head>
<title></title>
<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>
</html>
html, body {
margin: 0;
padding: 10px;
font-family: Arial, Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
input {
padding: 10px;
width: 100%;
box-sizing: border-box;
border: 1px solid #5f9341;
min-width: 400px;
}
button {
background: #5f9341;
color: white;
padding: 10px 20px;
border: none;
font-weight: bold;
margin-top: 4px;
}
The preview then looked like that:
Now all the preparations were made and I could continue with the JavaScript file to make the extension work.
First of all, I created some variables. To start we needed to have an array that contains the leads, an input-el that reads the link out of the input and a button that calls a function that pushes the link into the array.
Then I needed to create a function and also call the function when the button is clicked. Here I learned about the Event Listener, a new way to do that:
let myLeads = []
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")
inputBtn.addEventListener("click", function(){ // when the button is clicked, call function.
myLeads.push(inputEl.value) // adds the value of the input field to the array
inputEl.value = "" // clears out the input field after clicking the button
})
/* the event listener calls the function when the event "click" has happened
on the input el. */
// inputEl.value reads the content of the input element
A new thing you might see is that I defined a variable with const. What's the difference between const and let? You can't redefine a const.
What's important to notice is, that you use "const", when you don't need to redefine a variable later on and you use "let", when you need to redefine the variable later on.
That was today's lesson. I hope you learned something valuable!