Compare commits
6
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Tirsvad
|
c6801955a6 | ||
|
Tirsvad
|
8776b30df3 | ||
|
Tirsvad
|
baf05cb62b | ||
|
Tirsvad
|
f161859225 | ||
|
Tirsvad
|
5fe4ef0367 | ||
|
Tirsvad
|
83b07742a8 |
@@ -17,3 +17,6 @@ tmp/
|
||||
|
||||
# AI prompt log (public repository)
|
||||
/docs/ai-prompts/
|
||||
|
||||
# Local preview configuration (a throwaway static server for screenshots)
|
||||
/.claude/launch.json
|
||||
|
||||
@@ -1,2 +1,102 @@
|
||||
# 041-web-movie-ranking
|
||||
# 🚀 041 Web Movie Ranking
|
||||
|
||||
My solution to Day 41 of Udemy's "100 Days of Code: The Complete Python Pro Bootcamp": a plain HTML page that ranks my top 3 movies of all time. It is for fellow course participants and for anyone who browses the repository for ideas.
|
||||
|
||||
![The Best Movies According to Tirsvad][screenshot]
|
||||
|
||||
## 📚 Table of Contents
|
||||
|
||||
- [Overview](#-overview)
|
||||
- [Requirements](#-requirements)
|
||||
- [Setup](#-setup)
|
||||
- [Run](#-run)
|
||||
- [Tests](#-tests)
|
||||
- [License](#-license)
|
||||
- [Links](#-links)
|
||||
- [Appendix: Project documents](#-appendix-project-documents)
|
||||
|
||||
## 🧭 Overview
|
||||
|
||||
"The Favorite Movie Project" asks for a web page with a title (`h1`), a subtitle (`h2`), a horizontal rule (`hr`), and at least three movies, each as an `h3` followed by a `p` that says why it is a favourite. This page has the title "The Best Movies According to Tirsvad" and ranks 13 element, 5th element and Drive.
|
||||
|
||||
The repository holds only HTML and CSS, with no dependencies:
|
||||
|
||||
- `src/index.html`: the page.
|
||||
- `src/styles.css`: the typography and spacing.
|
||||
- `tests/manual-checklist.md`: the checks that prove the page structure.
|
||||
- `docs/`: the project documents and the wiki (English, Danish and Bahasa Malaysia).
|
||||
|
||||
## 📋 Requirements
|
||||
|
||||
A web browser. Nothing else is needed: there is no build step, no package to install and no server.
|
||||
|
||||
## 🛠️ Setup
|
||||
|
||||
Clone the repository:
|
||||
|
||||
```bash
|
||||
git clone https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking.git
|
||||
cd 041-web-movie-ranking
|
||||
```
|
||||
|
||||
## ▶️ Run
|
||||
|
||||
Open `src/index.html` in a browser by double-clicking it, or from a terminal:
|
||||
|
||||
```bash
|
||||
# Windows
|
||||
start src/index.html
|
||||
# macOS
|
||||
open src/index.html
|
||||
# Linux
|
||||
xdg-open src/index.html
|
||||
```
|
||||
|
||||
## 🧪 Tests
|
||||
|
||||
The tests are a manual checklist, because the whole product is one static page. Open `src/index.html`, then go through the items of [`tests/manual-checklist.md`](./tests/manual-checklist.md) (one `h1`, one `h2`, one `hr`, three `h3` each followed by a `p`, no external request, and a narrow window without sideways scroll).
|
||||
|
||||
## 📄 License
|
||||
|
||||
[GNU Affero General Public License v3.0][license].
|
||||
|
||||
## 🔗 Links
|
||||
|
||||
- [Repository][repository]
|
||||
- [Documentation][documentation]
|
||||
- [Issue tracker][issues]
|
||||
|
||||
## 📎 Appendix: Project documents
|
||||
|
||||
The documents a newcomer needs, in reading order.
|
||||
|
||||
| Document | What it tells you |
|
||||
| --- | --- |
|
||||
| [AGENTS.md][agents] | The rules AI agents follow in this repository |
|
||||
| [Business Case][BC-001] | Why the project exists, its scope and success criteria |
|
||||
| [Stakeholder Analysis][SA-001] | Who is involved; the stakeholder IDs used for owners and reviewers |
|
||||
| [Project Plan][PP-001] | The gateways and their schedule |
|
||||
| [Milestones][milestones] | One document per gateway: Go/No-Go criteria and tasks |
|
||||
| [Artifact registry][registry] | Where each artifact type lives, the next version, the PO language and domain |
|
||||
| [Traceability matrix][TM-001] | How the artifacts link and when each was last reviewed |
|
||||
| [Framework README][framework-readme] | The framework this project uses |
|
||||
| [Framework changelog][framework-changelog] | What changed in each framework release |
|
||||
|
||||
The workflows installed from `TirSystem/github-action` need these secrets in the organisation: `TOKEN_FOR_GITEA` (publish accepted milestones) and `TOKEN_FOR_GITEA_WIKI` (publish the wiki, which must be enabled in the repository settings).
|
||||
|
||||
---
|
||||
|
||||
[screenshot]: ./docs/images/favorite-movie-page.jpg
|
||||
[license]: ./LICENSE
|
||||
[repository]: https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking
|
||||
[documentation]: https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking/wiki
|
||||
[issues]: https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking/issues
|
||||
[agents]: ./AGENTS.md
|
||||
[BC-001]: ./docs/business-case.md
|
||||
[SA-001]: ./docs/stakeholder-analysis.md
|
||||
[PP-001]: ./docs/project-plan.md
|
||||
[milestones]: ./docs/milestones/
|
||||
[registry]: ./docs/artifact-registry.md
|
||||
[TM-001]: ./docs/sqa/traceability-matrix.md
|
||||
[framework-readme]: ./framework/README.md
|
||||
[framework-changelog]: ./framework/CHANGELOG.md
|
||||
|
||||
@@ -15,7 +15,7 @@ document of a type. `Primary File` may contain a glob (e.g.
|
||||
| SA | Stakeholder Analysis | docs/stakeholder-analysis.md | 002 |
|
||||
| PP | Project Plan | docs/project-plan.md | 002 |
|
||||
| MIL | Milestone / Gateway | docs/milestones/mil-*.md | 004 |
|
||||
| RC | Review Record | docs/sqa/reviews/rc-*.md | 006 |
|
||||
| RC | Review Record | docs/sqa/reviews/rc-*.md | 007 |
|
||||
| TM | Traceability Matrix | docs/sqa/traceability-matrix.md | 002 |
|
||||
|
||||
## Languages
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -31,9 +31,9 @@ This plan schedules the three gateways of the HTML-only Favorite Movie project o
|
||||
|
||||
| Gateway | Document | Window | Decision date | Owner | Stories | Main deliverable | Milestone |
|
||||
| --- | --- | --- | --- | --- | --- | --- | --- |
|
||||
| Foundation | [MIL-001] | 2026-10-24 to 2026-10-25 | 2026-10-25 | S01 | none | Folder skeleton, workflows, repository metadata | |
|
||||
| Movie page | [MIL-002] | 2026-10-25 to 2026-10-26 | 2026-10-26 | S01 | none | index.html, styles.css, manual checklist | |
|
||||
| Documentation | [MIL-003] | 2026-10-26 to 2026-10-27 | 2026-10-27 | S01 | none | README, screenshots, wiki in en, da, ms | |
|
||||
| Foundation | [MIL-001] | 2026-10-24 to 2026-10-25 | 2026-10-25 | S01 | none | Folder skeleton, workflows, repository metadata | [Foundation](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking/milestones/247) |
|
||||
| Movie page | [MIL-002] | 2026-10-25 to 2026-10-26 | 2026-10-26 | S01 | none | index.html, styles.css, manual checklist | [Movie page](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking/milestones/248) |
|
||||
| Documentation | [MIL-003] | 2026-10-26 to 2026-10-27 | 2026-10-27 | S01 | none | README, screenshots, wiki in en, da, ms | [Documentation](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking/milestones/249) |
|
||||
|
||||
```plantuml
|
||||
@startgantt
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
# SQA Review Record
|
||||
|
||||
## Metadata
|
||||
| Key | Value |
|
||||
| --- | --- |
|
||||
| ID | RC-006 |
|
||||
| CrossReference | [MIL-002] |
|
||||
|
||||
## Version History
|
||||
| Date | Status | Author | Reviewer | Change | Commit |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| 2026-10-24 | Accepted | Jens Tirsvad Nielsen | AI as stand-in for S01 | Initial version | [5fe4ef0] |
|
||||
|
||||
---
|
||||
|
||||
## Artifact Under Review
|
||||
|
||||
- Instance reviewed: [MIL-002] deliverable: `src/index.html`, `src/styles.css`, `tests/manual-checklist.md`
|
||||
- Checklist used: the Go / No-Go criteria of [MIL-002]. No QC checklist exists for HTML source in the framework (`framework/qc/code/` has none), so the milestone criteria stand in as the checklist.
|
||||
- Scope: full review
|
||||
- Language and domain: n/a (a deliverable, not a document of a PO-language type)
|
||||
- Language reviewer: none
|
||||
- Mode: autonomous, not independent (the reviewer is `AI as stand-in for S01`)
|
||||
|
||||
## Checklist Results
|
||||
|
||||
| # | Criterion | Status | Evidence/Notes |
|
||||
| --- | --- | --- | --- |
|
||||
| 1 | One h1 "The Best Movies According to Tirsvad", one h2, one hr | Pass | Read from the DOM in the browser pane: 1 h1, 1 h2 "My top 3 movies of all-time.", 1 hr. |
|
||||
| 2 | Three h3 in order 13 element, 5th element, Drive, each directly followed by a p | Pass | DOM read: the next sibling of each h3 is a P. The wording is S01's supplied HTML, unchanged. |
|
||||
| 3 | HTML5 with `lang`, `charset` and `viewport`, no external request | Pass | `<!DOCTYPE html>`, `lang="en"`, charset and viewport meta present; the resource list holds only `styles.css`. No W3C validator was run (no network tool for it). |
|
||||
| 4 | Every item of `tests/manual-checklist.md` marked pass, checked in the browser pane | Pass | Eight items run on 2026-10-24, including a 375 px wide viewport without sideways scroll. |
|
||||
| 5 | Reviewed against the assignment and the checklist | Pass | The assignment asks for h1, h2, hr and at least three h3 each with a p; all are present. |
|
||||
|
||||
## Overall Verdict
|
||||
|
||||
Go — all five criteria pass. This is a stand-in review, not an independent one, and S01 can challenge it in the final summary.
|
||||
|
||||
## Action Items
|
||||
|
||||
| Action | Owner | Due |
|
||||
| --- | --- | --- |
|
||||
| None | S01 | n/a |
|
||||
|
||||
---
|
||||
|
||||
[MIL-002]: ../../milestones/mil-002-movie-page.md
|
||||
[5fe4ef0]: https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking/commit/5fe4ef03673e70026a0667a2585f2d9decb6a2c2
|
||||
@@ -9,7 +9,8 @@
|
||||
## Version History
|
||||
| Date | Status | Author | Reviewer | Change | Commit |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| 2026-10-24 | Accepted | Jens Tirsvad Nielsen | AI as stand-in for S01 | Initial version | [e8d24b2] |
|
||||
| 2026-10-24 | Deprecated | Jens Tirsvad Nielsen | AI as stand-in for S01 | Initial version | [e8d24b2] |
|
||||
| 2026-10-24 | Accepted | Jens Tirsvad Nielsen | AI as stand-in for S01 | Added RC-006 for the MIL-002 deliverable | [5fe4ef0] |
|
||||
|
||||
---
|
||||
|
||||
@@ -27,7 +28,7 @@ updated whenever an artifact instance is created or reviewed.
|
||||
| [SA-001] | SA | en | it | [BC-001] | [PP-001] | [RC-002] |
|
||||
| [PP-001] | PP | en | it | [BC-001], [SA-001] | [MIL-001], [MIL-002], [MIL-003] | - |
|
||||
| [MIL-001] | MIL | en | it | [BC-001], [PP-001] | [MIL-002] | [RC-003] |
|
||||
| [MIL-002] | MIL | en | it | [BC-001], [PP-001] | [MIL-003] | [RC-004] |
|
||||
| [MIL-002] | MIL | en | it | [BC-001], [PP-001] | [MIL-003] | [RC-004], [RC-006] |
|
||||
| [MIL-003] | MIL | en | it | [BC-001], [PP-001] | - | [RC-005] |
|
||||
|
||||
## Coverage Notes
|
||||
@@ -47,4 +48,6 @@ No use case, domain model or design artifact exists: the project is too small fo
|
||||
[RC-003]: ./reviews/rc-003-mil-001-foundation.md
|
||||
[RC-004]: ./reviews/rc-004-mil-002-movie-page.md
|
||||
[RC-005]: ./reviews/rc-005-mil-003-documentation.md
|
||||
[RC-006]: ./reviews/rc-006-movie-page.md
|
||||
[e8d24b2]: https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking/commit/e8d24b2d32ce1ef8276123b0efa05b8a15e27d52
|
||||
[5fe4ef0]: https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking/commit/5fe4ef03673e70026a0667a2585f2d9decb6a2c2
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
[English](Development) · **Dansk** · [Bahasa Malaysia](Development-ms)
|
||||
|
||||
# Udvikling
|
||||
|
||||
## Mapper
|
||||
|
||||
| Mappe | Indhold |
|
||||
| --- | --- |
|
||||
| `src/` | `index.html` og `styles.css` |
|
||||
| `tests/` | Den manuelle tjekliste |
|
||||
| `docs/` | Business Case, interessentanalyse, projektplan, milepæle, gennemgangsnotater, billeder og denne wiki |
|
||||
| `framework/` | SQA- og QC-rammeværket (et git-submodul, som ikke redigeres her) |
|
||||
|
||||
## Sådan foregår arbejdet
|
||||
|
||||
Projektet har tre milepæle: Foundation, Movie page og Documentation. Hver milepæl har sin egen gren og pull request, og hver opgave er en issue. En milepæl udgives til issue-systemet af et workflow, når dens dokument er godkendt med en `Go`-gennemgang.
|
||||
|
||||
## Workflows
|
||||
|
||||
Workflows kommer fra `TirSystem/github-action` (version `v2.2.0`):
|
||||
|
||||
| Workflow | Hvornår | Hvad det gør |
|
||||
| --- | --- | --- |
|
||||
| English comments | Pull request | Kontrollerer, at tilføjede kommentarer er på engelsk |
|
||||
| Publish accepted milestones | Push til `main`, der ændrer milepæle eller gennemgange | Opretter milepæle og issues. Hemmelighed: `TOKEN_FOR_GITEA` |
|
||||
| Publish wiki | Push til `main`, der ændrer `docs/wiki/` | Kopierer disse sider til wikien. Hemmelighed: `TOKEN_FOR_GITEA_WIKI` |
|
||||
|
||||
Python- og shell-kvalitetskontrollerne er ikke installeret, fordi repositoryet ikke har sådanne filer.
|
||||
|
||||
## Wikien
|
||||
|
||||
Wikien findes på engelsk, dansk og bahasa malaysia. Engelsk er den gældende tekst; de andre sprog følger den side for side (`Page.md`, `Page-da.md`, `Page-ms.md`).
|
||||
@@ -0,0 +1,32 @@
|
||||
[English](Development) · [Dansk](Development-da) · **Bahasa Malaysia**
|
||||
|
||||
# Pembangunan
|
||||
|
||||
## Folder
|
||||
|
||||
| Folder | Kandungan |
|
||||
| --- | --- |
|
||||
| `src/` | `index.html` dan `styles.css` |
|
||||
| `tests/` | Senarai semak manual |
|
||||
| `docs/` | Kes Perniagaan, Analisis Pihak Berkepentingan, Pelan Projek, pencapaian, rekod semakan, imej dan wiki ini |
|
||||
| `framework/` | Rangka kerja SQA dan QC (submodul git, tidak diubah di sini) |
|
||||
|
||||
## Cara kerja dijalankan
|
||||
|
||||
Projek ini mempunyai tiga pencapaian: Foundation, Movie page dan Documentation. Setiap pencapaian mempunyai cabang dan pull request sendiri, dan setiap tugas ialah satu issue. Sesuatu pencapaian diterbitkan ke penjejak isu oleh satu workflow selepas dokumennya diterima dengan semakan `Go`.
|
||||
|
||||
## Workflow
|
||||
|
||||
Workflow datang daripada `TirSystem/github-action` (versi `v2.2.0`):
|
||||
|
||||
| Workflow | Bila | Fungsi |
|
||||
| --- | --- | --- |
|
||||
| English comments | Pull request | Menyemak bahawa komen yang ditambah dalam bahasa Inggeris |
|
||||
| Publish accepted milestones | Push ke `main` yang mengubah pencapaian atau semakan | Mencipta pencapaian dan issue. Rahsia: `TOKEN_FOR_GITEA` |
|
||||
| Publish wiki | Push ke `main` yang mengubah `docs/wiki/` | Menyalin halaman ini ke wiki. Rahsia: `TOKEN_FOR_GITEA_WIKI` |
|
||||
|
||||
Semakan kualiti Python dan shell tidak dipasang kerana repositori ini tiada fail sedemikian.
|
||||
|
||||
## Wiki
|
||||
|
||||
Wiki ini dalam bahasa Inggeris, Denmark dan Bahasa Malaysia. Bahasa Inggeris ialah teks utama; bahasa lain mengikutinya halaman demi halaman (`Page.md`, `Page-da.md`, `Page-ms.md`).
|
||||
@@ -0,0 +1,32 @@
|
||||
**English** · [Dansk](Development-da) · [Bahasa Malaysia](Development-ms)
|
||||
|
||||
# Development
|
||||
|
||||
## Folders
|
||||
|
||||
| Folder | Content |
|
||||
| --- | --- |
|
||||
| `src/` | `index.html` and `styles.css` |
|
||||
| `tests/` | The manual checklist |
|
||||
| `docs/` | Business Case, Stakeholder Analysis, Project Plan, milestones, review records, images and this wiki |
|
||||
| `framework/` | The SQA and QC framework (a git submodule, not edited here) |
|
||||
|
||||
## How the work is done
|
||||
|
||||
The project has three milestones: Foundation, Movie page and Documentation. Each milestone has its own branch and pull request, and each task is an issue. A milestone is published to the issue tracker by a workflow after its document is accepted with a `Go` review.
|
||||
|
||||
## Workflows
|
||||
|
||||
The workflows come from `TirSystem/github-action` (version `v2.2.0`):
|
||||
|
||||
| Workflow | When | What it does |
|
||||
| --- | --- | --- |
|
||||
| English comments | Pull request | Checks that added comments are English |
|
||||
| Publish accepted milestones | Push to `main` that changes milestones or reviews | Creates milestones and issues. Secret: `TOKEN_FOR_GITEA` |
|
||||
| Publish wiki | Push to `main` that changes `docs/wiki/` | Copies these pages to the wiki. Secret: `TOKEN_FOR_GITEA_WIKI` |
|
||||
|
||||
The Python and shell quality checks are not installed, because the repository has no such files.
|
||||
|
||||
## The wiki
|
||||
|
||||
The wiki is in English, Danish and Bahasa Malaysia. English is the authoritative text; the other languages follow it page by page (`Page.md`, `Page-da.md`, `Page-ms.md`).
|
||||
@@ -0,0 +1,31 @@
|
||||
[English](Getting-Started) · **Dansk** · [Bahasa Malaysia](Getting-Started-ms)
|
||||
|
||||
# Kom i gang
|
||||
|
||||
## Krav
|
||||
|
||||
En webbrowser. Der er intet byggetrin, ingen pakke og ingen server.
|
||||
|
||||
## Hent filerne
|
||||
|
||||
```bash
|
||||
git clone https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking.git
|
||||
cd 041-web-movie-ranking
|
||||
```
|
||||
|
||||
## Åbn siden
|
||||
|
||||
Dobbeltklik på `src/index.html`, eller kør en af disse kommandoer:
|
||||
|
||||
```bash
|
||||
# Windows
|
||||
start src/index.html
|
||||
# macOS
|
||||
open src/index.html
|
||||
# Linux
|
||||
xdg-open src/index.html
|
||||
```
|
||||
|
||||
Du skulle gerne se siden nedenfor.
|
||||
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
[English](Getting-Started) · [Dansk](Getting-Started-da) · **Bahasa Malaysia**
|
||||
|
||||
# Bermula
|
||||
|
||||
## Keperluan
|
||||
|
||||
Sebuah pelayar web. Tiada langkah binaan, tiada pakej dan tiada pelayan.
|
||||
|
||||
## Dapatkan fail
|
||||
|
||||
```bash
|
||||
git clone https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking.git
|
||||
cd 041-web-movie-ranking
|
||||
```
|
||||
|
||||
## Buka halaman
|
||||
|
||||
Klik dua kali `src/index.html`, atau jalankan salah satu arahan ini:
|
||||
|
||||
```bash
|
||||
# Windows
|
||||
start src/index.html
|
||||
# macOS
|
||||
open src/index.html
|
||||
# Linux
|
||||
xdg-open src/index.html
|
||||
```
|
||||
|
||||
Anda patut melihat halaman di bawah.
|
||||
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
**English** · [Dansk](Getting-Started-da) · [Bahasa Malaysia](Getting-Started-ms)
|
||||
|
||||
# Getting started
|
||||
|
||||
## Requirements
|
||||
|
||||
A web browser. There is no build step, no package and no server.
|
||||
|
||||
## Get the files
|
||||
|
||||
```bash
|
||||
git clone https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking.git
|
||||
cd 041-web-movie-ranking
|
||||
```
|
||||
|
||||
## Open the page
|
||||
|
||||
Double-click `src/index.html`, or run one of these commands:
|
||||
|
||||
```bash
|
||||
# Windows
|
||||
start src/index.html
|
||||
# macOS
|
||||
open src/index.html
|
||||
# Linux
|
||||
xdg-open src/index.html
|
||||
```
|
||||
|
||||
You should see the page below.
|
||||
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
[English](Home) · **Dansk** · [Bahasa Malaysia](Home-ms)
|
||||
|
||||
# Forside
|
||||
|
||||
En almindelig HTML-side, der rangerer mine 3 bedste film nogensinde. Det er min løsning på dag 41 i Udemys "100 Days of Code: The Complete Python Pro Bootcamp", projektet "The Favorite Movie Project".
|
||||
|
||||
|
||||
|
||||
Siden har en titel (`h1`), en undertitel (`h2`), en vandret streg (`hr`) og tre film, hver som en `h3` efterfulgt af en `p` med begrundelsen. Der er ingen kode at bygge, og intet skal installeres.
|
||||
|
||||
Sider:
|
||||
|
||||
- [Kom i gang](Getting-Started-da): åbn siden i en browser.
|
||||
- [Brug](Usage-da): hvad der står på siden, og hvordan du ændrer filmene.
|
||||
- [Udvikling](Development-da): mapper, kontroller, grene og workflows.
|
||||
|
||||
Repository: <https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking>
|
||||
@@ -0,0 +1,17 @@
|
||||
[English](Home) · [Dansk](Home-da) · **Bahasa Malaysia**
|
||||
|
||||
# Laman Utama
|
||||
|
||||
Satu halaman HTML biasa yang menyusun 3 filem terbaik saya sepanjang zaman. Ini penyelesaian saya untuk Hari 41 kursus Udemy "100 Days of Code: The Complete Python Pro Bootcamp", projek "The Favorite Movie Project".
|
||||
|
||||
|
||||
|
||||
Halaman ini mempunyai tajuk (`h1`), subtajuk (`h2`), garis mendatar (`hr`) dan tiga filem, setiap satu sebagai `h3` diikuti `p` yang memberi sebabnya. Tiada kod untuk dibina dan tiada apa yang perlu dipasang.
|
||||
|
||||
Halaman:
|
||||
|
||||
- [Bermula](Getting-Started-ms): buka halaman dalam pelayar web.
|
||||
- [Penggunaan](Usage-ms): apa yang ada pada halaman dan cara menukar filem.
|
||||
- [Pembangunan](Development-ms): folder, semakan, cabang dan workflow.
|
||||
|
||||
Repositori: <https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking>
|
||||
@@ -0,0 +1,17 @@
|
||||
**English** · [Dansk](Home-da) · [Bahasa Malaysia](Home-ms)
|
||||
|
||||
# Home
|
||||
|
||||
A plain HTML page that ranks my top 3 movies of all time. It is my solution to Day 41 of Udemy's "100 Days of Code: The Complete Python Pro Bootcamp", the project "The Favorite Movie Project".
|
||||
|
||||
|
||||
|
||||
The page has a title (`h1`), a subtitle (`h2`), a horizontal rule (`hr`), and three movies, each an `h3` followed by a `p` with the reason. There is no code to build and nothing to install.
|
||||
|
||||
Pages:
|
||||
|
||||
- [Getting started](Getting-Started): open the page in a browser.
|
||||
- [Usage](Usage): what is on the page and how to change the movies.
|
||||
- [Development](Development): folders, checks, branches and workflows.
|
||||
|
||||
Repository: <https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking>
|
||||
@@ -0,0 +1,30 @@
|
||||
[English](Usage) · **Dansk** · [Bahasa Malaysia](Usage-ms)
|
||||
|
||||
# Brug
|
||||
|
||||
## Hvad der står på siden
|
||||
|
||||
| Element | Tekst |
|
||||
| --- | --- |
|
||||
| `h1` | The Best Movies According to Tirsvad |
|
||||
| `h2` | My top 3 movies of all-time. |
|
||||
| `hr` | En vandret streg |
|
||||
| `h3` og `p` (tre gange) | 13 element, 5th element, Drive, hver med en kort begrundelse |
|
||||
|
||||
## Ændr filmene
|
||||
|
||||
Åbn `src/index.html` i en teksteditor og ret parrene af `h3` og `p`. Lad hver `p` stå lige efter sin `h3`:
|
||||
|
||||
```html
|
||||
<h1>The Best Movies According to Tirsvad</h1>
|
||||
<h2>My top 3 movies of all-time.</h2>
|
||||
<hr>
|
||||
<h3>13 element</h3>
|
||||
<p>This is my favourite anime. I love the beautiful images.</p>
|
||||
```
|
||||
|
||||
Gem filen og genindlæs browseren.
|
||||
|
||||
## Kontrollér siden
|
||||
|
||||
Gå `tests/manual-checklist.md` igennem: én `h1`, én `h2`, én `hr`, tre `h3` hver efterfulgt af en `p`, ingen eksterne forespørgsler og ingen sidelæns rulning i et smalt vindue.
|
||||
@@ -0,0 +1,30 @@
|
||||
[English](Usage) · [Dansk](Usage-da) · **Bahasa Malaysia**
|
||||
|
||||
# Penggunaan
|
||||
|
||||
## Apa yang ada pada halaman
|
||||
|
||||
| Elemen | Teks |
|
||||
| --- | --- |
|
||||
| `h1` | The Best Movies According to Tirsvad |
|
||||
| `h2` | My top 3 movies of all-time. |
|
||||
| `hr` | Garis mendatar |
|
||||
| `h3` dan `p` (tiga kali) | 13 element, 5th element, Drive, masing-masing dengan sebab yang ringkas |
|
||||
|
||||
## Tukar filem
|
||||
|
||||
Buka `src/index.html` dalam penyunting teks dan ubah pasangan `h3` dan `p`. Pastikan setiap `p` berada tepat selepas `h3`nya:
|
||||
|
||||
```html
|
||||
<h1>The Best Movies According to Tirsvad</h1>
|
||||
<h2>My top 3 movies of all-time.</h2>
|
||||
<hr>
|
||||
<h3>13 element</h3>
|
||||
<p>This is my favourite anime. I love the beautiful images.</p>
|
||||
```
|
||||
|
||||
Simpan fail dan muat semula pelayar web.
|
||||
|
||||
## Semak halaman
|
||||
|
||||
Ikut senarai semak `tests/manual-checklist.md`: satu `h1`, satu `h2`, satu `hr`, tiga `h3` yang masing-masing diikuti `p`, tiada permintaan luaran dan tiada tatal ke sisi dalam tetingkap sempit.
|
||||
@@ -0,0 +1,30 @@
|
||||
**English** · [Dansk](Usage-da) · [Bahasa Malaysia](Usage-ms)
|
||||
|
||||
# Usage
|
||||
|
||||
## What is on the page
|
||||
|
||||
| Element | Text |
|
||||
| --- | --- |
|
||||
| `h1` | The Best Movies According to Tirsvad |
|
||||
| `h2` | My top 3 movies of all-time. |
|
||||
| `hr` | A horizontal rule |
|
||||
| `h3` and `p` (three times) | 13 element, 5th element, Drive, each with a short reason |
|
||||
|
||||
## Change the movies
|
||||
|
||||
Open `src/index.html` in a text editor and edit the `h3` and `p` pairs. Keep each `p` directly after its `h3`:
|
||||
|
||||
```html
|
||||
<h1>The Best Movies According to Tirsvad</h1>
|
||||
<h2>My top 3 movies of all-time.</h2>
|
||||
<hr>
|
||||
<h3>13 element</h3>
|
||||
<p>This is my favourite anime. I love the beautiful images.</p>
|
||||
```
|
||||
|
||||
Save the file and reload the browser.
|
||||
|
||||
## Check the page
|
||||
|
||||
Go through `tests/manual-checklist.md`: one `h1`, one `h2`, one `hr`, three `h3` each followed by a `p`, no external request, and no sideways scroll in a narrow window.
|
||||
@@ -0,0 +1 @@
|
||||
[Repository](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/041-web-movie-ranking) · AGPL-3.0
|
||||
@@ -0,0 +1,20 @@
|
||||
**English**
|
||||
|
||||
- [Home](Home)
|
||||
- [Getting started](Getting-Started)
|
||||
- [Usage](Usage)
|
||||
- [Development](Development)
|
||||
|
||||
**Dansk**
|
||||
|
||||
- [Forside](Home-da)
|
||||
- [Kom i gang](Getting-Started-da)
|
||||
- [Brug](Usage-da)
|
||||
- [Udvikling](Development-da)
|
||||
|
||||
**Bahasa Malaysia**
|
||||
|
||||
- [Laman Utama](Home-ms)
|
||||
- [Bermula](Getting-Started-ms)
|
||||
- [Penggunaan](Usage-ms)
|
||||
- [Pembangunan](Development-ms)
|
||||
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>The Best Movies According to Tirsvad</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>The Best Movies According to Tirsvad</h1>
|
||||
<h2>My top 3 movies of all-time.</h2>
|
||||
<hr>
|
||||
<h3>13 element</h3>
|
||||
<p>This is my favourite anime. I love the beautiful images.</p>
|
||||
<h3>5th element</h3>
|
||||
<p>Really cool sci-fi movie.</p>
|
||||
<h3>Drive</h3>
|
||||
<p>Super beautiful film. Really artistic.</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
/* Readable typography for the Favorite Movie page. No external requests. */
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
# Manual test checklist: Favorite Movie page
|
||||
|
||||
Open `src/index.html` in a browser (see the README). Mark each item `Pass` or
|
||||
`Fail` and note the date and browser.
|
||||
|
||||
Last run: 2026-10-24, built-in browser pane (Chromium), page served from a throwaway local static server so that `styles.css` loads (the pane shows `file://` pages as a static snapshot without the stylesheet). Items 1 to 5 and 8 were read from the DOM; item 6 from the resource list; item 7 at a 375 px wide viewport (scroll width equals client width).
|
||||
|
||||
| # | Check | Expected | Result |
|
||||
| --- | --- | --- | --- |
|
||||
| 1 | Exactly one `h1` | Text is "The Best Movies According to Tirsvad" | Pass |
|
||||
| 2 | Exactly one `h2` | Text is "My top 3 movies of all-time." | Pass |
|
||||
| 3 | Exactly one `hr` | A horizontal rule sits between the subtitle and the movies | Pass |
|
||||
| 4 | Three `h3` in order | 13 element, 5th element, Drive | Pass |
|
||||
| 5 | Each `h3` is directly followed by a `p` | Three paragraphs with the reasons | Pass |
|
||||
| 6 | No external request | The network log shows only `index.html` and `styles.css` | Pass |
|
||||
| 7 | Narrow window (375 px wide) | Text wraps and nothing scrolls sideways | Pass |
|
||||
| 8 | Page title | The tab shows "The Best Movies According to Tirsvad" | Pass |
|
||||
Reference in New Issue
Block a user