diff --git a/Projects/1-Beginner/Bin2Dec b/Projects/1-Beginner/Bin2Dec new file mode 160000 index 00000000..7c088ea5 --- /dev/null +++ b/Projects/1-Beginner/Bin2Dec @@ -0,0 +1 @@ +Subproject commit 7c088ea5ca9cf9647c9e857e1ceb2ff3b6d649b8 diff --git a/Projects/1-Beginner/Border-radius-Previewer/README.md b/Projects/1-Beginner/Border-radius-Previewer/README.md new file mode 100644 index 00000000..e69de29b diff --git a/Projects/1-Beginner/Border-radius-Previewer/index.html b/Projects/1-Beginner/Border-radius-Previewer/index.html new file mode 100644 index 00000000..49739c7d --- /dev/null +++ b/Projects/1-Beginner/Border-radius-Previewer/index.html @@ -0,0 +1,37 @@ + + + + + + + Dynamic Border Radius + + + + +
+

Border-radius Previewer

+ +
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+ + + + + \ No newline at end of file diff --git a/Projects/1-Beginner/Border-radius-Previewer/index.js b/Projects/1-Beginner/Border-radius-Previewer/index.js new file mode 100644 index 00000000..c804ad03 --- /dev/null +++ b/Projects/1-Beginner/Border-radius-Previewer/index.js @@ -0,0 +1,34 @@ +const previewBox = document.getElementById('previewBox'); +const topLeft = document.getElementById('topLeft'); +const topRight = document.getElementById('topRight'); +const bottomRight = document.getElementById('bottomRight'); +const bottomLeft = document.getElementById('bottomLeft'); +const cssCode = document.getElementById('cssCode'); +const copyBtn = document.getElementById('copyBtn'); + +function updateBorderRadius() { + const tl = topLeft.value + '%'; + const tr = topRight.value + '%'; + const br = bottomRight.value + '%'; + const bl = bottomLeft.value + '%'; + + const radius = `${tl} ${tr} ${br} ${bl}`; + previewBox.style.borderRadius = radius; + cssCode.value = `border-radius: ${radius};`; +} + +// Event listeners +[topLeft, topRight, bottomRight, bottomLeft].forEach(input => { + input.addEventListener('input', updateBorderRadius); +}); + +// Copy CSS to clipboard +copyBtn.addEventListener('click', () => { + cssCode.select(); + cssCode.setSelectionRange(0, 99999); + document.execCommand('copy'); + alert('CSS copied to clipboard!'); +}); + +// Initialize preview +updateBorderRadius(); diff --git a/Projects/1-Beginner/Border-radius-Previewer/style.css b/Projects/1-Beginner/Border-radius-Previewer/style.css new file mode 100644 index 00000000..f1f09818 --- /dev/null +++ b/Projects/1-Beginner/Border-radius-Previewer/style.css @@ -0,0 +1,82 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: #f4f4f4; +} + +h1 { + margin: 0; + padding: 0; +} + +.container { + background: white; + height: fit-content; + padding: 16px 32px; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + text-align: center; +} + +.controls { + display: flex; + font-size: 12px; +} + +.control_group { + flex: 1; + background-color: beige; + display: flex; + flex-direction: column; + align-items: center; +} + +label { + display: flex; + justify-content: space-between; + align-items: center; +} + +input[type="range"] { + -webkit-appearance: none; + width: 100px; + height: 5px; + background: #ddd; + outline: none; + border-radius: 5px; + margin: 10px 0; +} + +.preview-box { + width: 150px; + height: 150px; + background: #4CAF50; + margin: 20px auto; +} + +.css-output { + display: flex; + margin-top: 20px; +} + +#cssCode { + width: 80%; + padding: 5px; + font-family: monospace; + margin-right: 8px; +} + +#copyBtn { + background-color: black; + color: white; + outline: none; + border: none; +} + +#copyBtn:hover { + background-color: #45a049; + cursor: pointer; +} \ No newline at end of file