Develop Reference

Using different images foreach object in one class

I am trying to make a catalog for online shop like ebay. How to make each box with different image and title. Am I supposed to use JS here and if so how to do it?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
background-color: #E7E7E7;
font-family: system-ui;
color: #000;
}
.container {
display: grid;
grid-template-columns: 20rem 1fr;
margin: 2.6rem;
}
.box {
border-radius: 3%;
background-color: #fff;
box-shadow: 10px 10px 20px#bababa;
width: 15rem;
height: 17.5rem;
}
.image {
position: relative;
top: 10px;
background-color: #fff;
background-image: url(Reference/Shoes/Air\ Jordan\ 1\ Retro\ High\ OG\ Shoes.webp);
background-repeat: no-repeat;
background-size: cover;
padding: 100px;
margin: 0 10px;
}
.title {
margin: 20px 20px 0 20px;
}
.creator {
color: #525252;
font-size: 9.5pt;
margin: 0 20px 20px 20px;
}
<div class="container">
<div class="box">
<div class="image"></div>
<div class="title">
<p>Nike Air Max Jordan 1</p>
</div>
<div class="creator">
<p>Martingrgv</p>
</div>
<div class="price"></div>
</div>
<div class="box">
<div class="image"></div>
<div class="title">
<p>Nike Air Max Jordan 1</p>
</div>
<div class="creator">
<p>Martingrgv</p>
</div>
<div class="price"></div>
</div>
</div>
Result:
I am new to building a website so you might see beginner mistakes.
If you have any suggestions to improve the code I am open.

Do you mean this - you can ajax the object from your server:
const items = [
{ image: "nike1.jpg", title:"Nike Air Max Jordan 1",price:150, creator:"Martingrgv"},
{ image: "nike2.jpg", title:"Nike Air Max Jordan 2",price:160, creator:"Martingrgv"}
]
document.getElementById("container").innerHTML = items.map(item =>
`<div class="box">
<div class="image"><img src="${item.image}" /></div>
<div class="title">
<p>${item.title}</p>
</div>
<div class="creator">
<p>${item.creator}</p>
</div>
<div class="price">$${item.price}</div>
</div>`)
.join("");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
background-color: #E7E7E7;
font-family: system-ui;
color: #000;
}
#container {
display: grid;
grid-template-columns: 20rem 1fr;
margin: 2.6rem;
}
.box {
border-radius: 3%;
background-color: #fff;
box-shadow: 10px 10px 20px#bababa;
width: 15rem;
height: 17.5rem;
}
.image {
position: relative;
top: 10px;
background-color: #fff;
padding: 100px;
margin: 0 10px;
}
.title {
margin: 20px 20px 0 20px;
}
.creator {
color: #525252;
font-size: 9.5pt;
margin: 0 20px 20px 20px;
}
<div id="container"></div>

Staggering chatbot queries and replies in GUI

I am working on a chatbot at the moment and trying to connect a GUI I have been working with to the project.
It is running smooth but my output is a little messed up; in particular, the chat boxes should alternate between the user and the BOT, but they are stacking on top and not formatting correctly.
I want to fix this issue, but keep the screen dividing in half down the middle so that the bot outputs are on the right and the users on the left. I just need to get them to alternate back and forth.
I've tried anchoring the newest box with a margin-top, tried setting a counter variable to update the placement of each new box, etc., but am having trouble spacing them relative to each other.
Below is the code without the backend work. So, this won't run perfect but it should get the setup I have across...
Here is the CSS code:
body {
font-family: Cambria;
color: rgb(122, 4, 4);
background-color: rgb(136, 175, 175);
}
h1 {
color: black;
margin-bottom: 0;
margin-top: 0;
text-align: center;
font-size: 40px;
}
h2 {
color: black;
font-size: 20px;
margin-top: 3px;
text-align: center;
}
#user_chatbox {
margin-left: 0;
margin-right: auto;
width: 50%;
margin-top: 30%;
}
#bot_chatbox {
margin-left: 50%;
margin-right: auto;
width: 50%;
margin-top: 10%;
/* height: 80%; */
/* background-color: pink; */
/* border-radius: 10px; */
}
#userInput {
margin-left: auto;
margin-right: auto;
width: 95%;
margin-top: 150px;
}
#textInput {
width: 92%;
border: 3px solid Black;
border-bottom: 3px solid #660096;
font-family: Cambria;
font-size: 16px;
}
#buttonInput {
padding: 10px;
font-family: Cambria;
font-size: 72;
}
.userText {
color: rgb(0, 0, 0);
font-family: Georgia;
font-size: 16px;
text-align: left;
line-height: 20px;
}
.userText span {
display:block;
width:auto;
background-color: rgb(87, 201, 152);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
.botText {
color: Black;
font-family: Consolas, monaco, monospace;
font-size: 16px;
text-align: left;
/* line-height: calc(29 + var(--chatbox_spacing))px; */
line-height: 20px;
}
.botText span {
display:block;
width:auto;
background-color: rgb(73,196,199);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
... and here are the .html with .js code (within index.html) that is updating the blocks to be printed out with new information (input from the user and a reply from the bot):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Analysis Chatbot</h1>
<!-- The main chat environment for interacting with the bot. -->
<div>
<!-- The text of the bot. -->
<div id="bot_chatbox">
<p class="botText"><span>Welcome! How can I help you analyze your dataset?</span></p>
</div>
<div id="user_chatbox"></div>
<!-- The input text of the user interacting with the bot. -->
<div id="userInput">
<input id="textInput" type="text" name="msg" placeholder="Message">
<input id="buttonInput" type="submit" value="Send">
</div>
<script>
function getBotResponse() {
var rawText = $("#textInput").val();
var userHtml = '<p class="userText"><span>' + rawText + '</span></p>';
$("#textInput").val("");
$("#user_chatbox").append(userHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
$.get("/get", { msg: rawText }).done(function(data) {
var botHtml = '<p class="botText"><span>' + data + '</span></p>';
$("#bot_chatbox").append(botHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
});
}
$("#textInput").keypress(function(e) {
if(e.which == 13) {
getBotResponse();
}
});
$("#buttonInput").click(function() {
getBotResponse();
})
</script>
</div>
</body>
</html>
Nothing breaks, but I have attached some images below of the current output. Again, it isn't as much that the replies are basic right now, but rather that I want the displayed text blobs to be alternating from the bot (right side) to the user (left side) while keeping the screen split in the middle.
I want that image to be: the top blue on the right (Welcome...) then the first green on the left (can you find me sales in...) then next blue on right and so on so forth...

I put together a basic example of what you're trying to do using a 100% width wrapper that holds the message inside. The wrapper has display:flex; so that the <div>s inside don't expand. Check it out:
$(document).ready(function() {
$('#sendUser').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message user"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
$('#sendBot').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message bot"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
});
#chatbox{
width: 300px;
height: 400px;
border: 1px solid black;
margin: auto;
margin-top: 20px;
overflow-y: scroll;
}
#inputs{
display: grid;
padding: 10px 0;
width: 300px;
margin: auto;
grid-template-columns: auto 40px 40px;
grid-gap: 4px;
}
.button{
text-align: center;
border: 1px solid #a0a0a0;
cursor: pointer;
}
.button:hover{
background-color: grey;
color: white;
}
.message{
display: flex;
}
.message.user{
text-align: left;
}
.message > div{
margin: 10px 10px 0;
padding: 6px 8px;
border-radius: 15px;
color: white;
}
.message.bot > div{
margin-left: auto;
background-color: teal;
}
.message.user > div{
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chatbox">
<div class="message bot">
<div>
hello
</div>
</div>
<div class="message user">
<div>
hello!
</div>
</div>
</div>
<div id="inputs">
<input type="text" id="userText">
<div class="button" id="sendBot">Bot</div>
<div class="button" id="sendUser">User</div>
</div>
Here's the CodePen if you wanted to mess with it.

Getting an arrow to point at a specific (x, y) point

Hello I'm attempting to to have two arrows pointing at a specific (x, y) point or in the general area of a button.
I would like two arrows coming from each of the boxs pointing in the general area of the button. I can do this fine with regular css on certain screens but when the screen is resized or smaller then the arrows no longer point to the button. I'm just trying to figure out a good way to handle this.
So really what I'm asking is what would be good way to go about having two arrows appended after 2 divs pointing at the same point. (The Red Square)
JSFIDDLE:
https://jsfiddle.net/kxw7jquu/
HTML
<div class='app-info-panel'>
<div class='app-info-panel-header'>
<h1>Data-sources</h1>
</div>
<div class='data-source-panel-wrapper' id='source_report'>
<h1>Report_File</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h3>Report Id</h3>
<h2>1</h2>
</div>
<div class='data-source-info'>
<h3>Report Name</h3>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h3>Date</h3>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h3>Reporter</h3>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow' style="transform: rotate(50deg); top: -10px">
➝
</div>
</div>
<div class='data-source-panel-wrapper' id='source_order'>
<h1>Order_movement</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h2>ID: 1</h2>
</div>
<div class='data-source-info'>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow' style="transform: rotate(130deg); bottom: -40px; left: 60px">
➝
</div>
</div>
<div>
<button class='data-source-button'>Order Filling</button>
</div>
</div>
CSS
.app-info-panel {
border-radius: 4px;
height: 30rem;
box-sizing: border-box;
padding: 20px;
position: relative;
width: 100%;
h1 {
font-size: 1.5rem;
font-weight: 500;
}
}
.data-source-panel-wrapper {
position: absolute;
user-select: none;
.source-arrow {
position: absolute;
left: calc(50% - 50px);
bottom: 20px;
font-size: 12.5rem;
color: #D6D7D8;
transform-origin: left;
z-index: 1;
}
h1 {
font-size: 1.4rem;
color: #0481E2;
text-align: center;
}
}
.data-source-panel {
position: relative;
display: flex;
box-sizing: border-box;
padding: 1rem;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
z-index: 2;
.data-source-info {
h3 {
color: #0481E2;
margin-top: 0;
margin-bottom: 3px;
font-size: .8rem;
line-height: normal;
}
h2 {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
}
}
#source_report {
.data-source-panel {
.data-source-info {
margin-right: 18px;
}
}
}
#source_order {
right: 60px;
.data-source-panel {
flex-direction: column;
.data-source-info {
margin: 5px 0;
}
}
}
.data-source-button {
display: block;
width: 220px;
height: 68px;
font-size: 1.25rem;
margin: 18.75rem auto 0;
color: white;
background-color: #FF9700;
}

I'm not really a math enthusiast, i managed to find a formula on the internet to do what you wanted.
Source Pen Instead of following the mouse i made it so it follows the button
PS: I removed the the html on the right for the sake of this explanation.
i know it's not a complete answer, but you can adjust it from here.
window.onresize = pointing;
function pointing() {
let point = document.querySelector('.data-source-button');
let rad = Math.atan2(point.offsetLeft, point.offsetTop);
let left = (rad * (20 / Math.PI) * -5) + 60;
document.querySelector('.leftArrow').style.transform = "rotate(" + left + "deg)"
}
pointing();
.app-info-panel {
border-radius: 4px;
height: 30rem;
box-sizing: border-box;
padding: 20px;
position: relative;
width: 100%;
}
.app-info-panel h1 {
font-size: 1.5rem;
font-weight: 500;
}
.data-source-panel-wrapper {
position: absolute;
user-select: none;
}
.data-source-panel-wrapper .source-arrow {
position: absolute;
left: calc(50% - 50px);
bottom: 20px;
font-size: 12.5rem;
color: #D6D7D8;
transform-origin: left;
z-index: 1;
}
.data-source-panel-wrapper h1 {
font-size: 1.4rem;
color: #0481E2;
text-align: center;
}
.data-source-panel {
position: relative;
display: flex;
box-sizing: border-box;
padding: 1rem;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
z-index: 2;
}
.data-source-panel .data-source-info h3 {
color: #0481E2;
margin-top: 0;
margin-bottom: 3px;
font-size: .8rem;
line-height: normal;
}
.data-source-panel .data-source-info h2 {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
#source_report .data-source-panel .data-source-info {
margin-right: 18px;
}
.data-source-button {
display: block;
width: 220px;
height: 68px;
font-size: 1.25rem;
margin: 18.75rem auto 0;
color: white;
background-color: #FF9700;
}
<div class='app-info-panel'>
<div class='app-info-panel-header'>
<h1>Data-sources</h1>
</div>
<div class='data-source-panel-wrapper' id='source_report'>
<h1>Report_File</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h3>Report Id</h3>
<h2>1</h2>
</div>
<div class='data-source-info'>
<h3>Report Name</h3>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h3>Date</h3>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h3>Reporter</h3>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow leftArrow' style=" top: -10px">
➝
</div>
</div>
<div>
<button class='data-source-button'>Order Filling</button>
</div>
</div>

Adding padding within a div and the background image and color go away

First off let me say how much of a big help this website has been with my little project. Anyway on to my question.
So right now I'm creating a personal website for myself and I want to add some padding to something, but when I add padding, it ends up creating space between some stuff and making it completely white without using the background image or color. This is what I mean.
When I open up the "About" tab (I added padding to that one but not the one above), do you see how there's a lot of white space? How can I have that colored in grey and use the background image aswell?
And when I close the tab, there is a big white gap, which is (I'm pretty sure) the padding not closing
I only added padding to the "About" tab and as you can see, it is messed up compared to the others (This is the jsfiddle)
.small2{
font-family: 'Ubuntu', serif;
font-size: 30px;
padding: 15px;
margin: auto;
}
This is the css code for the class holding the info.

Take the padding off .two, and if you want the white border around the content in .four, you can use a margin:
$(document).ready(function(event) {
$('.one').click(function() {
$('.two').slideToggle();
})
$('.three').click(function() {
$('.four').slideToggle();
})
$('.five').click(function() {
$('.six').slideToggle();
})
$('.seven').click(function() {
$('.eight').slideToggle();
})
setTimeout(function() {
$('.two').slideToggle();
}, 500);
});
body {
margin: 0;
}
.container {
overflow: hidden;
}
.one {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.two {
background-color: #333333;
display: none;
text-align: center;
color: white;
background-image: url("noise.png");
}
.three {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.four {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
margin: 15px;
}
.five {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.six {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
}
.seven {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.eight {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
}
.botbar {
background-color: #2b2a2a;
text-align: center;
color: white;
background-image: url("noise.png");
}
.big1 {
font-family: 'Megrim', serif;
font-size: 210px;
}
.small1 {
font-family: 'Ubuntu', serif;
font-size: 80px;
}
.small2 {
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
margin: auto;
}
.botinfo {
font-family: 'Ubuntu', serif;
font-size: 25px;
}
<div class="container">
<div class="big1">
<div class="one">Main</div>
</div>
<div class="small1">
<div class="two">Welcome to my page!
<br>Click around
<br>Learn a thing or two about me</div>
</div>
<div class="big1">
<div class="three">About</div>
</div>
<div class="small2">
<div class="four">My name is Bob and I currently attend University of Bob.
<br>If a passionate student that is always trying to learn new and exciting things and broaden their knowledge in the field of programming is someone you need, then I'm your guy.
<br>I have worked on projects ranging from this website that was created by yours truly, a game of solitaire with my own personal twist, and much more.
<br>All my projects can be found in the tab below!</div>
</div>
<div class="big1">
<div class="five">Projects</div>
</div>
<div class="small1">
<div class="six">My projects can be found here</div>
</div>
<div class="big1">
<div class="seven">Contact</div>
</div>
<div class="small1">
<div class="eight">You can contact me here</div>
</div>
<div class="botinfo">
<div class="botbar">Made by Bob | Copyright 2016</div>
</div>
</div>

Try moving the padding to the .four class, I think it will give you your desired result.

You could do some restructuring of the code to simplify it like
$(document).ready(function(event) {
$('.header').click(function() {
$(this).next('.content').slideToggle();
})
setTimeout(function() {
$('.content').first().slideToggle();
}, 500);
});
body {
margin: 0;
}
.container {
overflow: hidden;
}
.header {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.content {
background-color: #333333;
display: none;
text-align: center;
color: white;
background-image: url("noise.png");
}
.botbar {
background-color: #2b2a2a;
text-align: center;
color: white;
background-image: url("noise.png");
}
.big1 {
font-family: 'Megrim', serif;
font-size: 210px;
}
.small1 {
font-family: 'Ubuntu', serif;
font-size: 80px;
}
.small2 {
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
padding: 15px;
margin: auto;
}
.botinfo {
font-family: 'Ubuntu', serif;
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="big1 header">
Main
</div>
<div class="small1 content">
Welcome to my page!
<br>Click around
<br>Learn a thing or two about me
</div>
<div class="big1 header">
About
</div>
<div class="small2 content">
My name is Bob and I currently attend University of Bob.
<br>If a passionate student that is always trying to learn new and exciting things and broaden their knowledge in the field of programming is someone you need, then I'm your guy.
<br>I have worked on projects ranging from this website that was created by yours truly, a game of solitaire with my own personal twist, and much more.
<br>All my projects can be found in the tab below!
</div>
<div class="big1 header">
Projects
</div>
<div class="small1 content">
My projects can be found here
</div>
<div class="big1 header">
Contact
</div>
<div class="small1 content">
You can contact me here
</div>
<div class="botinfo">
<div class="botbar">Made by Bob | Copyright 2016</div>
</div>
</div>

Use display : none; for .small2 in css. Even though it is hidden it is taking space on UI. (if you need padding when visible)
.small2{
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
padding: 15px;
margin: auto;
display : none;
}

Keeping elements' hover style active when clicked on

I am making a selection panel and I am having a hard time figuring out an aspect to it. There are nine boxes and I want the user to be able to click the boxes and when clicked for the hover's format to stay present and then ideally some sort of checkmark or something added into the border of the box. I am completely unsure of how to get the boxes' hover font effect to stay when I take the mouse off.
Does anyone know how I can do this?
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
#project-scope-title {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>

Create another class name that hold the same css style when hovering, and add those class into clicked element or use toggleClass like following example :
$('.project-option-boxes').click(function() {
$(this).hide().toggleClass('box_focused').fadeIn('slow');
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
#project-scope-title {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
.box_focused {
background-color: #45ba95;
background-image : url("http://findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png");
background-position: right top;
background-repeat: no-repeat;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>

You can use the following example by using JQuery and using .hover and .addClass():
$(".project-option-boxes").hover(function()
{
$(this).addClass("active");
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
#project-scope-title {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
.active {
background: #45ba95;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>

You can create a class with the same style as the hover, and when one box is clicked, you can add this class to the box.
.project-option-boxes.active {
background-color: #45ba95;
color: #FFF;
}
and to give the class to the boxes,
$(document).on('click', 'project-option-boxes', function (e) {
$(this).toggleClass('active');
}