Я пытаюсь создать миниатюру блога и контент блога с вводом контента блога.
У меня есть форма ввода блога и миниатюра на той же странице, вот код страницы:
let blogs = []
let month = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sept",
"Oct",
"Nov",
"Dec"
]
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage").files[0]
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
inputImage = URL.createObjectURL(inputImage)
let cardIcons = {
html: document.querySelector('input[name = "checkHtml"]').checked,
css: document.querySelector('input[name = "checkCss"]').checked,
nodeJs: document.querySelector('input[name = "checkNode"]').checked,
reactJs: document.querySelector('input[name = "checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
renderCard()
}
function renderCard() {
let containerBlog = document.getElementById("contents")
containerBlog.innerHTML = '';
const objectBlogString = JSON.stringify(blogs);
for (let i = 0; i < blogs.length; i++) {
localStorage.setItem(`${blogs[i].title}`, objectBlogString);
containerBlog.innerHTML += `
<div id = "contents" class = "mp-card">
<!--MPC = My Project Card-->
<div class = "mpc-img">
<img src = "${blogs[i].image}" alt = "">
</div>
<div class = "mpc-title">
<a href = "blog-detail.html" onclick = "renderBlog(event)" id='${blogs[i].title} action = "blog-detail.html"'>
<p>${blogs[i].title}</p>
</a>
</div>
<div class = "mpc-duration">
<small>Durasi: 1 Bulan</small>
</div>
<div class = "mpc-content">
${blogs[i].content}
</div>
<div class = "mpc-icons">
${(blogs[i].icons.html === true) ? '<i class = "fa-brands fa-html5"></i>' : ''}
${(blogs[i].icons.css === true) ? '<i class = "fa-brands fa-css3-alt"></i>' : ''}
${(blogs[i].icons.nodeJs === true) ? '<i class = "fa-brands fa-node-js"></i>' : ''}
${(blogs[i].icons.reactJs === true) ? '<i class = "fa-brands fa-react"></i>' : ''}
</div>
<div class = "mpc-mod">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
`
}
}
function renderBlog(event) {
let keyName;
if (event) {
keyName = event.path[1].id;
const myProjectBody = document.getElementById('myProjectBody');
const data = JSON.parse(localStorage.getItem(keyName))
myProjectBody.innerHTML = '';
for (let i = 0; i < data.length; i++) {
myProjectBody.innerHTML += `
<div id = "blog-detail">
<!--BD = Blog Detail-->
<div class = "bd-title">
<p>${data[i].title}</p>
</div>
<!--IDC = Image, Duration, Categories-->
<div class = "bd-idc">
<div class = "idc-left">
<img src = "${data[i].image}" alt = "Blog Image">
</div>
<div class = "idc-right">
<p>Duration</p>
<div class = "bd-duration">
<div style = "padding-left: 2px;">
<i class = "fa-solid fa-calendar-days"></i>
<p>1 Jan 2022 - 1 Aug 2022</p>
</div>
<div>
<i class = "fa-solid fa-clock"></i>
<p>8 Month</p>
</div>
</div>
<div class = "bd-tech">
<p>Technologies</p>
<div class = "tech-body">
${(data[i].icons.html === true) ? '<div class = "tech-html"><i class = "fa-brands fa-html5"></i><p>HTML</p></div>' : ''}
${(data[i].icons.css === true) ? '<div class = "tech-css"><i class = "fa-brands fa-css3-alt"></i><p>CSS</p></div>' : ''}
${(data[i].icons.nodeJs === true) ? '<div class = "tech-node"><i class = "fa-brands fa-node-js"></i><p>nodeJs</p></div>' : ''}
${(data[i].icons.reactJs === true) ? '<div class = "tech-react"><i class = "fa-brands fa-react"></i><p>reactJs</p></div>' : ''}
</div>
</div>
</div>
</div>
<div class = "bd-content">
<p>
${data[i].content}
</p>
</div>
</div>
`
}
}
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>My Project</title>
<link rel = "stylesheet" href = "css/style.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<!-- NAVBAR -->
<nav>
<div class = "nav-left">
<a href = "/"><img src = "assets/logo.png" alt = ""></a>
<ol>
<li>
<a href = "/">Home</a>
</li>
<li>
<a href = "myproject.html">My Project</a>
</li>
</ol>
</div>
<div class = "nav-right">
<a href = "contact.html">Contact me</a>
</div>
</nav>
<!--xNAVBARx-->
<div id = "myProjectBody">
<!--MPI = My Project Input-->
<div class = "mpi-title">
<p>ADD BLOG</p>
</div>
<!--Form-->
<div class = "mpi-form-container">
<div class = "mpi-form">
<!--MP = My Project Input-->
<form onsubmit = "addBlog(event)" action = "blog-detail.html">
<div class = "mpi-name">
<label for = "inputProjectName">Project Name</label>
<input type = "text" id = "inputProjectName">
</div>
<div class = "mpi-date">
<div class = "date-start">
<label for = "inputStartDate">Start Date</label>
<input type = "date" id = "inputStartDate">
</div>
<div class = "date-end">
<label for = "inputEndDate">End Date</label>
<input type = "date" id = "inputEndDate">
</div>
</div>
<div class = "mpi-desc">
<label for = "inputDescription">Description</label>
<textarea name = "inputDescription" id = "inputDescription"></textarea>
</div>
<div class = "mpi-check-cont">
<label for = "checkTitle">Technologies</label>
<div class = "mpi-check">
<div class = "check-left">
<div>
<label for = "checkHtml" class = "check-label">HTML
<input type = "checkbox" id = "checkHtml" name = "checkHtml"check>
<span class = "checkmark"></span>
</label>
</div>
<div>
<label for = "checkNode" class = "check-label">Node Js
<input type = "checkbox" id = "checkNode" name = "checkNode">
<span class = "checkmark"></span>
</label>
</div>
</div>
<div class = "check-right">
<div>
<label for = "checkCss" class = "check-label">CSS
<input type = "checkbox" id = "checkCss" name = "checkCss">
<span class = "checkmark"></span>
</label>
</div>
<div>
<label for = "checkReact" class = "check-label">React Js
<input type = "checkbox" id = "checkReact" name = "checkReact">
<span class = "checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class = "mpi-image">
<label for = "inputImage">
<div class = "mpi-choose">Choose</div>
<div class = "mpi-attach"><i class = "fa-solid fa-paperclip"></i></div>
</label>
<input type = "file" id = "inputImage" hidden />
</div>
</div>
<div class = "mpi-submit">
<button type = "submit">Submit</button>
</div>
</form>
</div>
</div>
<!--xFormx-->
<!--My Project-->
<div class = "mp-container">
<div class = "mp-title">
<p>MY PROJECT</p>
</div>
<div id = "contents" class = "mp-card-container">
<div class = "mp-card">
<!--MPC = My Project Card-->
<div class = "mpc-img">
<img src = "assets/DWB.png" alt = "">
</div>
<div class = "mpc-title">
<a href = "blog-detail.html">
<p>Dumbways Bootcamp 2022</p>
</a>
</div>
<div class = "mpc-duration">
<small>Durasi: 3 Bulan</small>
</div>
<div class = "mpc-content">
content
</div>
<div class = "mpc-icons">
<i class = "fa-brands fa-html5"></i>
<i class = "fa-brands fa-css3-alt"></i>
<i class = "fa-brands fa-node-js"></i>
<i class = "fa-brands fa-react"></i>
</div>
<div class = "mpc-mod">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
</div>
</div>
<!--xMy Projectx-->
</div>
<script src = "js/blog.js"></script>
</body>
</html>
и вот страница сведений о блоге, на которой будут показаны все вводимые значения, которые я отправляю:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Blog detail</title>
<link rel = "stylesheet" href = "css/style.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<!-- NAVBAR -->
<nav>
<div class = "nav-left">
<a href = "/"><img src = "assets/logo.png" alt = ""></a>
<ol>
<li>
<a href = "/">Home</a>
</li>
<li>
<a href = "myproject.html">My Project</a>
</li>
</ol>
</div>
<div class = "nav-right">
<a href = "">Contact me</a>
</div>
</nav>
<!--xNAVBARx-->
<!--Blog Detail-->
<div id = "blog-detail">
<!--BD = Blog Detail-->
<div class = "bd-title">
<p>Blog Title</p>
</div>
<!--IDC = Image, Duration, Categories-->
<div class = "bd-idc">
<div class = "idc-left">
<img src = "assets/DWB.png" alt = "Blog Image">
</div>
<div class = "idc-right">
<p>Duration</p>
<div class = "bd-duration">
<div style = "padding-left: 2px;">
<i class = "fa-solid fa-calendar-days"></i>
<p>10 May 2022 - 10 Jul 2022</p>
</div>
<div>
<i class = "fa-solid fa-clock"></i>
<p>3 Month</p>
</div>
</div>
<div class = "bd-tech">
<p>Technologies</p>
<div class = "tech-body">
<div class = "tech-html">
<i class = "fa-brands fa-html5"></i>
<p>HTML</p>
</div>
<div class = "tech-css">
<i class = "fa-brands fa-css3-alt"></i>
<p>CSS</p>
</div>
<div class = "tech-node">
<i class = "fa-brands fa-node-js"></i>
<p>nodeJs</p>
</div>
<div class = "tech-react">
<i class = "fa-brands fa-react"></i>
<p>reactJs</p>
</div>
</div>
</div>
</div>
</div>
<div class = "bd-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente,
minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente, minus atque
a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse.
</p>
</div>
</div>
<!--xBlog Detailx-->
<script src = "js/blog-detail.js"></script>
</body>
</html>
Я сохраняю все значение из ввода в localStorage с именем ключа ${blogs[i].title}
в якоре заголовка карты, полученном из формы ввода заголовка, как я могу получить доступ к имени ключа с помощью localStorage.getItem
для конкретного заголовка, который я ввожу?
Заранее спасибо.
Еще нет, я пока изучаю javascript
У вас есть ссылка для навигации по каждому элементу блога:
<a href = "blog-detail.html" onclick = "renderBlog(event)" id='${blogs[i].title} action = "blog-detail.html"'>
<p>${blogs[i].title}</p>
</a>
onclick
запустите функцию renderBlog
, а также перейдите к blog-detail.html. Вы можете запустить функцию и избежать выполнения навигации event.preventDefault()
. Это имеет смысл, если вы показываете список блогов и выбранный блог на одной странице, что не так.
Итак, вам нужно сделать навигацию. Возможность указать на странице элемент для отображения — добавить параметр в URL-адрес. Что-то вроде:
<a href = "blog-detail.html?${blogs[i].title}" action = "blog-detail.html"'>
<p>${blogs[i].title}</p>
</a>
И когда вы загружаете свой blog-detail.html, используйте window.location.search
(удалив ?
в позиции 0), чтобы получить заголовок, и с заголовком вы можете получить доступ к своим данным из хранилища и использовать их.
Где я могу использовать window.location.search? Я использую его в const data = JSON.parse(localStorage.getItem(window.location.search.substring(1)))
, но значение равно null
Хорошо, теперь я понимаю, что это значение равно null, потому что я использую пробел для примера имени блога: Blog title
ключевым именем будет название блога, но когда я использую window.location.search.substring(1)
, оно будет отображаться Blog%20Title
. Теперь, когда я могу получить значение, но все еще не могу его показать, оно говорит Uncaught ReferenceError: i is not defined
, когда я использую data[i].title
Используйте decodeURIComponent() с поиском местоположения.
Вы используете узел js?