newsletter signup form

examples/README.md

@@ -7,24 +7,26 @@ Here you can find examples written using _bau_.
 [Frontend Mentor](https://frontendmentor.io) is an online platform that provides real-world front-end development challenges designed to help developers practice and improve their coding skills. It offers a wide range of project-based challenges, from beginner to advanced levels, that simulate real-world design-to-code scenarios.
 
 Below is a list of projects implemented using _Bau_.
-| Name | Live | Code |
+
+| Name                          | Live                                                                                 | Code                                    |
 | ----------------------------- | ------------------------------------------------------------------------------------ | --------------------------------------- |
-| Bento Grid | [live](https://grucloud.github.io/bau/frontendmentor/bento-grid/) | [code](./bento-grid) |
-| Blog Preview Card | [live](https://grucloud.github.io/bau/frontendmentor/blog-preview-card/) | [code](./blog-preview-card) |
-| Calculator | [live](https://grucloud.github.io/bau/frontendmentor/calculator/) | [code](./calculator) |
-| Contact Form | [live](https://grucloud.github.io/bau/frontendmentor/contact-form/) | [code](./contact-form) |
-| E-commerce Product Page | [live](https://grucloud.github.io/bau/frontendmentor/e-commerce-product-page/) | [code](./e-commerce-product-page) |
-| Faq Accordion | [live](https://grucloud.github.io/bau/frontendmentor/faq-accordion/) | [code](./faq-accordion) |
-| Interactive Comments Section | [live](https://grucloud.github.io/bau/frontendmentor/interactive-comments-section/) | [code](./interactive-comments-section) |
-| Interactive Rating Component | [live](https://grucloud.github.io/bau/frontendmentor/interactive-rating-component/) | [code](./interactive-rating-component) |
-| IP Address Tracker | [live](https://grucloud.github.io/bau/frontendmentor/ip-address-tracker/) | [code](./ip-address-tracker) |
-| Job Listing With Filtering | [live](https://grucloud.github.io/bau/frontendmentor/job-listings-with-filtering/) | [code](./job-listings-with-filtering) |
-| Launch Countdown Timer | [live](https://grucloud.github.io/bau/frontendmentor/launch-countdown-timer/) | [code](./launch-countdown-timer) |
+| Bento Grid                    | [live](https://grucloud.github.io/bau/frontendmentor/bento-grid/)                    | [code](./bento-grid)                    |
+| Blog Preview Card             | [live](https://grucloud.github.io/bau/frontendmentor/blog-preview-card/)             | [code](./blog-preview-card)             |
+| Calculator                    | [live](https://grucloud.github.io/bau/frontendmentor/calculator/)                    | [code](./calculator)                    |
+| Contact Form                  | [live](https://grucloud.github.io/bau/frontendmentor/contact-form/)                  | [code](./contact-form)                  |
+| E-commerce Product Page       | [live](https://grucloud.github.io/bau/frontendmentor/e-commerce-product-page/)       | [code](./e-commerce-product-page)       |
+| Faq Accordion                 | [live](https://grucloud.github.io/bau/frontendmentor/faq-accordion/)                 | [code](./faq-accordion)                 |
+| Interactive Comments Section  | [live](https://grucloud.github.io/bau/frontendmentor/interactive-comments-section/)  | [code](./interactive-comments-section)  |
+| Interactive Rating Component  | [live](https://grucloud.github.io/bau/frontendmentor/interactive-rating-component/)  | [code](./interactive-rating-component)  |
+| IP Address Tracker            | [live](https://grucloud.github.io/bau/frontendmentor/ip-address-tracker/)            | [code](./ip-address-tracker)            |
+| Job Listing With Filtering    | [live](https://grucloud.github.io/bau/frontendmentor/job-listings-with-filtering/)   | [code](./job-listings-with-filtering)   |
+| Launch Countdown Timer        | [live](https://grucloud.github.io/bau/frontendmentor/launch-countdown-timer/)        | [code](./launch-countdown-timer)        |
+| Newsletter Signup Form        | [live](https://grucloud.github.io/bau/frontendmentor/newsletter-signup-form/)        | [code](./newsletter-signup-form)        |
 | Mortgage Repayment Calculator | [live](https://grucloud.github.io/bau/frontendmentor/mortgage-repayment-calculator/) | [code](./mortgage-repayment-calculator) |
-| Multi Step Form | [live](https://grucloud.github.io/bau/frontendmentor/multi-step-form/) | [code](./multi-step-form) |
-| Product List Cart | [live](https://grucloud.github.io/bau/frontendmentor/product-list-cart/) | [code](./product-list-cart) |
-| Product Preview Card | [live](https://grucloud.github.io/bau/frontendmentor/product-preview-card/) | [code](./product-preview-card) |
-| Recipe Page | [live](https://grucloud.github.io/bau/frontendmentor/recipePage/) | [code](./recipePage) |
-| Rest Countries | [live](https://grucloud.github.io/bau/frontendmentor/rest-countries/) | [code](./rest-countries) |
-| Result Summary Component | [live](https://grucloud.github.io/bau/frontendmentor/result-summary-component/) | [code](./result-summary-component) |
-| Social Link Profile | [live](https://grucloud.github.io/bau/frontendmentor/social-link-profile/) | [code](./social-link-profile) |
+| Multi Step Form               | [live](https://grucloud.github.io/bau/frontendmentor/multi-step-form/)               | [code](./multi-step-form)               |
+| Product List Cart             | [live](https://grucloud.github.io/bau/frontendmentor/product-list-cart/)             | [code](./product-list-cart)             |
+| Product Preview Card          | [live](https://grucloud.github.io/bau/frontendmentor/product-preview-card/)          | [code](./product-preview-card)          |
+| Recipe Page                   | [live](https://grucloud.github.io/bau/frontendmentor/recipePage/)                    | [code](./recipePage)                    |
+| Rest Countries                | [live](https://grucloud.github.io/bau/frontendmentor/rest-countries/)                | [code](./rest-countries)                |
+| Result Summary Component      | [live](https://grucloud.github.io/bau/frontendmentor/result-summary-component/)      | [code](./result-summary-component)      |
+| Social Link Profile           | [live](https://grucloud.github.io/bau/frontendmentor/social-link-profile/)           | [code](./social-link-profile)           |

examples/newsletter-signup-form/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/newsletter-signup-form/.npmrc

@@ -0,0 +1,2 @@
+save-exact = true
+package-lock = false

examples/newsletter-signup-form/README.md

@@ -0,0 +1,23 @@
+# Frontend Mentor Newsletter Signup Form
+
+Here is the implementation in [Bau.js](https://github.com/grucloud/bau) of the [Frontend MentorNewsletter Signup Form code challenge](https://www.frontendmentor.io/challenges/newsletter-signup-form-with-success-message-3FC1AZbNrv/hub)
+
+## Workflow
+
+Install the dependencies:
+
+```sh
+npm install
+```
+
+Start a development server:
+
+```sh
+npm run dev
+```
+
+Build a production version:
+
+```sh
+npm run build
+```

examples/newsletter-signup-form/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/png"
+      href="./assets/images/favicon-32x32.png"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Newsletter Signup Form | FrontendMentor</title>
+    <style id="bau-css"></style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

examples/newsletter-signup-form/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "frontendmentor-newsletter-signup-form",
+  "homepage": "https://grucloud.github.io/bau/frontendmentor/newsletter-signup-form/",
+  "private": true,
+  "version": "0.95.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "deploy": "gh-pages -d ../../dist"
+  },
+  "devDependencies": {
+    "gh-pages": "6.1.1",
+    "typescript": "^5.0.2",
+    "vite": "^5.2.11"
+  },
+  "dependencies": {
+    "@grucloud/bau": "^0.95.0",
+    "@grucloud/bau-css": "^0.95.0",
+    "@grucloud/bau-ui": "^0.95.0"
+  }
+}