How can I manipulate the color of a box shadow with an event handler?

I'm building an app that contains six different topics inside of a flexbox with a box-shadow.

My goal is to manipulate the color of the box-shadow with an event handler so that the box-shadow color will change and match the color of the button for whichever topic is selected by the end user. (e.g. if the user clicks the button for the topic "Technology", the box-shadow should change from #D1D1D1 to #6699FF)

I've spent several hours on MDN and Treehouse attempting to find a solution, but to no avail.

The jQuery I've posted in this question does not execute properly, I could really use some help!

This is what I've compiled thus far:

$(“.buttons”).click(function(){
  var color = $(this).css(“background-color”);
  var box-shadow = “0 5px” + color;
  $(this).parent().css("box-shadow”);
});
/* =================================
  Page Styles
==================================== */

* {
	box-sizing: border-box;
}

body {
	font-size: 1.2em;
	font-family: 'Varela Round', sans-serif;
	color: #fff;
	background: #f2f2f2;
	padding-left: 5%;
	padding-right: 5%;
}

header {
	text-align: center;
	color: #000;
	font-size: 1.2em;
}

.topics {
	padding: 10px;
	background: #fff;
  border-radius: 25px;
	margin: 45px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	text-align: center;
	box-shadow: 0 2.5px 0 0 #d1d1d1;
}

.technology {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #6699FF;
	border-radius: 3px;
}

.business {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #32BC67;
	border-radius: 3px;
}

.entertainment {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #9F60FF;
	border-radius: 3px;
}

.shopping {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #F44658;
	border-radius: 3px;
}

.sports {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #FE9900;
	border-radius: 3px;
}

.weather {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #FFC100;
	border-radius: 3px;
}

/* =================================
  Flexbox
==================================== */

.articles {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    background: #fff;
    border-radius: 25px;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: left;
    box-shadow: 0 0 10px #D1D1D1;
}

.article-1 {
  display: table-cell;
  background-color: #fff;
  width: 300px;
  height: 200px;
  border-radius: 3px;
  border-color: #D1D1D1;
  border-width: 1px;
  padding: 50px;
  margin: 25px;
  box-shadow: 2px 2px 10px #D1D1D1;
}

.article-2 {
		display: table-cell;
    background-color: #fff;
    width: 300px;
    height: 200px;
		border-radius: 3px;
    border-color: #D1D1D1;
    border-width: 1px;
    padding: 50px;
    margin: 25px;
    box-shadow: 2px 2px 10px #D1D1D1;
}

.article-3 {
		display: table-cell;
    background-color: #fff;
    width: 300px;
    height: 200px;
		border-radius: 3px;
    border-color: #D1D1D1;
    border-width: 1px;
    padding: 50px;
    margin: 25px;
    box-shadow: 2px 2px 10px #D1D1D1;
}
<!DOCTYPE html>
<html>

<head>
	<title>Daily News</title>
	<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/page.css">
	<link rel="stylesheet" href="css/flexbox.css">
</head>

<body>
	<header>
	</header>

	<nav class="topics">
		<nav class="technology">Technology</nav>
		<nav class="business">Business</nav>
		<nav class="entertainment">Entertainment</nav>
		<nav class="shopping">Shopping</nav>
		<nav class="sports">Sports</nav>
		<nav class="weather">Weather</nav>
	</nav>

	<section class="articles">

	<section class=article-1>
	</section>

	<section class=article-2>
	</section>

	<section class=article-3>
	</section>

	</section>

</body>

</html>

2 answers

  • answered 2017-10-23 22:44 PHPglue

    If you must:

    $(“.buttons”).click(function(){
      var color = $(this).css(“background-color”);
      var box-shadow = “0 5px” + color;
      $(this).parent().css("box-shadow”);
    });
    

    should be more like

    $('.buttons').click(function(){
      var t = $(this);
      t.parent().css('boxShadow', '0 5px '+t.css('backgroundColor'));
    });
    

    With just one String argument .css() gets a single style property. With two arguments it assigns one style property. With an Object as an argument, it loops over the Object, and assigns multiple style properties.

  • answered 2017-10-23 22:44 Commercial Suicide

    You forgot to add buttons class to your buttons and you also used .css() method a little wrong: it should be .css("box-shadow", boxShadow);. And there are more some little issues with your code, so here is the working example:

    $(".buttons").click(function(){
      var color = $(this).css("background-color");
      var boxShadow = "0 5px " + color;
      $(this).parent().css("box-shadow", boxShadow);
    });
    /* =================================
      Page Styles
    ==================================== */
    
    * {
    	box-sizing: border-box;
    }
    
    body {
    	font-size: 1.2em;
    	font-family: 'Varela Round', sans-serif;
    	color: #fff;
    	background: #f2f2f2;
    	padding-left: 5%;
    	padding-right: 5%;
    }
    
    header {
    	text-align: center;
    	color: #000;
    	font-size: 1.2em;
    }
    
    .topics {
    	padding: 10px;
    	background: #fff;
      border-radius: 25px;
    	margin: 45px auto;
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: space-around;
    	text-align: center;
    	box-shadow: 0 2.5px 0 0 #d1d1d1;
    }
    
    .technology {
    	color: #fff;
    	padding: 15px;
    	margin: 5px;
    	background: #6699FF;
    	border-radius: 3px;
    }
    
    .business {
    	color: #fff;
    	padding: 15px;
    	margin: 5px;
    	background: #32BC67;
    	border-radius: 3px;
    }
    
    .entertainment {
    	color: #fff;
    	padding: 15px;
    	margin: 5px;
    	background: #9F60FF;
    	border-radius: 3px;
    }
    
    .shopping {
    	color: #fff;
    	padding: 15px;
    	margin: 5px;
    	background: #F44658;
    	border-radius: 3px;
    }
    
    .sports {
    	color: #fff;
    	padding: 15px;
    	margin: 5px;
    	background: #FE9900;
    	border-radius: 3px;
    }
    
    .weather {
    	color: #fff;
    	padding: 15px;
    	margin: 5px;
    	background: #FFC100;
    	border-radius: 3px;
    }
    
    /* =================================
      Flexbox
    ==================================== */
    
    .articles {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        background: #fff;
        border-radius: 25px;
        flex-wrap: wrap;
        justify-content: space-around;
        text-align: left;
        box-shadow: 0 0 10px #D1D1D1;
    }
    
    .article-1 {
      display: table-cell;
      background-color: #fff;
      width: 300px;
      height: 200px;
      border-radius: 3px;
      border-color: #D1D1D1;
      border-width: 1px;
      padding: 50px;
      margin: 25px;
      box-shadow: 2px 2px 10px #D1D1D1;
    }
    
    .article-2 {
    		display: table-cell;
        background-color: #fff;
        width: 300px;
        height: 200px;
    		border-radius: 3px;
        border-color: #D1D1D1;
        border-width: 1px;
        padding: 50px;
        margin: 25px;
        box-shadow: 2px 2px 10px #D1D1D1;
    }
    
    .article-3 {
    		display: table-cell;
        background-color: #fff;
        width: 300px;
        height: 200px;
    		border-radius: 3px;
        border-color: #D1D1D1;
        border-width: 1px;
        padding: 50px;
        margin: 25px;
        box-shadow: 2px 2px 10px #D1D1D1;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!DOCTYPE html>
    <html>
    
    <head>
    	<title>Daily News</title>
    	<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    	<link rel="stylesheet" href="css/page.css">
    	<link rel="stylesheet" href="css/flexbox.css">
    </head>
    
    <body>
    	<header>
    	</header>
    
    	<nav class="topics">
    		<nav class="technology buttons">Technology</nav>
    		<nav class="business buttons">Business</nav>
    		<nav class="entertainment buttons">Entertainment</nav>
    		<nav class="shopping buttons">Shopping</nav>
    		<nav class="sports buttons">Sports</nav>
    		<nav class="weather buttons">Weather</nav>
    	</nav>
    
    	<section class="articles">
    
    	<section class=article-1>
    	</section>
    
    	<section class=article-2>
    	</section>
    
    	<section class=article-3>
    	</section>
    
    	</section>
    
    </body>
    
    </html>