How do I set it to only insert the span class card__title if API value field x_restrict is equal to 1 and change the css value of filter: blur(0px) to filter: blur(10px) in card__image
What my script does so far is grab images from the api and show only 6 images.
const url = 'https://api.adoreanime.com/api/pixiv/?type=member_illust&id=12540747&page=1';
var p = [];
var y;
var i = 0;
fetchData(url);
function fetchData(url) {
fetch(url).then((response) => response.json()).then(function(data) {
//console.log('data', data);
data.illusts.slice(0, 6).forEach((art) => {
var imgSrc = art.image_urls.medium.replace('i.pximg.net', 'i.pixiv.cat');
p[i] = `<div class="card">
<div class="card__image"><img src="${imgSrc}" alt="image" ></div>
<span class="card__title">NSFW</span>
</div>`;
i++;
var x = document.getElementsByClassName('card__wrapper');
var y = p.join(' ');
x[0].innerHTML = y;
});
});
}
/*I have used simple CSS to make the cards responsive */
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
background-color: #fff;
color: #333;
font-family: Tahoma, sans-serif;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.card__wrapper {
display: flex;
margin: 0 auto;
padding: 0%;
max-width: 1024px;
background-color: #ccc;
flex-wrap: wrap;
flex-direction: row;
}
.card img {
max-width: 200px;
}
.card__image {
filter: blur(0px)
}
.card {
background-color: #fff;
border-radius: 6px;
filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2));
margin: 10px 10px;
padding: 20px;
text-align: center;
}
.card__title {
margin-top: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
position: absolute;
top: 10px;
left: 20px;
background-color: red;
color: #FFF;
padding: 5px;
}
.card__cta {
padding: 10px 25px;
margin: 10px 0px;
background-color: #e26d00;
font-size: 20px;
color: #fff;
width: 100%;
}
.card__cta:hover {
background-color: #ffb066;
}
#media screen and (max-width: 449px) {
.card {
width: 95%;
}
}
#media screen and (min-width: 450px) and (max-width: 699px) {
.card {
width: 45.5%;
}
}
#media screen and (min-width: 700px) and (max-width: 1023px) {
.card {
width: 30.5%;
}
}
#media screen and (min-width: 1024px) {
.card {
width: 23%;
}
}
<section>
<main class="card__wrapper">
</main>
</section>
All you need to do is assign a variable that sets a class for your card based on whether or not art.x_restrict returns a truthy or falsy value. I assigned a nsfw variable to be "" or "blur" depending on that condition. Then set the class of the card to include ${nsfw}. In the css just include a style rule under the blur class to have a filter: blur(5px).
You won't be able to change a style rule to be unique to every instance of a class like you're asking. Also, you can't just change the style of the element through DOM manipulation because you're declaring a template literal instead of building an html object. Conditionally assigning the class that has the blur is the best method for your approach.
To add the NSFW span conditionally, just add another conditional statement that returns the string that is the span if nsfw is truthy. I achieved this with the && logic operator
In addition, I cleaned out a few items that were not needed for your function. Instead of forEach I replaced it with a map function, which returns an array. That way I can set p to be the returned array of all of the art work html. This eliminates the need to increment i or push to an array based on index. I think it's a little cleaner.
const url = 'https://api.adoreanime.com/api/pixiv/?type=member_illust&id=12540747&page=1';
fetchData(url);
function fetchData(url) {
fetch(url).then((response) => response.json()).then(function(data) {
var p = data.illusts.slice(0, 6).map(art => {
var imgSrc = art.image_urls.medium.replace('i.pximg.net', 'i.pixiv.cat');
var nsfw = art.x_restrict ? "blur" : ""
return `<div class="card">
<div class="card__image ${nsfw}"><img src=${imgSrc} alt="image"/></div>
${nsfw && '<span class="card__title">NSFW</span>'}
</div>`
})
var x = document.getElementsByClassName('card__wrapper');
var y = p.join(' ');
x[0].innerHTML = y;
})
}
/*I have used simple CSS to make the cards responsive */
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
background-color: #fff;
color: #333;
font-family: Tahoma, sans-serif;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.card__wrapper {
display: flex;
margin: 0 auto;
padding: 0%;
max-width: 1024px;
background-color: #ccc;
flex-wrap: wrap;
}
.card img {
max-width: 200px;
width: 100%;
}
.card__image {
filter: blur(0x)
}
.blur {
filter: blur(5px);
}
.card {
background-color: #fff;
border-radius: 6px;
filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2));
margin: 10px 10px;
padding: 20px;
text-align: center;
}
.card__title {
margin-top: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
position: absolute;
top: 10px;
left: 20px;
background-color: red;
color: #FFF;
padding: 5px;
}
.card__cta {
padding: 10px 25px;
margin: 10px 0px;
background-color: #e26d00;
font-size: 20px;
color: #fff;
width: 100%;
}
.card__cta:hover {
background-color: #ffb066;
}
#media screen and (max-width: 449px) {
.card {
width: 95%;
}
}
#media screen and (min-width: 450px) and (max-width: 699px) {
.card {
width: 45.5%;
}
}
#media screen and (min-width: 700px) and (max-width: 1023px) {
.card {
width: 30.5%;
}
}
#media screen and (min-width: 1024px) {
.card {
width: 23%;
}
}
<section>
<main class="card__wrapper">
</main>
</section>
Related
I'm trying to create a responsive navbar.
When screen size is reduced I'm using media query to style visibility of #nav-items to hidden and display a menu icon.
I have written a javascript code to handle on click on menu icon style #nav-itmes to visible and hidden (trying to toggle by if condition to check style value)
Problem: on first click result is ok. #nav-items are visible but again when i click #nav-items style does not change to hidden (while i can console click event is there on every click)
Can anyone guide me ?
There are several approach to have this result to toggle an element but I want to only know what is issue in below code. (only javascript please).
let nav_icon = document.getElementById("nav-icon");
nav_icon.addEventListener("click", () => {
console.log('clicked');
let nav_items = document.getElementById("nav-items");
nav_items.style.visibility = nav_items.style.visibility = "hidden" ? "visible" : "hidden";
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
a,
ul,
h3 {
text-decoration: none;
color: white;
list-style-type: none;
font-weight: bold;
}
body {
background-image: url("/img/bg.jpg");
}
img {
display: none;
height: 30px;
width: 30px;
margin-right: 10px;
position: fixed;
top: .4em;
right: .2em;
}
.navbar {
display: flex;
height: 40px;
width: 100%;
align-items: center;
justify-content: space-between;
background-color: #ABA9A966;
gap: 10px;
}
nav a,
header h3 {
margin: 0px 10px 0px 10px;
}
nav a:hover {
background-color: grey;
}
#media screen and (max-width: 800px) {
nav a,
header h3 {
margin: 0px 5px 0px 5px;
font-size: 15px;
}
}
#media screen and (max-width: 600px) {
.navbar {
flex-flow: column;
}
header {
display: none;
}
nav {
width: auto;
text-align: center;
background-color: #ABA9A966;
position: fixed;
visibility: hidden;
top: 2.5em;
right: 0;
}
nav a {
margin: 0;
height: 22px;
padding-top: 3px;
display: block;
width: 8rem;
font-size: 14px;
}
img {
display: block;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="navbar">
<header>
<h3>Hello Guest</h3>
</header>
<nav id="nav-items">
Home
Dispatch
Account
Report
Control
</nav>
</div>
<img src="/img/menu.png" id="nav-icon">
Often you cannot see the style of an element in JS if the style was applied in a stylesheet
You can toggle a class instead
For example
nav { visibility: hidden; }
nav.show { visibility: visible; }
and js
const nav_icon = document.getElementById("nav-icon");
const nav_items = document.getElementById("nav-items");
nav_icon.addEventListener("click", () => {
console.log('clicked');
nav_items.classList.toggle("show")
});
const nav_icon = document.getElementById("nav-icon");
const nav_items = document.getElementById("nav-items");
nav_icon.addEventListener("click", () => {
console.log('clicked');
nav_items.classList.toggle("show")
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
a,
ul,
h3 {
text-decoration: none;
color: white;
list-style-type: none;
font-weight: bold;
}
body {
background-image: url("/img/bg.jpg");
}
img {
height: 30px;
width: 30px;
margin-right: 10px;
position: fixed;
top: .4em;
right: .2em;
}
.navbar {
display: flex;
height: 40px;
width: 100%;
align-items: center;
justify-content: space-between;
background-color: #ABA9A966;
gap: 10px;
}
nav { visibility: hidden; }
nav a,
header h3 {
margin: 0px 10px 0px 10px;
}
nav a:hover {
background-color: grey;
}
#media screen and (max-width: 800px) {
nav a,
header h3 {
margin: 0px 5px 0px 5px;
font-size: 15px;
}
}
#media screen and (max-width: 600px) {
.navbar {
flex-flow: column;
}
header {
display: none;
}
nav {
width: auto;
text-align: center;
background-color: #ABA9A966;
position: fixed;
visibility: hidden;
top: 2.5em;
right: 0;
}
nav a {
margin: 0;
height: 22px;
padding-top: 3px;
display: block;
width: 8rem;
font-size: 14px;
}
img {
display: block;
}
}
nav.show {
visibility: visible;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="navbar">
<header>
<h3>Hello Guest</h3>
</header>
<nav id="nav-items">
Home
Dispatch
Account
Report
Control
</nav>
</div>
<img src="/img/menu.png" id="nav-icon" title="ICON" alt="ICON">
Think this line is incorrect:
nav_items.style.visibility = nav_items.style.visibility = "hidden" ? "visible" : "hidden";
The equality check should be:
nav_items.style.visibility === "hidden"
so this may work:
nav_items.style.visibility = (nav_items.style.visibility === "hidden" ? "visible" : "hidden");
Try the css property for media-query: display:none !important;
I'm still a beginner with ReactJS and I need to create a Carousel that is responsive, the way I need to leave is like this:
I was able to create Carousel on both desktop and responsive using the react-responsive-carousel library.
The problem is that in the mobile format, when I pass the slides of each Carousel, the expected behavior is not happening. When I click to show the next slide, in Carousel it still shows the current slide, and just a piece of the next slide.
It is easier to explain by showing a short gif I made, notice what happens when I click to show the next slide.
When it is in the desktop format, Carousel works the right way, I also created a small gif to show it.
Can you tell me what you’re doing wrong so that Carousel is working that way?
import React from "react";
import PropTypes from "prop-types";
import "./carousel.scss";
import { Carousel as CarouselLib } from "react-responsive-carousel";
import { CAROUSEL_ITEMS } from "./Carousel.utils";
const Carousel = ({ subtitle, testID, title }) => {
const items = React.useMemo(
() =>
CAROUSEL_ITEMS.map((item) => (
<div key={item.id}>
<div className="images">
<img className="image" src={item.url} alt="" />
</div>
<div className="infos">
<h3>{item.title}</h3>
<span>{item.subtitle}</span>
</div>
</div>
)),
[]
);
return (
<div data-testid={`${testID}_Container`} className="carousel-container">
<div className="carousel-header">
<h5>{subtitle}</h5>
<h3>{title}</h3>
</div>
<div className="carousel-content">
<CarouselLib
centerMode
showStatus={false}
dynamicHeight={false}
emulateTouch
swipeScrollTolerance={50}
centerSlidePercentage={30}
showThumbs={false}
infiniteLoop
showIndicators
renderArrowPrev={(onClickHandler, hasPrev, label) =>
hasPrev && <div />
}
renderArrowNext={(onClickHandler, hasNext, label) =>
hasNext && (
<button
type="button"
onClick={onClickHandler}
className="custom-arrow"
data-testid={`${testID}_Button_Next`}
/>
)
}
>
{items}
</CarouselLib>
</div>
</div>
);
};
Carousel.propTypes = {
subtitle: PropTypes.string,
testID: PropTypes.string.isRequired,
title: PropTypes.string
};
Carousel.defaultProps = {
testID: "Carousel",
subtitle: "READ OUR CLIENT",
title: "CASES"
};
export default Carousel;
.carousel {
&-container {
.images {
background-color: #fff;
width: 100%;
max-width: 416px;
height: 280px;
.image {
width: 100%;
height: auto;
background-position: center center;
background-repeat: no-repeat;
}
#media (max-width: 600px) {
max-width: 270px;
height: auto;
}
}
.infos {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
h3 {
font-family: Alliance2;
color: #000;
line-height: 0.76;
font-size: 2.5rem;
letter-spacing: normal;
font-style: normal;
font-weight: normal;
font-stretch: normal;
margin: 24px 0 20px 0;
#media (max-width: 600px) {
font-size: 1.5rem;
}
}
span {
font-family: Alliance2;
color: #000;
line-height: 0.76;
font-size: 1rem;
letter-spacing: normal;
font-style: normal;
font-weight: 500;
font-stretch: normal;
text-transform: uppercase;
margin-bottom: 30px;
#media (max-width: 600px) {
font-size: 0.625rem;
}
}
}
.carousel {
.slide {
background-color: transparent !important;
#media (max-width: 1024px) {
min-width: 50% !important;
}
#media (max-width: 600px) {
min-width: 90% !important;
}
}
.control-dots {
.dot {
border-radius: 0 !important;
background-color: #000 !important;
width: 33px !important;
height: 3px !important;
box-shadow: none !important;
opacity: 1 !important;
&.selected {
height: 7px !important;
}
&:focus {
outline: none !important;
}
}
}
}
}
&-header {
color: #000;
font-family: 'Alliance2';
font-weight: 300;
margin: auto;
max-width: 1300px;
text-transform: uppercase;
#media (max-width: 960px) {
align-items: center;
display: flex;
flex-direction: column;
}
h5 {
font-size: 1rem;
font-weight: bold;
margin: 0;
}
h3 {
height: 80px;
margin-top: 13px;
margin-bottom: 44px;
color: #000;
font-size: 3.5rem;
line-height: 1.04;
letter-spacing: -1.1px;
#media (max-width: 960px) {
font-size: 1.87rem;
}
#media (max-width: 600px) {
margin-bottom: 0;
}
}
}
&-content {
margin: auto;
max-width: 1440px;
width: 100%;
.custom-arrow {
position: absolute;
top: 7em;
bottom: auto;
right: 4.3em;
background-color: transparent;
border: none;
border-left: 4px solid #000;
border-bottom: 4px solid #000;
width: 67px;
height: 67px;
transform: rotate(225deg);
cursor: pointer;
&:focus {
outline: none !important;
}
}
}
}
Thank you very much in advance for any help/tip.
I don't know react-responsive-carousel , I'm using react-slick (here) in my projects and I never had a problem with the responsive.
I had a similar trouble with this lib, i solved the mobile question adding a few lines of CSS to the main div of my Carousel component:
#media only screen and (max-width: 600px) {
.carousel-wrapper{
max-width: 100%;
}
}
I have a sidebar that slides out 250px using javscript on the desktop view. When it comes to the mobile view I want the sidebar to take up 100% width. I am trying to use Media Queries in Javascript but no matter what changes I make It seems to overwrite my styles I have for my sidebar on the desktop view.
HTML
<nav class="navbar">
<div id="toggle-btn" class="sidemenu-btn">
<i class="fas fa-bars"></i>
</div>
<div id="toggle-nav" class="navbar-items animated fadeInLeft delay-1s">
Home
About
Skills
Portfolio
Contact
</div>
</nav>
CSS
.navbar {
height: 100%;
width: 0;
position: fixed;
background: #141313;
}
.navbar .sidemenu-btn {
font-size: 2.5rem;
padding: 3rem 0;
text-align: center;
margin-left: 1rem;
cursor: pointer;
color: #141313;
}
.navbar .navbar-items {
display: flex;
flex-direction: column;
text-align: center;
display: none;
margin-left: 1rem;
}
.navbar .navbar-items a {
text-decoration: none;
color: white;
padding: 1.2rem 0;
font-weight: 400;
font-size: 1.2rem;
text-transform: uppercase;
}
.navbar .navbar-items a:hover {
text-decoration: line-through;
}
#media screen and (max-width: 768px) {
.navbar {
position: relative;
}
}
JS
const toggleBtn = document.querySelector("#toggle-btn");
const toggleNav = document.querySelector(".navbar");
const togglenavItems = document.querySelector('.navbar-items');
toggleBtn.addEventListener("click", sideMenu);
toggleBtn.addEventListener("click", mediaQuery);
function sideMenu() {
if (toggleNav.style.width === "250px") {
toggleNav.style.width = "0px";
} else {
toggleNav.style.width = "250px";
}
}
function mediaQuery() {
const x = window.matchMedia('(max-width: 768px)');
const y = document.querySelector('.navbar');
if (x.matches && y.style.width === "100%") {
y.style.width = "0px";
} else {
y.style.width = "100%";
}
}
Media queries can do the work. You don't need js for changing the width of the navbar-items. See this
const toggleBtn = document.querySelector("#toggle-btn");
const toggleNav = document.querySelector(".navbar");
const togglenavItems = document.querySelector('.navbar-items');
toggleBtn.addEventListener("click", sideMenu);
function sideMenu() {
toggleNav.classList.toggle('open');
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
height: 100%;
width: 100%;
position: fixed;
}
.sidemenu-btn {
font-size: 2.5rem;
padding: 0;
text-align: center;
cursor: pointer;
color: green;
position: absolute;
right: 20px;
top: 20px;
}
.navbar-items {
display: flex;
flex-direction: column;
text-align: center;
width: 250px;
height: 100%;
padding-left: 1rem;
background: #141313;
transition: all .5s ease;
}
.navbar .navbar-items a {
text-decoration: none;
color: white;
padding: 1.2rem 0;
font-weight: 400;
font-size: 1.2rem;
text-transform: uppercase;
}
.navbar .navbar-items a:hover {
text-decoration: line-through;
}
#media (max-width: 768px) {
.navbar-items {
width: 100%;
}
}
.navbar.open .navbar-items {
width: 0;
}
<nav class="navbar">
<div id="toggle-btn" class="sidemenu-btn">
<i class="fas fa-bars"></i>
Toggle
</div>
<div id="toggle-nav" class="navbar-items animated fadeInLeft delay-1s">
Home
About
Skills
Portfolio
Contact
</div>
</nav>
Just adding the media query you can change the width of the element, no need to check in js
#media (max-width: 768px) {
.navbar-items {
width: 100%;
}
}
Adding a .open class that will be added on the .navbar and will trigger the transition
.navbar.open .navbar-items {
width: 0;
}
Your js was now simplified
const toggleBtn = document.querySelector("#toggle-btn");
const toggleNav = document.querySelector(".navbar");
toggleBtn.addEventListener("click", sideMenu);
function sideMenu() {
toggleNav.classList.toggle('open');
}
This is easier done with CSS to control how it looks on the mobile/desktop, with JS just handling the logic. The following will fix the style discrepancy, and make your JS easier to navigate.
CSS
.navbar{
width: 250px;
height: 100%;
position: fixed;
background: #141313;
}
.navHidden{
width: 0px !important;
}
/* smaller screen size */
#media screen and (max-width:768px) {
.navbar{
width: 100%;
}
}
HTML
<nav class="navbar navHidden">
JS
function sideMenu() {
toggleNav.classList.toggle("navHidden")
}
Sidenote
In your included code, the click of your toggle button you will be setting the width of the navbar to 250px, but then it will be passed through to your next function, which will then swap it to 100% in EVERY CASE regardless of screen size, so the toggle function you have written will never work.
I'm building a film review site, where all of the content is generated on the main page from data input in the admin panel and placed into a container div.
I've got a basic sorting system (by ID, ascending/descending) already which works fine on my end, but I also want to be able to filter the films by genre (e.g if film is marked as Action on database, make all non-action films hidden.
This cannot be done by CSS alone as I'm not able to add classes to the content within the containers, the container for the film image is generated via JS.
I'm assuming I need to create a new function such as
function getFilmListByGenre(genreName)
Or something along those lines, but I don't know how I'd make it work.
Here is the current Javascript that I have, which creates the sort feature.
let db = new PouchDB('films');
let radios = document.getElementsByName("sort");
radios[0].addEventListener("change", getFilmList);
radios[1].addEventListener("change", getFilmList);
getFilmList();
function getFilmList(){
db.allDocs({include_docs: true, descending: radios[0].checked}).then(function(films){
let listContents = '';
for(let i = 0; i < films.total_rows; i++) {
let thisFilm = films.rows[i].doc;
let image = '<a class="btn" href="viewFilm.html?id=' + thisFilm._id +'"><img class="filmImage" src="' + thisFilm.image +'"></a>';
listContents += '<div class="filmRow">'+ image + '</div>';
}
document.getElementById('filmContainer').innerHTML = listContents;
})
}
I basically want to grab the value for genre (which can only be "Action", "Comedy", "Horror" or "Other") for each film from the database, then if the corresponding radio (named filter) is selected, all of the films which aren't labelled as that genre are hidden.
#import url(https://fonts.googleapis.com/css?family=Raleway);
body {
margin: 0;
font-family: 'Raleway', georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
h1 {
color: #aaaaaa;
text-align: left;
}
.sortFilms {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
header {
text-align: center;
display: inline-block;
border-bottom: 5px;
border-top: 0;
border-left: 0;
border-right: 0;
border-style: solid;
border-color: #aaaaaa;
width: 80%;
padding: 20px;
background-color: #e0e0e0;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
label {
font-size: 1em;
padding: 6px;
color: #fff;
font-weight: 700;
display: block;
text-align: left;
}
.form {
margin: auto;
display: flex;
text-align: center;
flex-direction: column;
}
h2 {
font-weight: 700;
font-size: 2em;
width: 50%;
color: #B2365F;
}
#formTitle {
margin-top: 0;
margin-bottom: 0;
}
.row {
margin-left: -20px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.col {
padding: 20px;
}
input,
textarea, select {
width: 100%;
display: block;
border-radius: 25px;
background-color: #e0e0e0;
padding: 10px;
border: none;
box-sizing:border-box; }
}
.tagline {
margin: 0;
color: #333333;
font-size: 1em;
font-weight: 700;
}
input::placeholder {
color: #000;
}
textarea::placeholder {
color: #000;
}
#modifyFilmButton {
float: right;
}
#media only screen and (max-width: 700px) {
.row {
grid-template-columns: 1fr;
}
}
#media screen and (max-width:800px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border: 2px solid #e0e0e0;
background-color: #e0e0e0;
display: block;
margin-bottom: .625em;
border-radius: 20px;
}
table td {
display: block;
font-weight: bold;
font-size: 1.2em;
text-align: left;
padding: 15px;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
.oldFilm {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
text-align: left;
display: inline-block;
background-color: #AAAAAA;
width: 80%;
padding: 20px;
}
#oldTitle {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
padding-bottom: 20px;
}
td {
padding: 5px;
font-weight: bold;
}
table {
border-collapse: collapse;
text-align: center;
width: 100%;
}
thead {
background: #ff6699;
}
.reviewImage {
width: 200px;
border-radius: 20px;
}
.filmRow img {
width: 300px;
height: 420px;
margin: 10px;
border-radius: 20px;
}
.filmRow {
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#filmContainer {
width: 100%;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
#date {
padding: 5px;
text-align: left;
width: 30%;
}
#date input {
width: auto;
}
#date label {
display: -webkit-inline-box;
}
#oldTitle2 {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
}
.genre {
padding: 5px;
text-align: left;
width: 60%;
}
.genre input {
width:auto;
}
.genre label {
display: -webkit-inline-box;
}
<div class="sortFilms">
<h2 id="formTitle">Latest reviews</h2>
<div id='filmContainer'></div>
</div>
<div class="oldFilm">
<h2 id="oldTitle2">Sort by</h2>
<div id="date">
<p><b>Age of review</b></p>
<label>Newer<input type="radio" name="sort" checked/></label>
<label>Older<input type="radio" name="sort"/></label>
</div>
<div class="genre">
<p><b>Genre</b></p>
<label>Action<input type="radio" name="filter"/></label>
<label>Comedy<input type="radio" name="filter"/></label>
<label>Horror<input type="radio" name="filter"/></label>
<label>Other<input type="radio" name="filter"/></label>
</div>
</div>
You should seperate your display logic and your fetching logic, then you can just filter out the results that aren't the genre you wanted. I would do it something like this:
var db = {
allDocs: () => {
return new Promise((resolve) => resolve([{genre: 'Horror', title: 'The Hills Have Eyes'}, {genre: 'Comedy', title: 'Dumb and Dumber'}]))
}
}
function getFilmList() {
return db.allDocs();
}
function getFilmsByGenre(genre) {
return getFilmList().then(films => films.filter(film => film.genre === genre));
}
function displayFilms(films) {
let listContents = '';
for(let i = 0; i < films.length; i++) {
let thisFilm = films[i].title;
listContents += '<div class="filmRow">'+ thisFilm + '</div>';
}
document.getElementById('filmContainer').innerHTML = listContents;
}
document.getElementById('all').addEventListener('click', () => {
getFilmList().then(displayFilms)
})
document.querySelectorAll('[name="filter"]').forEach(radio => radio.addEventListener('change', (event) => {
getFilmsByGenre(event.target.parentNode.textContent).then(displayFilms)
}))
<div id="filmContainer"></div>
<button id="all">All</button>
<label>Action<input type="radio" name="filter"/></label>
<label>Comedy<input type="radio" name="filter"/></label>
<label>Horror<input type="radio" name="filter"/></label>
<label>Other<input type="radio" name="filter"/></label>
Hi guys i am using this codepen as an example on mysite. My question is, on the fifth panel is possible to make the drop down box when u click on it a different color?
Html:
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600|Source+Code+Pro' rel='stylesheet' type='text/css'>
<div class="patch-container">
<div class="patch-item patch-button" data-patch-panel="1">One</div>
<div class="patch-panel" data-patch-panel="1">One</div>
<div class="patch-item patch-button" data-patch-panel="2">Two</div>
<div class="patch-panel" data-patch-panel="2">Two</div>
<div class="patch-item patch-button" data-patch-panel="3">Three</div>
<div class="patch-panel" data-patch-panel="3">Three</div>
<div class="patch-item patch-button wide" id="js-four" data-patch-panel="4">Four</div>
<div class="patch-panel" data-patch-panel="4">Four</div>
<div class="patch-item patch-button wide" id="js-five" data-patch-panel="5">Five</div>
<div class="patch-panel" data-patch-panel="5">Five</div>
</div>
CSS:
*,
*:before,
*:after {
box-sizing: border-box;
-webkit-appearance: none;
}
body {
height: 100%;
background-color: #22313F;
font-family: 'Open Sans';
-webkit-font-smoothing: subpixel-antialiased;
}
/********************************
Plugin Hero Example
********************************/
.patch-button {
color: #FFF;
cursor: pointer;
font-size: 1em;
font-size: 1.5em;
letter-spacing: 0;
line-height: 150px;
}
.patch-button:hover {
border: solid 3px #FFF;
line-height: 144px;
}
.patch-container {
background-color: #2C3E50;
border-radius: 5px;
color: #FFF;
margin: 4%;
overflow: auto;
padding: 2%;
position: relative;
text-align: center;
zoom: 1;
max-width: 1000px;
}
.patch-item {
background-color: #FFF;
border-radius: 4px;
float: left;
height: 150px;
margin: 0 0 2% 0;
width: 100%;
}
.patch-panel {
background-color: #FFF;
border-radius: 4px;
color: #FFF;
display: none;
float: left;
font-size: 1.5em;
height: 250px;
line-height: 250px;
margin: 0 0 2% 0;
width: 100%;
}
[data-patch-panel='1'],
[data-patch-panel='5'],
[data-patch-panel='8'] {
background: #F5AB35;
}
[data-patch-panel='2'],
[data-patch-panel='6'],
[data-patch-panel='9'] {
background: #00B16A;
}
[data-patch-panel='3'],
[data-patch-panel='7'],
[data-patch-panel='10'] {
background: #E74C3C;
}
[data-patch-panel='4'],
[data-patch-panel='8'],
[data-patch-panel='12'] {
background: #3498DB;
}
/********************************
Media Queries
********************************/
#media only screen and (min-width: 550px) {
h2 {
font-size: 3.3rem;
}
.patch-item {
margin: 1%;
width: 48%;
}
.patch-panel {
margin: 1%;
width: 98%;
}
.components {
margin: 1.5%;
width: 46%;
}
}
#media only screen and (min-width: 992px) {
.patch-container {
margin: 4% auto;
}
.patch-item {
margin: 0.6667%;
margin: calc(4% / 6);
width: 32%;
}
.patch-panel {
margin: 0.6667%;
margin: calc(4% / 6);
width: 98.6666%;
width: calc(100% - (4% / 6) * 2);
}
.resize {
margin: 50px auto -2%;
}
.wide {
margin: 0.6667%;
margin: calc(4% / 6);
width: 48.6666%;
width: calc(50% - (4% / 6) * 2);
}
.thin {
width: 23.6666%;
width: calc(25% - (4% / 6) * 2);
}
}
So just to explain again, everything works fine. But what i want to happen is on the panel 5. The box it self is fine, but when you click on it, i would like it not to be orange but a different color on the new box which appears. So for the new box to appear, i would like it white with a black border, but i am not sure how
[data-patch-panel='1'],
[data-patch-panel='5'],
[data-patch-panel='8'] {
background: #F5AB35;
}
Tried playing with this part, but this affects both boxes.
Thanks for the help
You want to give the panel another class, id or attribute to identify it apart from the panel above it. Something like this:
<div class="patch-panel panel-five" data-patch-panel="5">Five</div>
and then add
.panel-five {
background-color: #FFFFFF;
}
to your CSS