theodinproject | Main Website for The Odin Project | Collaboration library

I am totally stuck.

I am working on the Library project from The Odin Project's JavaScript course, and I am trying to use localStorage so that the user can save their "library" to, well, their local storage.

I've never been able to 100% successfully use localStorage before. It seems simple enough, but for some reason, there was some kind of block in my brain about how to utilize it correctly. This time, however, I was able to get my program to be able to 1) save the user's data (via a button click), 2) load it correctly into the individual "cards" on the page, and 3) delete the entire storage (via another button click). I am extremely excited about this... it feels so good to not know how to do something and then get it to work.

The one thing that has me totally confused is being able to delete a unique item from the localStorage array. When you click the "New Book" button on my page, a modal comes up, and you're required to enter a book's title, author, # of pages, and whether or not you have read it. There's also an option to set the background color. Clicking Submit will then generate a "card" with the book's information on it.

Each card has an X button in the corner. When the X button is clicked, the card is deleted from the page. I want it so that it (meaning that card's book's object) is also deleted from the local storage array (preferably without the user having to press the "Save to local storage" button again, although it isn't a dealbreaker).

Each time the user creates a new book, the book's details are saved as an object into an array called libraryBooks (which I then stringify so I can use localStorage). From my understanding, in order to be able to delete individual parts of the array, I need to use code that is something like this:

First of all a disclaimer, I'm not a dev. I'm halfway through The Odin Project and have covered some HTML and CSS, but, have not yet started on JS. In order to help with my learning I've created my own blog. My aim is for each blog post to have its own stylesheet (so with each new post I learn a little more about CSS).

Anyway, I plan to write a post about the benefits of using an eReader, specifically the Kindle. I've styled the page to look like a Kindle Oasis, and I'd like the reader to be able to step through the article contents via the Kindle's next/prev buttons, but, as I'm not a dev, this is where I'm stuck. Via Stack overflow I've managed to add some JS that will display page 1, 2 and 3 via dedicated buttons for each dive element, but, what I really need is to step through x number of pages via the prev/next buttons.

Here's what I have so far: https://codepen.io/dbssticky/pen/yLVoORO. Any help would be much appreciated. What I should do of course is finish The Odin Project and come up with a solution on my own, but, I'd really like to get this Kindle article published sooner rather than later. Hence my rather cheeky request for assistance.

Here's the JS I'm currently using:

Following Odin Project Rock Paper Scissors - trying to use a JS prompt input in another function to work out who won a game.

Have stripped a lot out to hopefully make the question/answer as reusable as possible for others.

I have 2 global variables set :

screenshot from TheOdinProject

please see the scrnsht i new to this new it says using git add .a is for adding all files in CURRENT DIRECTORY and git add -A is for adding all files in CURRENT REPOSITORY. Is directory different from repository or ONE AND THE SAME?Thanks.

I followed setting-up-git guide. It didn't work. I also tried to follow the GitHub's connecting-to-github-with-ssh guide. It didn't work either. I keep getting same error :

host key verification failed.

After googling found this suggestion: ssh-keygen -R hostname.

Tried replacing hostname with github.com and 13.234.176.102.

Still same result : do_known_hosts: hostkeys_foreach failed: No such file or directory.

The .ssh diirectory cotains below files:

I am doing Ruby_chess project on Odin Project https://www.theodinproject.com/courses/ruby-programming/lessons/ruby-final-project And i don't know how to make my chess color properly as Mrs.rlmoser99's

Her code about background: https://github.com/rlmoser99/ruby_chess/blob/master/lib/displayable.rb

i take the same background color from her code,

but our two chessboards are far too different.

I'm working on the Odin Project Etch-A-Sketch project using Vanilla Javascript: more details.

Live preview: https://purplepineapple123.github.io/etch-a-sketch/

To start, I've dynamically created a grid of divs in javascript and successfully created buttons (black, psychedelic and user color selection) to change the color of each child div grid element on mouseEnter.

The problem that I'm running into is one of optimization. Every time a user clicks a button, that event is triggered and not forgotten on subsequent button clicks. For example, if you click the "psychedelic-button" 5 times and then hover over the grid, console.log shows that color 5 times for each grid you hover over.

Notice in this screenshot how only 1 grid is highlighted, but the color console.log is layering divs for each button press (I spammed the psychedelic-button for this example.

This issue of layering is really exacerbated on the "chooseColor" button. If the user selects multiple different colors with the color picker, the console.log shows exponential duplicate outputs with each mouseEnter event. This causes massive lag.

Things I've tried:

• Adding and removing classes instead of changing the background color. This worked great except I couldn't figure out a way to add the psychedelic (random JS selected color) to a css class.
• Removing the color changing functions outside of the createGrid() main function. This didn't affect anything because I believe the issue is arising from multiple button clicks.
• Moving the the color changing functions outside of the createGrid() function. Then grabbing the divCol class. Converting that nodeList into an Array. Adding a mouseEnter eventListener forEach element, then changing the color. Same issue with duplications on each button click.

How do I prevent this div stacking and lag from accumulated button clicks?

My code:

HTML

I'm trying to recreate the Google homepage as part of theodinproject and I'm having trouble trying to get the navbar across the top to the right.

I tried display: flex and float: right but I'm not sure how to get the Images, Gmail, and Sign In button to the right. I've been told that my style isn't being applied also. Would anyone be willing to help? I'd greatly appreciate it. Below is a snippet of my html and css code and a link to how the page appears. https://i.stack.imgur.com/pAgDn.png

I'm building a library where you can add books you've read or not read. I want to filter the books by read, not read and all, and displaying them when clicking on the correspondent button. When there's just one book in the library it works fine, but when I add more it either displays them all or none.

Here's the function that I used