From 05a0314424246689895261030ac77491f69d2524 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Tue, 5 Dec 2023 10:25:34 +0100 Subject: [PATCH] fix(pwa): Typo in style.css resource name (#30794) --- .../tutorials/cycletracker/html_and_css/index.md | 4 ++-- .../cycletracker/javascript_functionality/index.md | 2 +- .../tutorials/cycletracker/service_workers/index.md | 10 +++++----- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md b/files/en-us/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md index 26b07b47b653d1b..8b54c4506aac93c 100644 --- a/files/en-us/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md +++ b/files/en-us/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md @@ -61,7 +61,7 @@ Copy this HTML and save it in a file called `index.html`. ## HTML content -Even if the HTML in `index.html` is familiar to you, we recommend reading through this section before adding some [temporary hard-coded data](#temporary-hard-coded-results-text), adding CSS to a [`styles.css`](#css-content) external stylesheet, and creating `app.js`, the [application's JavaScript](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality) that makes this web page function. +Even if the HTML in `index.html` is familiar to you, we recommend reading through this section before adding some [temporary hard-coded data](#temporary-hard-coded-results-text), adding CSS to a [`style.css`](#css-content) external stylesheet, and creating `app.js`, the [application's JavaScript](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality) that makes this web page function. The HTML's first line is a {{glossary("doctype")}} preamble, which ensures the content behaves correctly. @@ -101,7 +101,7 @@ While the title could be "Menstrual cycle tracking application", we opted for a While officially optional, for better user experience, these two `` tags and the `` are the three components of the `<head>` that should be considered required components of any HTML document. -For right now, the last component we include in the `<head>` is a {{HTMLelement("link")}} element linking `styles.css`, our yet-to-be-written stylesheet, to our HTML. +For right now, the last component we include in the `<head>` is a {{HTMLelement("link")}} element linking `style.css`, our yet-to-be-written stylesheet, to our HTML. ```html <link rel="stylesheet" href="style.css" /> diff --git a/files/en-us/web/progressive_web_apps/tutorials/cycletracker/javascript_functionality/index.md b/files/en-us/web/progressive_web_apps/tutorials/cycletracker/javascript_functionality/index.md index 7d63fa4cddede41..c2b8e2ba919a1ed 100644 --- a/files/en-us/web/progressive_web_apps/tutorials/cycletracker/javascript_functionality/index.md +++ b/files/en-us/web/progressive_web_apps/tutorials/cycletracker/javascript_functionality/index.md @@ -11,7 +11,7 @@ page-type: tutorial-chapter In the previous section, we wrote the HTML and CSS for CycleTracker, creating a static version of our web app. In this section, we will write the JavaScript required to convert static HTML into a fully functional web application. -If you haven't already done so, copy the [HTML](https://github.com/mdn/pwa-examples/tree/main/cycletracker/javascript_functionality/index.html) and [CSS](https://github.com/mdn/pwa-examples/tree/main/cycletracker/javascript_functionality/style.css) and save them to files called `index.html` and `styles.css`. +If you haven't already done so, copy the [HTML](https://github.com/mdn/pwa-examples/tree/main/cycletracker/javascript_functionality/index.html) and [CSS](https://github.com/mdn/pwa-examples/tree/main/cycletracker/javascript_functionality/style.css) and save them to files called `index.html` and `style.css`. The last line in the HTML file calls the `app.js` JavaScript file. This is the script we are creating in this section. In this lesson, we will be writing client-side JavaScript code to capture form submissions, locally store submitted data, and populate the past-periods section. diff --git a/files/en-us/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md b/files/en-us/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md index b8375e504755e1f..9ac446ff0d9197d 100644 --- a/files/en-us/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md +++ b/files/en-us/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md @@ -11,7 +11,7 @@ page-type: tutorial-chapter Thus far, we've written the HTML, CSS, and JavaScript for CycleTracker. We added a manifest file defining colors, icons, URL, and other app features. We have a working web app! But it isn't yet a PWA. In this section, we will write the JavaScript required to convert our fully functional web application into a PWA that can be distributed as a standalone app and works seamlessly offline. -If you haven't already done so, copy the [HTML](https://github.com/mdn/pwa-examples/tree/main/cycletracker/manifest_file/index.html), [CSS](https://github.com/mdn/pwa-examples/tree/main/cycletracker/manifest_file/style.css), [JavaScript](https://github.com/mdn/pwa-examples/tree/main/cycletracker/manifest_file/app.js), and [manifest](https://github.com/mdn/pwa-examples/tree/main/cycletracker/manifest_file/cycletracker.json) JSON file. Save them to files called `index.html`, `styles.css`, `app.js`, and `cycletracker.json`, respectively. +If you haven't already done so, copy the [HTML](https://github.com/mdn/pwa-examples/tree/main/cycletracker/manifest_file/index.html), [CSS](https://github.com/mdn/pwa-examples/tree/main/cycletracker/manifest_file/style.css), [JavaScript](https://github.com/mdn/pwa-examples/tree/main/cycletracker/manifest_file/app.js), and [manifest](https://github.com/mdn/pwa-examples/tree/main/cycletracker/manifest_file/cycletracker.json) JSON file. Save them to files called `index.html`, `style.css`, `app.js`, and `cycletracker.json`, respectively. In this section, we are creating `sw.js`, the service worker script, that will convert our Web App into a PWA. We already have one JavaScript file; the last line in the HTML file calls the `app.js`. This JavaScript provides all the functionality for the standard web application features. Instead of calling the `sw.js` file like we did the `app.js` file with the `src` attribute of {{HTMLElement("script")}}, we will create a relationship between the web app and its service worker by registering the service worker. @@ -61,7 +61,7 @@ For a good offline experience, the list of cached files should include all the r const APP_STATIC_RESOURCES = [ "/", "/index.html", - "/styles.css", + "/style.css", "/app.js", "/icon-512x512.png", ]; @@ -85,7 +85,7 @@ const VERSION = "v1"; const APP_STATIC_RESOURCES = [ "/", "/index.html", - "/styles.css", + "/style.css", "/app.js", "/cycletrack.json", "/icons/wheel.svg", @@ -132,7 +132,7 @@ self.addEventListener("install", (e) => { cache.addAll([ "/", "/index.html" - "/styles.css" + "/style.css" "/app.js" ]); })() @@ -242,7 +242,7 @@ const APP_STATIC_RESOURCES = [ "/", "/index.html", "/app.js", - "/styles.css", + "/style.css", "/icons/wheel.svg", ];