Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function solve() {
- const [carModelInput, carYearInput, partNameInput, partNumberInput, conditionInput, imgSrc, confirm, ulInfo, nextBtn] = [
- '#car-model', '#car-year', '#part-name', '#part-number', '#condition', '#complete-img', '.confirm-list', '.info-list', '#next-btn']
- .map(selector => document.querySelector(selector));
- nextBtn.addEventListener('click', onNext)
- function onNext(e) {
- e.preventDefault()
- const [carModel, carYear, partName, partNumber, condition] = [
- carModelInput, carYearInput, partNameInput, partNumberInput, conditionInput].map(input => input.value);
- const isValidInput = [carModel, carYear, partName, partNumber, condition].filter(value => value === "").length === 0 && carYear >= 1980 && carYear <= 2023;
- if (!isValidInput) return;
- let partInfo = onCreat(carModel, carYear, partName, partNumber, condition)
- ulInfo.appendChild(partInfo)
- clear(carModelInput, carYearInput, partNameInput, partNumberInput, conditionInput);
- }
- function onCreat(carModel, carYear, partName, partNumber, condition) {
- const liInfo = document.createElement('li');
- liInfo.classList.add('part-content');
- const article = document.createElement('article');
- liInfo.appendChild(article);
- const createParagraph = (text) => {
- const p = document.createElement('p');
- p.textContent = text;
- return p;
- };
- article.appendChild(createParagraph(`Car Model: ${carModel}`));
- article.appendChild(createParagraph(`Car Year: ${carYear}`));
- article.appendChild(createParagraph(`Part Name: ${partName}`));
- article.appendChild(createParagraph(`Part Number: ${partNumber}`));
- article.appendChild(createParagraph(`Condition: ${condition}`));
- const creatButtons = (text, className, eventListener) => {
- const button = document.createElement('button');
- button.textContent = text;
- button.classList.add(className);
- button.addEventListener('click', eventListener);
- return button;
- };
- const editBtn = creatButtons('Edit', 'edit-btn', onEdit, 'edit-button');
- const continueBtn = creatButtons('Continue', 'continue-btn', onContinue, 'continue-button');
- liInfo.appendChild(editBtn);
- liInfo.appendChild(continueBtn);
- function onEdit(e) {
- const [carModel, carYear, partName, partNumber, condition] = e.target.parentElement.querySelectorAll('article > p');
- carModelInput.value = carModel.textContent.replace('Car Model: ', '');
- carYearInput.value = carYear.textContent.replace('Car Year: ', '');
- partNameInput.value = partName.textContent.replace('Part Name: ', '');
- partNumberInput.value = partNumber.textContent.replace('Part Number: ', '');
- conditionInput.value = condition.textContent.replace('Condition: ', '');
- nextBtn.disabled = false;
- liInfo.remove();
- }
- function onContinue(e) {
- const currentLi = e.target.parentElement;
- continueBtn.remove();
- editBtn.remove();
- confirm.appendChild(currentLi);
- const confirmBtn = creatButtons('Confirm', 'confirm-btn', onConf);
- const cancelBtn = creatButtons('Cancel', 'cancel-btn', onCancel);
- currentLi.appendChild(confirmBtn);
- currentLi.appendChild(cancelBtn);
- }
- function onConf(e) {
- let currentLi = e.target.parentElement
- imgSrc.style.visibility = "visible"
- let completeTxt = document.getElementById("complete-text")
- completeTxt.textContent = "Part is Ordered!"
- currentLi.remove()
- nextBtn.disabled = false
- }
- function onCancel(e) {
- let currentLi = e.target.parentElement
- currentLi.remove()
- nextBtn.disabled = false
- }
- return liInfo
- }
- function clear(...inputs) {
- inputs.forEach(input => (input.value = ""));
- nextBtn.disabled = true;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement