From b05f390e45b12f962147536ec30a9562e320334d Mon Sep 17 00:00:00 2001 From: dollykumari9798 <89187472+dollykumari9798@users.noreply.github.com> Date: Wed, 12 Oct 2022 00:26:20 +0530 Subject: [PATCH] Added a button css generator --- Button_CSS_Generator/index.html | 190 ++++++++++++++++++++++++ Button_CSS_Generator/script.js | 249 ++++++++++++++++++++++++++++++++ Button_CSS_Generator/style.css | 155 ++++++++++++++++++++ 3 files changed, 594 insertions(+) create mode 100644 Button_CSS_Generator/index.html create mode 100644 Button_CSS_Generator/script.js create mode 100644 Button_CSS_Generator/style.css diff --git a/Button_CSS_Generator/index.html b/Button_CSS_Generator/index.html new file mode 100644 index 00000000..e39f369f --- /dev/null +++ b/Button_CSS_Generator/index.html @@ -0,0 +1,190 @@ + + + + + + + Document + + + +
+
+

CONTROL:

+
+

Colors

+
+ Background: +
+
+ Font: +
+
+ Border: +
+
+
+

Size

+
+ Border: +
+
+ Font: +
+
+
+

Border Style

+
+ dotted +
+
+ dashed +
+
+ solid +
+
+ double +
+
+ groove +
+
+ ridge +
+
+ inset +
+
+ outset +
+
+ none +
+
+
+

Margin

+
+ Top: +
+
+ Right: +
+
+ Bottom: +
+
+ Left: +
+
+
+

Padding

+
+ Top: +
+
+ Right: +
+
+ Bottom: +
+
+ Left: +
+
+
+

Border-Radius

+
+ Top-Left: +
+
+ Top-Right: +
+
+ Bottom-Right: +
+
+ Bottom-Left: +
+
+

Note: All values above are measured in px

+
+
+

OUTPUT:

+
+
+ +
+ +
+

Made by Dolly Kumari

+
+
+ + + + + diff --git a/Button_CSS_Generator/script.js b/Button_CSS_Generator/script.js new file mode 100644 index 00000000..0dfb4374 --- /dev/null +++ b/Button_CSS_Generator/script.js @@ -0,0 +1,249 @@ +// output button +var OutputBtn = document.querySelector("#btn"); + +//INPUT FIELDS + +// colors +var bgColor = document.querySelector("#BGCOLOR"); +var fColor = document.querySelector("#FCOLOR"); +var brColor = document.querySelector("#BRCOLOR"); + +//size +var brSize = document.querySelector("#BRSIZE"); +var fSize = document.querySelector("#FSIZE"); + +//border-style +var BorderStyle = document.getElementsByName("borderStyle"); +// var radios = document.querySelectorAll() + +//margin +var tMargin = document.querySelector("#TMARGIN"); +var rMargin = document.querySelector("#RMARGIN"); +var bMargin = document.querySelector("#BMARGIN"); +var lMargin = document.querySelector("#LMARGIN"); + +//padding +var tPadding = document.querySelector("#TPADDING"); +var rPadding = document.querySelector("#RPADDING"); +var bPadding = document.querySelector("#BPADDING"); +var lPadding = document.querySelector("#LPADDING"); + +//borderRadius +var tlRadius = document.querySelector("#TLRADIUS"); +var trRadius = document.querySelector("#TRRADIUS"); +var brRadius = document.querySelector("#BRRADIUS"); +var blRadius = document.querySelector("#BLRADIUS"); + +var copyBtn = document.querySelector(".copyToClipboard"); + +var valObj = { + bgColor: "#2d63c8", + fColor: "#ffffff", + brColor: "#2d63c8", + brSize: "1", + fSize: "25", + BorderStyle: "solid", + tMargin: "0", + rMargin: "0", + bMargin: "0", + lMargin: "0", + tPadding: "15", + rPadding: "40", + bPadding: "15", + lPadding: "40", + tlRadius: "0", + trRadius: "0", + brRadius: "0", + blRadius: "0", +}; + +bgColor.addEventListener("change", function () { + valObj.bgColor = bgColor.value; + updateBtn(); + updateText(); +}); +fColor.addEventListener("change", function () { + valObj.fColor = fColor.value; + updateBtn(); + updateText(); +}); +brColor.addEventListener("change", function () { + valObj.brColor = brColor.value; + updateBtn(); + updateText(); +}); +brSize.addEventListener("change", function () { + valObj.brSize = brSize.value; + updateBtn(); + updateText(); +}); +fSize.addEventListener("change", function () { + valObj.fSize = fSize.value; + updateBtn(); + updateText(); +}); +setInterval(() => { + for (i = 0; i < BorderStyle.length; i++) { + if (BorderStyle[i].checked) { + // console.log("hii"); + valObj.BorderStyle = BorderStyle[i].value; + updateBtn(); + updateText(); + } + } +}, 500); +tMargin.addEventListener("change", function () { + valObj.tMargin = tMargin.value; + updateBtn(); + updateText(); +}); +rMargin.addEventListener("change", function () { + valObj.rMargin = rMargin.value; + updateBtn(); + updateText(); +}); +bMargin.addEventListener("change", function () { + valObj.bMargin = bMargin.value; + updateBtn(); + updateText(); +}); +lMargin.addEventListener("change", function () { + valObj.lMargin = lMargin.value; + updateBtn(); + updateText(); +}); +tPadding.addEventListener("change", function () { + valObj.tPadding = tPadding.value; + updateBtn(); + updateText(); +}); +rPadding.addEventListener("change", function () { + valObj.rPadding = rPadding.value; + updateBtn(); + updateText(); +}); +bPadding.addEventListener("change", function () { + valObj.bPadding = bPadding.value; + updateBtn(); + updateText(); +}); +lPadding.addEventListener("change", function () { + valObj.lPadding = lPadding.value; + updateBtn(); + updateText(); +}); +tlRadius.addEventListener("change", function () { + valObj.tlRadius = tlRadius.value; + updateBtn(); + updateText(); +}); +trRadius.addEventListener("change", function () { + valObj.trRadius = trRadius.value; + updateBtn(); + updateText(); +}); +brRadius.addEventListener("change", function () { + valObj.brRadius = brRadius.value; + updateBtn(); + updateText(); +}); +blRadius.addEventListener("change", function () { + valObj.blRadius = blRadius.value; + updateBtn(); + updateText(); +}); + +// OutputBtn.addEventListener("click", function () { +// console.log(valObj); +// showChange(); +// }); + +function showChange() { + OutputBtn.style.background = "red"; + OutputBtn.style.color = "white"; +} + +window.onload = function () { + //inputs default set + bgColor.value = valObj.bgColor; + fColor.value = valObj.fColor; + brColor.value = valObj.brColor; + brSize.value = valObj.brSize; + fSize.value = valObj.fSize; + BorderStyle.value = valObj.BorderStyle; + tMargin.value = valObj.tMargin; + rMargin.value = valObj.rMargin; + bMargin.value = valObj.bMargin; + lMargin.value = valObj.lMargin; + tPadding.value = valObj.tPadding; + rPadding.value = valObj.rPadding; + bPadding.value = valObj.bPadding; + lPadding.value = valObj.lPadding; + tlRadius.value = valObj.tlRadius; + trRadius.value = valObj.trRadius; + brRadius.value = valObj.brRadius; + blRadius.value = valObj.blRadius; + + //button default set + updateBtn(); + updateText(); +}; + +var text = ""; + +function updateText() { + text = ` +background-color: ${valObj.bgColor}; +color: ${valObj.fColor}; +border-color: ${valObj.brColor}; +border-width: ${valObj.brSize + "px"}; +font-size: ${valObj.fSize + "px"}; +border-style: ${valObj.BorderStyle}; +margin-top: ${valObj.tMargin + "px"}; +margin-right: ${valObj.rMargin + "px"}; +margin-bottom: ${valObj.bMargin + "px"}; +margin-left: ${valObj.lMargin + "px"}; +padding-top: ${valObj.tPadding + "px"}; +padding-right: ${valObj.rPadding + "px"}; +padding-bottom: ${valObj.bPadding + "px"}; +padding-left: ${valObj.lPadding + "px"}; +border-top-left-radius: ${valObj.tlRadius + "px"}; +border-top-right-radius: ${valObj.trRadius + "px"}; +border-bottom-right-radius: ${valObj.brRadius + "px"}; +border-bottom-left-radius: ${valObj.blRadius + "px"}; +`; +} +//clipboard function +copyBtn.addEventListener("click", function () { + navigator.clipboard.writeText(text).then( + function () { + console.log("Async: Copying to clipboard was successful!"); + }, + function (err) { + console.error("Async: Could not copy text: ", err); + } + ); +}); + +// setting values to btn +function updateBtn() { + OutputBtn.style.background = valObj.bgColor; + OutputBtn.style.color = valObj.fColor; + OutputBtn.style.borderColor = valObj.brColor; + OutputBtn.style.borderWidth = valObj.brSize + "px"; + OutputBtn.style.fontSize = valObj.fSize + "px"; + OutputBtn.style.borderStyle = valObj.BorderStyle; + OutputBtn.style.marginTop = valObj.tMargin + "px"; + OutputBtn.style.marginRight = valObj.rMargin + "px"; + OutputBtn.style.marginBottom = valObj.bMargin + "px"; + OutputBtn.style.marginLeft = valObj.lMargin + "px"; + OutputBtn.style.paddingTop = valObj.tPadding + "px"; + OutputBtn.style.paddingRight = valObj.rPadding + "px"; + OutputBtn.style.paddingBottom = valObj.bPadding + "px"; + OutputBtn.style.paddingLeft = valObj.lPadding + "px"; + OutputBtn.style.borderTopLeftRadius = valObj.tlRadius + "px"; + OutputBtn.style.borderTopRightRadius = valObj.trRadius + "px"; + OutputBtn.style.borderBottomRightRadius = valObj.brRadius + "px"; + OutputBtn.style.borderBottomLeftRadius = valObj.blRadius + "px"; +} + diff --git a/Button_CSS_Generator/style.css b/Button_CSS_Generator/style.css new file mode 100644 index 00000000..43ac802a --- /dev/null +++ b/Button_CSS_Generator/style.css @@ -0,0 +1,155 @@ +@import url("https://fonts.googleapis.com/css2?family=Righteous&family=Roboto+Mono:wght@300&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + height: 100vh; + background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); + background-size: 400% 400%; + animation: gradient 15s ease infinite; +} +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} +.parent { + height: 90%; + width: 80%; + background: #e3e3e3b1; + backdrop-filter: blur(1px); + border-radius: 2rem; + display: grid; + grid-template-columns: repeat(2, 1fr); + padding: 2rem; + font-family: "Roboto Mono", monospace; +} +.parent .outputArea { + padding-left: 1rem; + border-left: 1px solid rgb(114, 114, 114); +} +.parent h2 { + font-family: "Righteous", cursive; + letter-spacing: 0.2rem; +} +.parent .display { + background: #f3f3f3; + border-radius: 1rem; + padding: 1rem; + margin: 1rem 0; + height: 85%; + width: 100%; + display: flex; + position: relative; + flex-direction: row; + justify-content: center; + align-items: center; + overflow: auto; +} +.parent .controlArea { + padding-right: 1rem; + font-weight: 300; +} +.colorControl, +.sizeControl { + margin: 1.5rem 0; + padding: 0.5rem; + padding-top: 1rem; + border: 1px solid grey; + border-radius: 0.5rem; + position: relative; + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 1rem; +} +.CS { + display: flex; + flex-direction: row; + justify-content: center; + /* border-right: 1px solid black; */ + /* padding: 0 0.5rem; */ + /* background: rgb(236, 236, 236); */ +} +.CS span { + line-height: 25px; +} +input { + background-color: #fff; + border-color: #dbdbdb; + border-radius: 4px; + color: #363636; +} +.colorSwatch { + padding: 0.2rem; +} +.sectionHeading { + position: absolute; + top: -1rem; + left: 0.5rem; + /* background: #e3e3e3; */ + background: linear-gradient(-45deg, #e7b7b7, #e5b0c5, #a9d1df, #a9dfd2); + background-size: 400% 400%; + animation: gradient 15s ease infinite; + width: fit-content; + padding: 0 0.5rem; +} +.sizePad { + outline: none; +} +.bsParent .CS { + display: flex; + flex-direction: row; + justify-content: start; + column-gap: 1rem; + text-transform: capitalize; +} +.marginParent { + grid-template-columns: repeat(4, 1fr); +} +.marginParent .CS input.sizePad { + width: 5rem; +} +.bRadParent { + grid-template-columns: repeat(2, 1fr); + column-gap: 3rem; + row-gap: 0.5rem; +} +.bRadParent .CS { + display: grid; + grid-template-columns: repeat(2, 1fr); + /* column-gap: 4rem; */ +} +.bRadParent .CS input.sizePad { + width: 5rem; +} +.copyToClipboard { + position: absolute; + top: 1rem; + right: 1rem; + height: 3rem; + width: 3rem; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 50%; + padding: 0.5rem; + transition: 0.5s ease; + cursor: pointer; +} +.copyToClipboard:hover { + background: rgb(195, 195, 195); +}