CSS JavaScript <link> <script> HTML
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Cycle Tracker</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Period tracker</h1>
<form>
<fieldset>
<legend>Enter your period start and end date</legend>
<p>
<label for="start-date">Start date</label>
<input type="date" id="start-date" required />
</p>
<p>
<label for="end-date">End date</label>
<input type="date" id="end-date" required />
</p>
</fieldset>
<p>
<button type="submit">Add Period</button>
</p>
</form>
<section id="past-periods"></section>
<script src="app.js" defer></script>
</body>
</html>
HTMLindex.html
HTML
index.html HTML style.css CSS JavaScript app.js
HTML doctype
<!doctype html>
<!doctype html>
<html lang="en-US">
<!-- <head> <body> -->
</html>
head
<head> <title>
<head> <head> 2 viewport <meta>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
"Cycle Tracker" <title> <head> <title> <title>
<title>Cycle Tracker</title>
2 <meta> <title> HTML <head> 3
<head> style.css HTML <link>
<link rel="stylesheet" href="style.css" />
HTML <link> rel 25 rel="stylesheet"
<body>
<h1>Period tracker</h1>
<form></form>
</body>
<form> <fieldset> <legend>
<form>
<fieldset>
<legend>Enter your period start and end date</legend>
</fieldset>
</form>
<label> <input> id <label> for <input>
<label for="start-date">Start date</label>
<input type="date" id="start-date" required />
<fieldset> 2 <p> <label> <button> "Add period" type="submit" submit <button>
<form>
<fieldset>
<legend>Enter your period start and end date</legend>
<p>
<label for="start-date">Start date</label>
<input type="date" id="start-date" required />
</p>
<p>
<label for="end-date">End date</label>
<input type="date" id="end-date" required />
</p>
</fieldset>
<p>
<button type="submit">Add Period</button>
</p>
</form>
<section> JavaScript
<section id="past-periods"></section>
JavaScript
CSS <section> <h2>
<section id="past-periods">
<h2>Past periods</h2>
<ul>
<li>From 01/01/2024 to 01/06/2024</li>
<li>From 01/29/2024 to 02/04/2024</li>
</ul>
</section>
<section id="past-periods"></section> CSS
JavaScript
</body> JavaScript app.js defer JavaScript HTML
<script src="app.js" defer></script>
app.js <button>
CSS
CSS HTML CSS
body {
margin: 1vh 1vw;
background-color: #efe;
}
ul,
fieldset,
legend {
border: 1px solid;
background-color: #fff;
}
ul {
padding: 0;
font-family: monospace;
}
li,
legend {
list-style-type: none;
padding: 0.2em 0.5em;
background-color: #cfc;
}
li:nth-of-type(even) {
background-color: inherit;
}
CSS CSS style.css HTML CSS CSS
![[22]](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/HTML_and_CSS/html.jpg){kind=link}
CSS
background-color body (#efe) (#fff) border background-color (#cfc)
:nth-of-type(even) #fff
body {
background-color: #efe;
}
ul,
fieldset,
legend {
border: 1px solid;
background-color: #fff;
}
li,
legend {
background-color: #cfc;
}
li:nth-of-type(even) {
background-color: inherit;
}
ul padding: 0 list-style-type: none
ul {
padding: 0;
}
li {
list-style-type: none;
}
body margin vw vh li legend ul monospace
body {
margin: 1vh 1vw;
}
ul {
font-family: monospace;
}
li,
legend {
padding: 0.2em 0.5em;
}
li legend legend list-style-type
body {
margin: 1vh 1vw;
background-color: #efe;
}
ul,
fieldset,
legend {
border: 1px solid;
background-color: #fff;
}
ul {
padding: 0;
font-family: monospace;
}
li,
legend {
list-style-type: none;
padding: 0.2em 0.5em;
background-color: #cfc;
}
li:nth-of-type(even) {
background-color: inherit;
}
CSS CSS style.css index.html
PWA HTML CSS
<section id="past-periods">
<!--
<h2>Past periods</h2>
<ul>
<li>From 01/01/2024 to 01/06/2024</li>
<li>From 01/29/2024 to 02/04/2024</li>
</ul>
-->
</section>