I am currently working on a project and struggling to implement Local Storages on my work.
About My Project:
I am trying to do a basic FILM LIST Project.
I have 3 inputs. I saved them but I am not able to get all items from storage when the "DOMContentLoaded" listener run.
I created a LocalStorage class and imported it to my app.js
I created a FILM class and imported it to my app.js
I created a UI class and imported it to my app.js
I am going to post my important functions and classes for you to check,
Film.js
class Film {
constructor(title, director, url) {
this.title = title;
this.director = director;
this.url = url;
}
}
export default Film;
UI.js
class UI {
constructor() {
}
static addFilmToUI(film) {
//console.log(film.title, film.director, film.url)
let html = ` <tr>
<td><img src="${film.url}" class="img-fluid img-thumbnail"></td>
<td>${film.title}</td>
<td>${film.director}</td>
<td>Delete Film</td>
</tr>`
document.getElementById("films").innerHTML += html;
} ...
LocalStorage.js
class LStorage {
constructor() {
}
static getAllItemsFromLocalStorage() {
let films;
if (localStorage.getItem("films") === null) {
films = [];
} else {
films = JSON.parse(localStorage.getItem("films"));
console.log(films)
}
return films;
}
static addItemsToLocalStorage(film) {
let films = this.getAllItemsFromLocalStorage();
films.push(film);
localStorage.setItem("films",JSON.stringify(films));
}}
App.js
const form = document.querySelector("form");
form.addEventListener("submit", createFilm);
document.addEventListener("DOMContentLoaded",function(){
let films = LS.getAllItemsFromLocalStorage();
Array.prototype.forEach.call(films,(element)=>{
UI.addFilmToUI(element)
})
})
function createFilm(e) {
e.preventDefault()
const title = document.getElementById("title");
const director = document.getElementById("director");
const url = document.getElementById("url");
let informations = [title.value, director.value, url.value];
if (informations.every((values) => values != "")) {
const createdFilm = new FILM(title.value, director.value, url.value);
UI.addFilmToUI(createdFilm);
LS.addItemsToLocalStorage([title.value,director.value,url.value]);
} else{
alert("Cant be empty!")
}
UI.clearInputs(title,director,url)
}
When I refresh my page the only thing I get is undefined.
When i upload only film the console output is:
[Array(3)]
0: (3) ["Avatar", "James Cameron", "js.png"]
length: 1
proto: Array(0)
Ah, I found my mistake. I send multiple params to a single-valued param function also when I calling my data from storage, I did kind of override I guess. I tried to invoke my data from where I put them into UI. That's why I confused. Therefore I created one function more which called loadAllData().
And also i adjust my eventListener function as well.
- LS.addItemsToLocalStorage(createdFilm)
document.addEventListener("DOMContentLoaded",function(){
let films = LS.getAllItemsFromLocalStorage();
UI.loadAllItems(films)
})
static loadAllItems(films){
const filmList = document.getElementById("films");
films.forEach((film)=>{
filmList.innerHTML += ` <tr>
<td><img src="${film.url}" class="img-fluid img-thumbnail"></td>
<td>${film.title}</td>
<td>${film.director}</td>
<td>Filmi Sil</td>
</tr>`
})
}
Related
i'm a beginner developer in javascript trying to make a website to impress recruiters. I've succesfully retrieve information from my API and used it on my website which took me ages to figure out. Now the next problem is how do i make an onclick event that gets the ID i hardcoded onto the specific movie poster on my HTML, to be used in javascript to change the API address and get the data for that specific movie.
Notes: i have a modal onclick to host all the movie data on that modal.
My Javascript and HTML is below.
HTML
<div class="poster" onclick="toggleModal(); getimdbID()" id="tt4154796">
<div id="imdbID">tt4154796</div>
<img
src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM#._V1_SX300.jpg"
alt=""
class="poster__img"
/>
<p class="movie__title">Avengers: Endgame</p>
<p class="year">2019</p>
</div>
Javascript
async function getMovie() {
const movies = await fetch(`https://www.omdbapi.com/?i=tt4154796&apikey=4148fa0f`);
const movieData = await movies.json();
const { Title, Year, Runtime, Genre, Director, Actors, Plot, Awards, Poster, Metascore, imdbRating, imdbVotes, BoxOffice, } = movieData
document.getElementById('title').textContent = Title;
document.getElementById('year').textContent = Year;
document.getElementById('genre').textContent = Genre;
document.getElementById('runtime').textContent = Runtime;
document.getElementById('plot').textContent = Plot;
document.getElementById('director').textContent = Director;
document.getElementById('actors').textContent = Actors;
document.getElementById('awards').textContent = Awards;
document.getElementById('metascore').textContent = Metascore;
document.getElementById('boxoffice').textContent = BoxOffice;
document.getElementById('imdbRating').textContent = imdbRating;
document.getElementById('imdbVotes').textContent = imdbVotes;
document.getElementById('poster').src = Poster;
}
getMovie()
// ToggleModal
let isModalOpen = false;
function toggleModal() {
if(isModalOpen) {
isModalOpen = false;
return document.body.classList.remove("modal--open");
}
isModalOpen = true;
document.body.classList += " modal--open";
}
I've tried to create a function onclick to get the value of the ID onclick but that didn't work.
function getimdbID() {
let x = document.querySelector("#imdbID").value
console.log(x)
}
Im guessing you want your function to return the "tt4154796" thats contained within the div. If this is the case you'll want to use document.querySelector("#imdbID").innerText.
Since using .value is typically used to retrieve or change values entered into input fields.
Why when you are searching for something else is deleting the previous contents ?For example first you search for egg and show the contents but then when you search for beef the program deletes the egg and shows only beef.Code :
const searchBtn = document.getElementById('search-btn');
const mealList = document.getElementById('meal');
const mealDetailsContent = document.querySelector('.meal-details-content');
const recipeCloseBtn = document.getElementById('recipe-close-btn');
// event listeners
searchBtn.addEventListener('click', getMealList);
mealList.addEventListener('click', getMealRecipe);
recipeCloseBtn.addEventListener('click', () => {
mealDetailsContent.parentElement.classList.remove('showRecipe');
});
// get meal list that matches with the ingredients
function getMealList(){
let searchInputTxt = document.getElementById('search-input').value.trim();
fetch(`https://www.themealdb.com/api/json/v1/1/filter.php?i=${searchInputTxt}`)
.then(response => response.json())
.then(data => {
let html = "";
if(data.meals){
data.meals.forEach(meal => {
html += `
<div class = "meal-item" data-id = "${meal.idMeal}">
<div class = "meal-img">
<img src = "${meal.strMealThumb}" alt = "food">
</div>
<div class = "meal-name">
<h3>${meal.strMeal}</h3>
Get Recipe
</div>
</div>
`;
});
mealList.classList.remove('notFound');
} else{
html = "Sorry, we didn't find any meal!";
mealList.classList.add('notFound');
}
mealList.innerHTML = html;
});
}
It's because you are replacing the contents in the mealList element every time.
A simple workaround would be to retrieve the the innerHTML values before you update it.
Something like
let html = mealList.innerHTML;
rather than starting off empty every time you call the function should do the trick.
I have a few buttons with different categories. When the user clicks on the button, the correct category should be displayed. In every category, there are a few products, each with their own "add to cart"-button.
So, the user clicks "beds" and then adds item #3 to the cart (which updates and so on).
I have managed to do this with classes IF the user can't choose a category. It also works without classes if I add the buttons dynamically in js. But again, without allowing the user to choose a category.
I also want the user to be able to search for an item, get the item/ items displayed, and add it to the cart.
Get Products
class Products {
async getProducts() {
try {
const result = await fetch("/data/products.json");
const data = await result.json();
let products = data.items;
products = products.map((item) => {
const { category, title, price } = item;
const { id } = item.sys;
const image = item.image.url;
return { category, title, price, id, image };
});
return products;
} catch (error) {
console.log(error);
}
}
}
Display Products
class UI {
async displayProducts(products, searchText) {
let matches = products.filter(item => {
const regex = new RegExp(`^${searchText}`,'gi');
return item.category.match(regex);
})
let result = "";
matches.forEach((product) => {
result += `
<!-- single product -->
<article class="product">
<div class="img-container">
<img
src=${product.image}
alt="product"
class="product-img"
/>
<button class="bag-btn" data-id=${product.id}>
<i class="fas fa-shopping-cart">add to cart</i>
</button>
</div>
<h3>${product.title}</h3>
<h4>$${product.price}</h4>
</article>
<!-- end single product -->
`;
});
productDOM.innerHTML = result;
}
getBagButtons() {
const buttons = [...document.querySelectorAll(".bag-btn")];
In HTML I used onclick="displayProducts('bed')"
This will not work tho, since displayProducts is in a class.
I have also tried to add an id to each button and add an eventlistener in DOMContentLoaded, but that wrecks the rest of my DOMContentLoaded stuff
DOMContentLoaded
document.addEventListener("DOMContentLoaded", () => {
const ui = new UI();
const products = new Products();
// setup app
ui.setupAPP();
products
.getProducts()
.then((products) => {
ui.displayProducts(products);
Storage.saveProducts(products);
})
.then(() => {
ui.getBagButtons();
ui.cartLogic();
});
});
These are just a few of the things I've tried, but for each try, one issue is fixed but one or more issues are added, so I could really use some help here. Thanks!
These are the changes we made:
All category buttons gets this event listener
onclick="searchNdisplay(new UI, new Products, 'category text');"
This initializes the ui and products and they get displayed, so we changed it to use the searchNdisplay function
document.addEventListener("DOMContentLoaded", () => {
const ui = new UI();
const products = new Products();
// setup app
ui.setupAPP();
searchNdisplay(ui, products, "");
Storage.saveProducts(products);
});
This function repopulates the page with products that met the search criteria.
function searchNdisplay(ui, products, search)
{
products
.getProducts()
.then((products) => {
if (search == "")
{
ui.displayProducts(products);
}
else
{
ui.displayProducts(products, search);
}
})
.then(() => {
ui.getBagButtons();
ui.cartLogic();
});
}
I have created a product card view in Laravel. the card has a simple "accordion" ('Show Details') - closed by default - that is managed by Vue.js as well as a Vue.js quantity counter that changes the weight value in grams if you add products. It all functions very well on the card's view and it looks like this (closed):
I have another view in which I query my DB for product names with Vue.js to display all products of the same name as a result. The problem is when the cards are displayed on that "parent" view, they all appear with the accordion open and the counter is not responsive. It looks like so:
As you can see, the tailwindcss code is rendered without a problem but the Vue.js is being completely ignored (Although the parent view's Vue.js functions work perfectly) What am I doing wrong? What am I missing here? Why are the directives inside the included blade being ignored?
Here is the Vue.js method that manages the (product cards) views integration onto the parent (product name search) view:
setGearItem(gearItem) {
this.gearItem = gearItem;
this.modal = false;
console.log(gearItem);
document.getElementById("displaySearch").innerHTML = "";
axios.get('/send-name-get-ids/' + this.gearItem)
.then((response) => {
console.log(response.data);
if (response.data.length === 0) {
document.getElementById("displaySearch").innerHTML = `"<strong>${gearItem}</strong>" was not found in our database. You can add it manually:`;
this.generalForm = true;
return;
} else {
for (let i = 0; i < response.data.length; i++) {
axios.get('/gearitem/' + response.data[i])
.then((response) => {
console.log(response.data);
document.getElementById("displaySearch").innerHTML += response.data;
this.generalForm = false;
})
.catch((error) => {
document.getElementById("displaySearch").innerHTML =
"No items to display";
console.log(error);
});
}
}
});
},
The problem is in the .innerHTML method as Vue.js ignores anything added via this method even if it's an AJAX. The solution consists on changing the controller to return a JSON and not a blade view, then using the JSON to populate a Vue.js component to create the item's card. the setGearItem() method was changed like so:
setGearItem(gearItem) {
this.gearItem = gearItem;
this.modal = false;
console.log(gearItem);
document.getElementById("displaySearch").innerHTML = "";
this.displayItemCard = false;
axios.get('/send-name-get-ids/' + this.gearItem)
.then((response) => {
console.log(response.data);
this.gearItemId = response.data[0];
if (response.data.length === 0) {
document.getElementById("displaySearch").innerHTML =
`<p class="text-gray-700 ">
<strong class="capitalize">${gearItem}</strong>
was not found on our database. <br>You're free to add it manually! </p>`;
this.generalForm = true;
return;
} else {
this.displayItemCard = true;
}
});
},
the displayItemCard just activates the card component on the view and displays the correct card according to the id.
So I am trying to make a flashcards website, where users can add, edit, and delete flashcards. There are two cards - front and back. The user can already add words, but cannot edit or delete them. For the purposes of this question I will use an example array:
var flashcards = [["Uomo", "Man"],["Donna", "Woman"],["Ragazzo", "Boy"]]
But I would like a more user-friendly way to edit the flashcards, preferably using a table like this:
<table>
<tr>
<th>Front</th>
<th>Back</th>
</tr>
<tr>
<td><input type="text" name="flashcard" value="Uomo"> </td>
<td><input type="text" name="flashcard" value="Man"></td>
</tr>
<tr>
<td><input type="text" name="flashcard" value="Donna"></td>
<td><input type="text" name="flashcard" value="Woman"></td>
</tr>
<tr>
<td><input type="text" name="flashcard" value="Ragazzo"></td>
<td><input type="text" name="flashcard" value="Boy"></td>
</tr>
</table>
<button type="button">Add more</button>
<br>
<button type="button">Save changes</button>
So they can update their flashcards editing the input fields, or clicking "add more" and it creating a new row. Clicking "save changes" updates the array to the content of the table.
I don't mind it not being a HTML table per se, but something that is easy to edit for the user.
I just cannot figure out the best way to approach this. Any advice?
I already recommended VueJS - it really is a pretty good tool for this problem. Regardless, I have typed up a basic solution using vanilla JavaScript. For the editing part it uses the contenteditable HTML attribute which allows the end-user to double click an element and change it's textContent.
The html display is basic so you can change it however to fit your needs
<div id=style="width: 100%;">
<ul id="table" style="list-style-type: none; display: inline-block;">
</ul>
</div>
<script>
var flashcards = [["Uomo", "Man"],["Donna", "Woman"],["Ragazzo", "Boy"]];
var displayedCard = []; //Using a parallel array to keep track of which side is shown
for(var i = 0; i < flashcards.length; i++){
displayedCard.push(0);
}
function renderFlashcardTable(){ //This will do the initial rendering of the table
let ulTable = document.getElementById("table");
for(var i = 0; i < flashcards.length; i++){
let card = flashcards[i];
let indexOfSideShown = displayedCard[i];
let li = document.createElement("li");
let cardValueSpan = document.createElement("span");
cardValueSpan.innerHTML = card[indexOfSideShown]; //Get the value of the side of the card that is shown
cardValueSpan.setAttribute("contenteditable", "true");
cardValueSpan.oninput = function(e){ //This method gets called when the user de-selects the element they have been editing
let li = this.parentElement;
let sideIndex = parseInt(li.getAttribute("side-index"));
card[sideIndex] = this.textContent;
}
li.appendChild(cardValueSpan);
li.appendChild(getFlipSidesButton(li));
li.setAttribute("side-index", indexOfSideShown);
li.setAttribute("card-index", i);
ulTable.appendChild(li);
}
}
function getFlipSidesButton(listItem){//This is generated for each card and when clicked it "flips the switch"
let btn = document.createElement("button");
btn.innerHTML = "Flip card";
btn.onclick = function(e){
let card = flashcards[listItem.getAttribute("card-index")];
let index = parseInt(listItem.getAttribute("side-index"));
let nextSide = (index == 1) ? 0 : 1;
listItem.setAttribute("side-index", nextSide);
listItem.children[0].innerHTML = card[nextSide];
}
return btn;
}
renderFlashcardTable();
</script>
I've put together a working sample using pure native javascript with a data-driven approach. You can have a look and understand the way how data should be manipulated and worked with in large Js application.
The point here is to isolate the data and logic as much as possible.
Hope this help.
Codepen: https://codepen.io/DieByMacro/pen/rgQBPZ
(function() {
/**
* Default value for Front and Back
*/
const DEFAULT = {
front: '',
back: '',
}
/**
* Class Card: using for holding value of front and back.
* As well as having `update` method to handle new value
* from input itself.
*/
class Card {
constructor({front, back, id} = {}) {
this.front = front || DEFAULT.front;
this.back = back || DEFAULT.back;
this.id = id;
}
update = (side, value) => this[side] = value;
}
/**
* Table Class: handle rendering data and update new value
* according to the instance of Card.
*/
class Table {
constructor() {
this.init();
}
/** Render basic table and heading of table */
init = () => {
const table = document.querySelector('#table');
const thead = document.createElement('tr');
const theadContent = this.renderRow('th', thead, { front: 'Front', back: 'Back' })
const tbody = document.createElement('tbody');
table.appendChild(theadContent);
table.appendChild(tbody);
}
/** Handling add event from Clicking on Add button
* Note the `update: updateFnc` line, this means we will refer
* `.update()` method of Card instance with `updateFnc()`, this is
* used for update value Card instance itself.
*/
add = ({front, back, id, update: updateFnc }) => {
const tbody = document.querySelector('#table tbody');
const row = document.createElement('tr');
const rowWithInput = this.renderRow('td', row, {front, back, id, updateFnc});
tbody.appendChild(rowWithInput);
}
renderInput = (side, id, fnc) => {
const input = document.createElement('input');
input.setAttribute('type','text');
input.setAttribute('name',`${side}-value-${id}`)
input.addEventListener('change', e => this.onInputChangeHandler(e, side, fnc));
return input;
}
renderRow = ( tag, parent, { front, back, id, updateFnc }) => {
const frontColumn = document.createElement( tag );
const backColumn = document.createElement( tag );
/** Conditionally rendering based on `tag` type */
if ( tag === 'th') {
frontColumn.innerText = front;
backColumn.innerText = back;
}else {
/** Create two new inputs for each Card instance. Each handle
* each side (front, back)
*/
const inputFront = this.renderInput('front', id, updateFnc);
const inputBack = this.renderInput('back', id, updateFnc);
frontColumn.appendChild(inputFront);
backColumn.appendChild(inputBack);
}
parent.appendChild(frontColumn)
parent.appendChild(backColumn)
return parent;
}
/** Getting new value and run `.update()` method of Card, now referred as `fnc` */
onInputChangeHandler = (event, side, fnc) => {
fnc(side, event.target.value);
}
}
class App {
/**
* Holding cards data
* Notice this is an object, not an array
* Working with react for a while, I see most of the times data as an object works best when it comes to cRUD, this means we don't have to iterate through the array to find the specific element/item to do the work. This saves a lot of time
*/
cards = {};
constructor(){
this.domTable = new Table();
this.domAdd = document.querySelector('#btn-add');
this.domResult = document.querySelector('#btn-result');
this.domAdd.addEventListener('click', this.onClickAddHandler );
this.domResult.addEventListener('click', this.onClickResultHandler );
}
onClickAddHandler = () => {
const id = uuid();
const newCard = new Card({id});
this.cards[id] = newCard;
this.domTable.add(newCard)
}
onClickResultHandler = () => {
/**
* Using `for ... in ` with object. Or you can use 3rd party like lodash for iteration
*/
for (const id in this.cards) {
console.log({
front: this.cards[id].front,
back: this.cards[id].back,
id: this.cards[id].id
});
}
};
}
// Start the application
const app = new App();
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.8/uuid.min.js"></script>
<div id="table"></div>
<button id="btn-add">Add</button>
<button id="btn-result">Result</button>
i think you can use In-Place Editing System and there's a good tutorial i found
Create an In-Place Editing System