diff --git a/33-pricing-component-with-toggle/design/desktop-design.jpg b/33-pricing-component-with-toggle/design/desktop-design.jpg new file mode 100644 index 0000000..831075a Binary files /dev/null and b/33-pricing-component-with-toggle/design/desktop-design.jpg differ diff --git a/33-pricing-component-with-toggle/index.html b/33-pricing-component-with-toggle/index.html new file mode 100644 index 0000000..439d675 --- /dev/null +++ b/33-pricing-component-with-toggle/index.html @@ -0,0 +1,44 @@ + + + + + + Pricing Component + + + +
+
+ Monthly + + Yearly +
+ +
+
+

Basic Plan

+

Rs10/month

+

Features: Feature 1, Feature 2, Feature 3

+ +
+
+

Pro Plan

+

Rs20/month

+

Features: Feature A, Feature B, Feature C

+ +
+
+

Premium Plan

+

Rs30/month

+

Features: Feature X, Feature Y, Feature Z

+ +
+
+
+ + + + diff --git a/33-pricing-component-with-toggle/script.js b/33-pricing-component-with-toggle/script.js new file mode 100644 index 0000000..5a0d672 --- /dev/null +++ b/33-pricing-component-with-toggle/script.js @@ -0,0 +1,16 @@ +document.getElementById('toggleSwitch').addEventListener('change', function() { + const isYearly = this.checked; + const pricingPlans = document.querySelectorAll('.pricing-plan'); + + pricingPlans.forEach(plan => { + const priceElement = plan.querySelector('.price'); + const monthlyPrice = priceElement.getAttribute('data-monthly'); + const yearlyPrice = priceElement.getAttribute('data-yearly'); + + if (isYearly) { + priceElement.textContent = `Rs${yearlyPrice}/year`; + } else { + priceElement.textContent = `Rs${monthlyPrice}/month`; + } + }); +}); diff --git a/33-pricing-component-with-toggle/style.css b/33-pricing-component-with-toggle/style.css new file mode 100644 index 0000000..fdaf4cf --- /dev/null +++ b/33-pricing-component-with-toggle/style.css @@ -0,0 +1,97 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + display: flex; + justify-content: space-around; + + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.pricing-container { + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; +} + +.toggle { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; +} + +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; + margin: 0 10px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + border-radius: 34px; + transition: .4s; +} + +.slider:before { + + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + border-radius: 50%; + transition: .4s; +} + +input:checked + .slider { + background-color: #2196F3; +} + +input:checked + .slider:before { + transform: translateX(26px); +} + +.pricing-options { + display: flex; + gap: 9vh; + justify-content: space-around; +} + +.pricing-plan { + background: #e0f7fa; + border-radius: 10px; + padding: 20px; + width: 200px; +} + +.price { + font-size: 24px; + font-weight: bold; +} +button +{ + background: #0f8dbf; + color: white; + height: 4vh; +} \ No newline at end of file diff --git a/34-calendar/design/desktop-design.jpg b/34-calendar/design/desktop-design.jpg new file mode 100644 index 0000000..f806536 Binary files /dev/null and b/34-calendar/design/desktop-design.jpg differ diff --git a/34-calendar/index.html b/34-calendar/index.html new file mode 100644 index 0000000..31dfb3a --- /dev/null +++ b/34-calendar/index.html @@ -0,0 +1,66 @@ + + + + + + Simple Calendar + + + +
+
+

November 2024

+
+ + +
+
+
+
Sun
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
+
+
+
+ + diff --git a/34-calendar/style.css b/34-calendar/style.css new file mode 100644 index 0000000..43f208b --- /dev/null +++ b/34-calendar/style.css @@ -0,0 +1,76 @@ +body { + font-family: Arial, sans-serif; + background-color: #f0f0f0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.calendar { + background: white; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); + width: 350px; +} + +header { + padding: 15px; + background: #007bff; + color: white; + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} + +h2 { + margin: 0; + font-size: 1.5rem; +} + +.navigation { + display: flex; + justify-content: space-between; +} + +.navigation button { + background: none; + border: none; + color: white; + font-size: 1.5rem; + cursor: pointer; +} + +.days-of-week { + display: grid; + grid-template-columns: repeat(7, 1fr); + background: #f7f7f7; + padding: 10px 0; + font-weight: bold; +} + +.days-of-week div { + padding: 10px; + text-align: center; +} + +.days { + display: grid; + grid-template-columns: repeat(7, 1fr); +} + +.day { + padding: 15px; + border: 1px solid #ddd; + box-sizing: border-box; + text-align: center; +} + +.day.empty { + background: #f9f9f9; +} + +.day:hover { + background: #e9e9e9; + cursor: pointer; +} diff --git a/script.js b/script.js index f637209..7af4a22 100644 --- a/script.js +++ b/script.js @@ -32,7 +32,12 @@ const projects = [ { name: "28-Zomato-clone", tags: ["HTML", "CSS", "JavaScript"] }, { name: "29-to-do-list", tags: ["HTML", "CSS", "JavaScript"] }, { name: "30-currency-converter", tags: ["HTML", "CSS", "JavaScript"] }, - { name: "31-tic-tac-toe", tags: ["HTML", "CSS", "JavaScript"] } + { name: "31-tic-tac-toe", tags: ["HTML", "CSS", "JavaScript"] }, + { name: "32-calculator-application", tags: ["HTML", "CSS", "JavaScript"] }, + { name: "33-pricing-component-with-toggle", tags: ["HTML", "CSS", "JavaScript"] }, + { name: "34-calendar", tags: ["HTML", "CSS"] } + + ];