Kevin Aartsen Kevin Aartsen - 1 month ago 5
Javascript Question

How to use dynamic CSS

I'm working on a footer generator which looks like this :

enter image description here

When people fill in the data it generates the code and a preview image of what its gonna look like.

enter image description here

For now it only works with the trademark and company name. What i am trying to achieve here is when people fill the field "your color" with some color value, I would like it to change the background color of the preview with the entered color. What is the best way to achieve this. Eventually i would like the entered value to be displayed.
I'm not asking for code just a point in the right direction.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="resources/style.css">
</head>

<body>

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Footer Generator</a>
</div>

<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</ul>
</div>
</nav>

<!-- Customize your footer and submit -->
<div id="container">

<form class ="form" method="post">

<h3>Select your trademark</h3>

<select class="form-control" name="trademark" action="">

<option></option>
<option>©</option>
<option>™</option>
<option>®</option>

</select>

<h3>Your company name</h3>

<input class="form-control" type="text" name="companyName" placeholder="Your company name" />

<h3>Your Color</h3>

<input class="form-control" type="text" name="customColor" placeholder="Type in the value of your color e.g #ffffff" />

<br/>
<br/>

<button class="form-control" type= "submit" name= "submit">Generate</button>
</form>

<!-- Shows raw code on click -->





<!-- script for the preview image -->

<?php

function footerPreview ()
{
echo "<h3>Preview:</h3>";
date_default_timezone_set('UTC');
$trademark = $_POST["trademark"];
$company = $_POST["companyName"];
$date = date("Y");
echo "<div id='footer_date'>$trademark $date $company </div>";
}


// generate result for the head
function rawHead()
{
$head = htmlspecialchars('<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
</head>',ENT_QUOTES);
echo "<pre><h4>Put this code inside your head tags</h4>$head</pre>";
}



// generate result for the body
function rawBody ()
{
$body1of5 = htmlspecialchars('<div id="footer_date">',ENT_QUOTES);
$body2of5 = $_POST["trademark"];
$body3of5 = date("Y");
$body4of5 = $_POST["companyName"];
$body5of5 = htmlspecialchars('</div>',ENT_QUOTES);
echo "<pre><h4>Put this code inside your body tags</h4>$body1of5 $body2of5 $body3of5 $body4of5 $body5of5 </pre>";
}

// generate result for the CSS
function rawCSS ()
{
$theCSS = htmlspecialchars('color:#ffffff;
width:100%;
background-color:rgba(0, 0, 0, 0.6);
text-align:center;
padding-top:15px;
height:50px;
font-family: "Raleway", sans-serif;
position:fixed;
right: 0;
bottom: 0;
left: 0;',ENT_QUOTES);
echo "<pre><h4>Put this code in your websites stylesheet</h4>$theCSS</pre>";
}

// Generate everything

if(isset($_POST['submit']))

{
footerPreview();
rawHead();
rawBody();
rawCSS();
}

?>


</div>

<div id="generated_footer_date"> © 2016 Footer Generator </div>

</body>
</html>

Answer

You could load in the elements dynamically with JavaScript, probably JQuery to make it easier to select and change elements. I've got an example of how to change the color of any element in your page dynamically below:

$('body').on('blur', '#stylemenowcolor', function(){
  $('.stylemenow').css('background-color', '#' + $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="stylemenow">
  test
</div>

<input placeholder="(e.g. 00ff00)" type="text" id="stylemenowcolor">