maykbrito/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My URLS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>My Links</h1>

    <form action="/" class="container">
        <input type="text" placeholder="Url Name,http://">
    </form>

    <ul class="container">
    <li>Never forget another url</li>
    </ul>

    <script src="scripts.js"></script>
</body>
</html>

## scripts.js
const ul = document.querySelector("ul")
const input = document.querySelector("input")
const form = document.querySelector('form')


function addElement({ name, url }) {
    const li = document.createElement('li')
    const a = document.createElement("a")
    const trash = document.createElement("span")

    a.href = url
    a.innerHTML = name
    a.target = "_blank"

    trash.innerHTML = "x"
    trash.onclick = () => removeElement(trash)

    li.append(a)
    li.append(trash)
    ul.append(li)
}

function removeElement(el) {
    if (confirm('Tem certeza que deseja deletar?'))
        el.parentNode.remove()
}

form.addEventListener("submit", (event) => {
    event.preventDefault();

    let { value } = input

    if (!value)
        return alert('Preencha o campo')

    const [name, url] = value.split(",")

    if (!url)
        return alert('formate o texto da maneira correta')

    if (!/^http/.test(url))
        return alert("Digite a url da maneira correta")

    addElement({ name, url })

    input.value = ""
})

## style.css
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;600&display=swap');

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Quicksand', sans-serif;

  background: #7159c1;
}

.container {
  width: 80%;
  max-width: 400px;

  margin: auto;
}

h1 {
  text-align:center;
  color: white;

  font-size: 3.4rem;
}

input {
  width: 100%;

  padding: 8px 16px;
  margin-bottom: 32px;

  border-radius: 16px;
  border: 1px solid #ccc;

  outline: none;

  font-size: 1.6rem;
  font-weight:300;
}

ul {
  background: white;

  box-shadow: 0px 4px 8px -2px #00000033;
  border-radius: 6px;
  border: 1px solid #ddd;

  padding: 16px;

  font-size: 1.4rem;

}

li {
  list-style: none;

  display:flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid #ddd;
}


a {
  display: block;

  color: #333;
  text-decoration: none;

  padding: 16px 0;
  font-size: 1.8rem;

}

a:hover {
  font-weight: bold;
}

li:first-child,
li:last-child {
  border: none;
}

li span {
  cursor:pointer;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>My URLS</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<h1>My Links</h1>

	<form action="/" class="container">
	<input type="text" placeholder="Url Name,http://">
	</form>

	<ul class="container">
	<li>Never forget another url</li>
	</ul>

	<script src="scripts.js"></script>
	</body>
	</html>
	const ul = document.querySelector("ul")
	const input = document.querySelector("input")
	const form = document.querySelector('form')


	function addElement({ name, url }) {
	const li = document.createElement('li')
	const a = document.createElement("a")
	const trash = document.createElement("span")

	a.href = url
	a.innerHTML = name
	a.target = "_blank"

	trash.innerHTML = "x"
	trash.onclick = () => removeElement(trash)

	li.append(a)
	li.append(trash)
	ul.append(li)
	}

	function removeElement(el) {
	if (confirm('Tem certeza que deseja deletar?'))
	el.parentNode.remove()
	}

	form.addEventListener("submit", (event) => {
	event.preventDefault();

	let { value } = input

	if (!value)
	return alert('Preencha o campo')

	const [name, url] = value.split(",")

	if (!url)
	return alert('formate o texto da maneira correta')

	if (!/^http/.test(url))
	return alert("Digite a url da maneira correta")

	addElement({ name, url })

	input.value = ""
	})
	@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;600&display=swap');

	* {
	box-sizing: border-box;
	}

	html {
	font-size: 62.5%;
	}

	body {
	font-family: 'Quicksand', sans-serif;

	background: #7159c1;
	}

	.container {
	width: 80%;
	max-width: 400px;

	margin: auto;
	}

	h1 {
	text-align:center;
	color: white;

	font-size: 3.4rem;
	}

	input {
	width: 100%;

	padding: 8px 16px;
	margin-bottom: 32px;

	border-radius: 16px;
	border: 1px solid #ccc;

	outline: none;

	font-size: 1.6rem;
	font-weight:300;
	}

	ul {
	background: white;

	box-shadow: 0px 4px 8px -2px #00000033;
	border-radius: 6px;
	border: 1px solid #ddd;

	padding: 16px;

	font-size: 1.4rem;

	}

	li {
	list-style: none;

	display:flex;
	align-items: center;
	justify-content: space-between;

	border-bottom: 1px solid #ddd;
	}


	a {
	display: block;

	color: #333;
	text-decoration: none;

	padding: 16px 0;
	font-size: 1.8rem;

	}

	a:hover {
	font-weight: bold;
	}

	li:first-child,
	li:last-child {
	border: none;
	}

	li span {
	cursor:pointer;
	}