Streamlining CSS Code Development with JavaScript Tools

Adding your own custom CSS code allows you to override the default CSS of the theme and customize the styling of your website.

This code is an HTML file that sets up the structure of a webpage that generates CSS code. The webpage includes a range of inputs and a select element, which allows the user to adjust various properties of the CSS code.

The <!DOCTYPE>, <html>, <head>, and <body> tags are all standard elements of an HTML document.

The <meta> tags provide information about the document, such as the character encoding and the viewport settings. The <title> tag sets the title of the webpage that will be displayed in the browser's title bar.

The <link> tag is used to link to a CSS stylesheet called "style.css", it will be applied to the elements in the HTML.

The <div> with class "container" is the parent container of the entire webpage and the <div> with class "tool" is a child container where the input elements and the text area are placed.

The <div> with class "form-group" is a container for each individual input element. The first input element is a range input with an id of "all", it has a min value of 0, max value of 400, and an initial value of 10. The label is describing the input element, and the span tag with an id of "all_value" will be used to display the value of the input element.

The next input element is a range input with an id of "border", it has a min value of 0, max value of 20, and an initial value of 3. The label is describing the input element, and the span tag with an id of "border_value" will be used to display the value of the input element.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day-5 | Project-5</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <div class="tool">

        <div class="form-group">
          <label for="all">All Corner <span id="all_value"></span> </label>
          <input type="range" value="10" min="0" max="400"  id="all">
        </div>
        <div class="form-group">
          <label for="border">Border Size<span id="border_value"></span> </label>
          <input type="range" value="3" min="0" max="20"  id="border">
        </div>
        <div class="form-group">
          <label for="border_style">Border Style</label>
          <select id="border_style">
              <option>solid</option>
              <option>dotted</option>
              <option>dashed</option>
              <option>double</option>
              <option>groove</option>
              <option>ridge</option>
              <option>inset</option>
              <option>outset</option>
              <option>none</option>
              <option>hidden</option>
          </select>
        </div>


        <div class="form-group">
          <textarea id="code"></textarea>
        </div>

        <div class="form-group">
         <button id="btnCopy">Copy Code</button>
        </div>

    </div>
  </div>
  <script src="js/script.js"></script>
</body>
</html>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,800;1,700;1,800&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;

}

body{
  width: 100vw;
  height: 100vh;
  background-color: #a4b0be;
  display: flex;
  justify-content: center;
  align-items: center;
}

  
.container{
  background-color: #fff;
  width:800px;
  height:800px;
  position: relative;
}
.tool{
  width: 400px;
  height: 400px;
  background-color: #2f3542;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:10px;

}
.form-group{
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0px 10px;
}

.form-group label{
  color:white;
}

.form-group label span{
  background-color: aliceblue;
  color: #2f3542;
  margin-left: 20px;
  padding: 0px 10px;
}

textarea{
  height: 100px;
  resize: none;
  font-size: 18px;
}

button{
  height: 35px;
  border: none;
  background-color: #ff4757;
  color:white;
  padding:5px;
}

This code is JavaScript that runs when the DOM (Document Object Model) has finished loading. It is adding event listeners and handling the logic for updating the CSS code and applying it to the webpage.

The code starts by selecting the different elements in the HTML document using querySelector and getElementById methods. It assigns the selected elements to variables such as container, btnCopy, allBorder, borderElement, all_value, border_value, code, and border_styleElement.

It also declares some variables like all_radius, border_style, border_size, and coding which will be used to store the values of the input elements and the generated CSS code.

The allBordersUpdate() function is used to update the CSS code and apply it to the webpage. It updates the values of all_radius, border_size, and border_style based on the values of the input elements. It also updates the text of the all_value and border_value span elements to display the current values of the input elements. It assigns the generated CSS code to the coding variable and updates the value of the code textarea. It also updates the container element's style property with the generated CSS code using the style.cssText property.

The code then adds event listeners to the allBorder and borderElement input elements to call the allBordersUpdate function when the value of the input element changes or the mouse is moved.

The code also adds an event listener to the btnCopy button, which allows the user to copy the generated CSS code to the clipboard when the button is clicked.

The code also calls the allBordersUpdate() function once when the DOM is loaded to set the initial values of the input elements and the CSS code.

js/script.js

document.addEventListener("DOMContentLoaded",()=>{

const container=document.querySelector('.container');
const btnCopy=document.querySelector('#btnCopy');
const allBorder=document.getElementById('all');
const borderElement=document.getElementById('border');
const all_value=document.getElementById('all_value');
const border_value=document.getElementById('border_value');
const code=document.getElementById('code');
const border_styleElement=document.getElementById('border_style');

var all_radius=10;
var border_style="solid";
var border_size=3;
var coding="Test";

function allBordersUpdate(){
  all_radius=allBorder.value;
  border_size=borderElement.value;
  all_value.innerText=all_radius+"px";
  border_value.innerText=border_size+"px";
  coding=`
    border-radius:${all_radius}px;
    border:${border_size}px ${border_style} red;
  `;
  code.value=coding;
  container.style.cssText=coding;
}




allBorder.addEventListener("mousemove",allBordersUpdate);
allBorder.addEventListener("change",allBordersUpdate);


borderElement.addEventListener("mousemove",allBordersUpdate);
borderElement.addEventListener("change",allBordersUpdate);



btnCopy.addEventListener('click',()=>{
  document.querySelector('textarea').select();
  document.execCommand('copy');
  alert("Code Coppied");

});
allBordersUpdate();


//Border Style
border_styleElement.addEventListener('change',function(){
  border_style=this.value;
  allBordersUpdate();
});
 
});

Output

Live Preview