kjannette/reactnd-project-bookbrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hotfix

Browse Source
This commit is contained in:
Kenneth Jannette
2025-02-27 10:37:53 -05:00
parent 1a7b41a2aa
commit b39f786339
3 changed files with 115 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -14,7 +14,7 @@
/>
<!--
-->
<title>MyReads</title>
<title>BookBrowser</title>
</head>
<body>
<div id="root"></div>

18
src/App.css
View File

@@ -1,10 +1,13 @@
html, body, .root {
html,
body,
.root {
height: 100%;
}
body {
line-height: 1.5;
}
body, .app {
body,
.app {
background: white;
}
@@ -55,7 +58,7 @@ body, .app {
border-radius: 25px;
background: #2e7d32;
/*background-image: url('./icons/add.svg');*/
background-image: url('./icons/search.svg');
background-image: url("./icons/search.svg");
background-repeat: no-repeat;
background-position: 20px;
background-size: 14px;
@@ -97,7 +100,7 @@ body, .app {
width: 50px;
height: 53px;
background: white;
background-image: url('./icons/arrow-back.svg');
background-image: url("./icons/arrow-back.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 28px;
@@ -153,7 +156,7 @@ body, .app {
height: 40px;
border-radius: 50%;
background: #60ac5d;
background-image: url('./icons/arrow-drop-down.svg');
background-image: url("./icons/arrow-drop-down.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
@@ -178,12 +181,11 @@ body, .app {
font-size: 0.8em;
}
/* logo */
.logo {
width: 30px;
height: 30px;
background-image: url('./icons/logo.svg');
height: 24px;
background-image: url("./icons/logo.svg");
background-repeat: no-repeat;
background-position: center;
display: inline-block;

106
src/Bookshelf.js
View File

@@ -1,17 +1,15 @@
import React, { Component } from 'react';
import './Bookshelf.css'
import React, { Component } from "react";
import "./Bookshelf.css";
class Bookshelf extends Component {
render() {
const books = this.props.books
const onSelect = this.props.onSelect
const books = this.props.books;
const onSelect = this.props.onSelect;
return (
<div className="list-books">
<div className="list-books-title">
<span className="logo"></span>
<h1>MyReads</h1>
<h1>Book Nook Browser</h1>
</div>
<div className="list-books-content">
<div>
@@ -19,19 +17,32 @@ class Bookshelf extends Component {
<h2 className="bookshelf-title">Currently Reading</h2>
<div className="bookshelf-books">
<ol className="books-grid">
{books.filter(function(book){
return book.shelf === "currentlyReading"
}).map((book) => (
{books
.filter(function (book) {
return book.shelf === "currentlyReading";
})
.map((book) => (
<li key={book.id}>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url("${ book.imageLinks.thumbnail }")` }}></div>
<div
className="book-cover"
style={{
width: 128,
height: 193,
backgroundImage: `url("${book.imageLinks.thumbnail}")`,
}}
></div>
<div className="book-shelf-changer">
<select name={book.id} onChange={onSelect} defaultValue={book.shelf}>
<select
name={book.id}
onChange={onSelect}
defaultValue={book.shelf}
>
<option value="none">Move to...</option>
<option value="currentlyReading">Currently Reading</option>
<option value="currentlyReading">
Currently Reading
</option>
<option value="wantToRead">Want to Read</option>
<option value="read">Read</option>
<option value="none">None</option>
@@ -43,7 +54,6 @@ class Bookshelf extends Component {
</div>
</li>
))}
</ol>
</div>
</div>
@@ -51,19 +61,32 @@ class Bookshelf extends Component {
<h2 className="bookshelf-title">Want to Read</h2>
<div className="bookshelf-books">
<ol className="books-grid">
{books.filter(function(book){
return book.shelf === "wantToRead"
}).map((book) => (
{books
.filter(function (book) {
return book.shelf === "wantToRead";
})
.map((book) => (
<li key={book.id}>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url("${ book.imageLinks.thumbnail }")` }}></div>
<div
className="book-cover"
style={{
width: 128,
height: 193,
backgroundImage: `url("${book.imageLinks.thumbnail}")`,
}}
></div>
<div className="book-shelf-changer">
<select name={book.id} onChange={onSelect} defaultValue={book.shelf}>
<select
name={book.id}
onChange={onSelect}
defaultValue={book.shelf}
>
<option value="none">Move to...</option>
<option value="currentlyReading">Currently Reading</option>
<option value="currentlyReading">
Currently Reading
</option>
<option value="wantToRead">Want to Read</option>
<option value="read">Read</option>
<option value="none">None</option>
@@ -75,7 +98,6 @@ class Bookshelf extends Component {
</div>
</li>
))}
</ol>
</div>
</div>
@@ -83,19 +105,32 @@ class Bookshelf extends Component {
<h2 className="bookshelf-title">Read</h2>
<div className="bookshelf-books">
<ol className="books-grid">
{books.filter(function(book){
return book.shelf === "read"
}).map((book) => (
{books
.filter(function (book) {
return book.shelf === "read";
})
.map((book) => (
<li key={book.id}>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url("${ book.imageLinks.thumbnail }")` }}></div>
<div
className="book-cover"
style={{
width: 128,
height: 193,
backgroundImage: `url("${book.imageLinks.thumbnail}")`,
}}
></div>
<div className="book-shelf-changer">
<select name={book.id} onChange={onSelect} defaultValue={book.shelf}>
<select
name={book.id}
onChange={onSelect}
defaultValue={book.shelf}
>
<option value="none">Move to...</option>
<option value="currentlyReading">Currently Reading</option>
<option value="currentlyReading">
Currently Reading
</option>
<option value="wantToRead">Want to Read</option>
<option value="read">Read</option>
<option value="none">None</option>
@@ -107,15 +142,14 @@ class Bookshelf extends Component {
</div>
</li>
))}
</ol>
</div>
</div>
</div>
</div>
</div>
)
);
}
}
export default Bookshelf
export default Bookshelf;