I attempted to follow an online course on YouTube, mirroring the steps of the instructor. When I encountered an error, I diligently re-watched the video segment multiple times, searched for solutions on Google, and read through numerous similar problems on StackOverflow and other websites with no success. As a beginner in programming, I am currently learning and would greatly appreciate any assistance. The files potentially related to this issue are: server.js, script.js, style.css
server.js
const http = require('http')
const fs = require('fs')
const path = require('path')
http.createServer((req, res) => {
const file = req.url === '' ? 'index.html' : req.url
const filePath = path.join(__dirname, 'public', file)
const extname = path.extname(filePath)
const allowedFileTypes = ['.html', '.css', '.js']
const allowed = allowedFileTypes.find(item => item == extname)
if(!allowed) return
fs.readFile(
filePath,
(err, content) => {
if(err) throw err
res.end(content)
}
)
}).listen(5000, () => console.log('Server is running'))
script.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('Are you sure you want to delete?'))
el.parentNode.remove()
}
form.addEventListener("submit", (event) => {
event.preventDefault();
let { value } = input
if (!value)
return alert('Please fill out the field')
const [name, url] = value.split(",")
if (!url)
return alert('Format the text correctly')
if (!/^http/.test(url))
return alert("Enter the URL correctly")
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;
}