diff --git a/30DaysOfJavaScript/assets/40.png b/30DaysOfJavaScript/assets/40.png new file mode 100644 index 00000000..5f4076dd Binary files /dev/null and b/30DaysOfJavaScript/assets/40.png differ diff --git a/40 - Gradient Generator/assests/grad.png b/40 - Gradient Generator/assests/grad.png new file mode 100644 index 00000000..530ba00d Binary files /dev/null and b/40 - Gradient Generator/assests/grad.png differ diff --git a/40 - Gradient Generator/font/sans.ttf b/40 - Gradient Generator/font/sans.ttf new file mode 100644 index 00000000..85860e6c Binary files /dev/null and b/40 - Gradient Generator/font/sans.ttf differ diff --git a/40 - Gradient Generator/index.html b/40 - Gradient Generator/index.html new file mode 100644 index 00000000..3030ff14 --- /dev/null +++ b/40 - Gradient Generator/index.html @@ -0,0 +1,83 @@ + + + + + + + + + Gradient Generator + + + + +
+

Gradient Generator

+
+ + +
+
+ + + + + + + + +
+
+ +
+
+ + +
+
+ + + + + diff --git a/40 - Gradient Generator/script.js b/40 - Gradient Generator/script.js new file mode 100644 index 00000000..9abe6cf5 --- /dev/null +++ b/40 - Gradient Generator/script.js @@ -0,0 +1,20 @@ +let colorOne = document.getElementById('color_one'); +let colorTwo = document.getElementById('color_two'); +let currentdir = "to top"; +let outputcode = document.getElementById('code'); + +function setdirection(value,_this){ + let direction = document.querySelectorAll('.buttons button'); + direction.forEach(e => { + e.classList.remove('active'); + }); + _this.classList.add('active'); + currentdir = value; +} +function generate(){ + outputcode.value = `background-image: linear-gradient(${currentdir}, ${colorOne.value}, ${colorTwo.value});`; + document.getElementById('body').style.backgroundImage = `linear-gradient(${currentdir}, ${colorOne.value}, ${colorTwo.value})`; +} +function copy(e){ + e.clipboardData.setData("text/plain", outputcode); +} \ No newline at end of file diff --git a/40 - Gradient Generator/style.css b/40 - Gradient Generator/style.css new file mode 100644 index 00000000..c5a74da4 --- /dev/null +++ b/40 - Gradient Generator/style.css @@ -0,0 +1,166 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "sans"; +} + +@font-face { + font-family: "sans"; + src: url(font/sans.ttf); +} + +body { + background-color: #19172e; + background-repeat: no-repeat; + background-size: cover; + width: 100vw; + overflow-x: hidden; + height: 100%; + min-height: 100vh; +} + +.container { + width: 40%; + height: 500px; + margin: 3rem auto; + text-align: center; + background: rgba(255, 255, 255, 0.05); + box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1); + border-radius: 20px; + backdrop-filter: blur(20px); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative +} +.container h1{ + position: absolute; + top: 5px; + color: white; + font-weight: 400; +} +.selectcolrs{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; + height: fit-content; + justify-content: center; + align-items: center; + padding: 20px 0; +} +.selectcolrs input{ + width: 30%; + height: 45px; + margin: 0 5px; + outline: none; + border: none; + -webkit-appearance: none; + background-color: transparent; + cursor: pointer; +} +.selectcolrs input[type="color"]::-webkit-color-swatch{ + border-radius: 10px; + border: none; +} +.buttons{ + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 95%; + padding: 5px 0; + height: fit-content; +} +.buttons button{ + outline: none; + border: none; + width: 30px; + height: 30px; + border-radius: 5px; + margin: 4px; + transition: all 200ms ease; + cursor: pointer; +} +.active{ + background-color: rgb(52, 147, 255); +} +#submit{ + width: 100px; + height: 35px; + outline: none; + border: none; + margin: 20px 0; + font-size: 18px; + border-radius: 3px; + background-color: white; + cursor: pointer; + transition: all 300ms ease; +} +#submit:hover{ + background-color: rgb(253, 207, 78); +} +#submit:active{ + background-color: #1e8e3e; +} +.output{ + width: 100%; + height: fit-content; + padding: 5px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.output textarea{ + width: 90%; + height: 60px; + outline: none; + border: none; + font-size: 16px; + border-radius: 4px; +} +.output button{ + width: 100px; + height: 35px; + outline: none; + border: none; + margin: 20px 0; + font-size: 18px; + border-radius: 3px; + background-color: white; + cursor: pointer; + transition: all 300ms ease; +} +.output button:hover{ + background-color: rgb(253, 207, 78); +} +.output button:active{ + background-color: #1e8e3e; +} + + +footer { + color: white; + position: absolute; + text-align: center; + font-size: 1rem; + left: 0; + right: 0; + bottom: 0; + padding: 5px; + line-height: 3vh; +} + +footer a:visited { + color: inherit; +} + + +@media (max-width: 800px){ + .container{ + width: 80%; + } +} \ No newline at end of file diff --git a/index.html b/index.html index c96c3db5..291139e9 100644 --- a/index.html +++ b/index.html @@ -271,22 +271,22 @@

Snake Game

Snake Game - -
- -

Snake Game

- Snake Game - -

Age Calculator

Age Calculator
+
+ +

Gradient Generator

+ Gradient Generator + +
+ - \ No newline at end of file +