hi i started to code this week and i have simple task
i managed to here so far and stuck
i tried to explain in this image here
image
my problems:
1- when clicked on title it should choose all sentence before change to new title.
2- after submit forms i want to store it with same style as input form ,not as list.
3- i couldn't manage store image. it says undefined.
many many thanks if anyone helps.
ps: i am so new if you explain so simple i will appreciate
// title and description forms
let userFormDOM = document.querySelector("#userForm");
userFormDOM.addEventListener("submit", formHandler);
function formHandler(event) {
event.preventDefault();
const TITLE = document.querySelector("#title");
const TEXT_AREA = document.querySelector("#textArea");
// clearing forms to default after submit
if (TITLE.value && TEXT_AREA.value) {
addItem(TITLE.value, TEXT_AREA.value);
TITLE.value = "New Title";
TEXT_AREA.value = "New Description";
}
}
// Grabbing Elements and Storing in Variables
const defaultFile = document.getElementById("default-file");
const preview = document.getElementById("preview");
preview.addEventListener("click", function () {
defaultFile.click();
});
// File Upload
defaultFile.addEventListener("change", function () {
// Image Preview, files[0] - For getting first file
const files = defaultFile.files[0];
if (files) {
// Showing Image and Hiding "Click to add image" Text
preview_img.style.display = "block";
preview_text.style.display = "none";
//Read File
const fileReader = new FileReader();
fileReader.addEventListener("load", function () {
// convert image to base64 encoded string
preview_img.setAttribute("src", this.result);
console.log(this.result);
});
fileReader.readAsDataURL(files);
}
});
// listing items after submit
let userListDOM = document.querySelector("#userList");
const addItem = (title, textArea, defaultFile) => {
let liDOM = document.createElement("li");
liDOM.innerHTML = `${title} ${textArea} ${defaultFile}`;
liDOM.classList.add();
userListDOM.append(liDOM);
};
/* General Styling */
body {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: whitesmoke;
color: black;
font-family: "Montserrat", sans-serif;
}
/* Form Styling */
input {
resize: none;
width: 400px;
min-height: 30px;
border: none;
background-color: lightgray;
}
textarea {
resize: none;
width: 400px;
min-height: 100px;
border: none;
background-color: lightgray;
font-family: "Montserrat", sans-serif;
}
/* Button Styling */
.btn {
border: none;
background-color: lightgray;
padding: 10px;
cursor: pointer;
align-items: center;
justify-content: center;
}
/* Container Styling */
.container {
display: flex;
justify-content: center;
margin-top: 10px;
}
/* Image Preview Styling */
.preview_holder {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
}
#preview {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
min-height: 400px;
border: none;
background-color: lightgray;
}
.preview_img {
display: none;
width: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>New Title</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div class="userInput">
<form id="userForm">
<!-- Form Markup-->
<div class="container">
<label class="form-label" for="title"></label>
<input class="form-control" type="text" name="title" id="title" value="New Title" />
</div>
<div class="container">
<label class="form-label" for="textArea"></label>
<textarea class="form-control" type="textArea" name="textArea" id="textArea" rows="10"
cols="55">New Description </textarea>
</div>
<!-- Input Markup -->
<div class="container">
<input type="file" id="default-file" hidden="hidden" />
</div>
<!-- Image Preview Markup -->
<div class="preview_holder">
<div id="preview">
<img src="" id="preview_img" class="preview_img" width="400" height="400" />
<span id="preview_text" class="preview_text">Click to add image</span>
</div>
</div>
<!-- Button Markup -->
<div class="container">
<button type="submit" class="btn">Submit</button>
</div>
</form>
</div>
<!-- Listing Markup -->
<div class="container">
<ul class="list-group" id="userList"></ul>
</div>
<script src="./js/index.js"></script>
</body>
</html>
question from:
https://stackoverflow.com/questions/66066117/store-submitted-form-and-image-at-the-bottom-and-clear-input-area-to-default 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
