Build date : 6th April 2024
Author : Keith Owino
This document was created with Javascript
Here i implement a mini web app that demonstrates my understanding of the three pillars of JavaScript:-
- Handling Events
- Manipulating the DOM
- Communicating with the Server.
I will be building out an application that allows a user to purchase movie tickets from the theater.
As a user, i would like to be able to:-
-
See the first movie's details, including its poster, title, runtime, showtime, and available tickets when the page loads.
function codeBlock(){ // endpoint. const endpointA = "http://localhost:3000/films/1"; // interaction. const filmTitle = document.getElementById("title"); /* SOME MORE CODE HERE... */ // fetch return fetch(endpointA) .then(res => res.json()) .then((data) => { filmTitle.textContent = data.title; /* SOME MORE CODE HERE... */ }) /* SOME MORE CODE HERE... */ };
-
See a menu of all movies on the left side of the page:
function movieMenu(){ const endpointB = "http://localhost:3000/films"; const folder = document.getElementById("films") return fetch(endpointB) .then(res => res.json()) .then((data) => { let pickTitles = (value) => { let li = document.createElement("li"); li.classList.add("film", "item"); li.textContent = value.title; folder.appendChild(li); }; data.forEach(pickTitles); }) /* SOME MORE CODE HERE... */ };
-
Buy a ticket for a movie. After clicking the "Buy Ticket" button, I should see the number of available tickets decreasing on the frontend. I should not be able to buy a ticket if the showing is sold out.
-
Delete a film from the server.
-
When a movie is sold out (when there are no available tickets remaining), indicate that the movie is sold out by changing the button text to "Sold Out".
Love this project? Buy me a coffee...
Want to contribute? Great!
To fix a bug or enhance an existing module, follow these steps:
-
Fork the repository
https://github.com/keithowino/sa-03-w03-code-challenge/fork
-
Create a new branch
git checkout -b improve-feature
-
Make the appropriate changes in the files
-
Add changes to reflect the changes made
-
Commit your changes
git commit -am 'Improve feature'
-
Push to the branch
git push origin improve-feature
-
Create a Pull Request
-
To clone this repository to your machine do this in the root directory of where you would like to save the project. Before using this be sure which url link you should use, is it for HTTP or shh.
git clone https://github.com/keithowino/sa-03-w03-code-challenge.git
-
Open the repository.
cd sa-03-w03-code-challenge
- Steady Network.
- Web-link
- Github account.
- If you find a bug that gave undesired results, kindly open an issue here.
- Email - [email protected]
The content of this site is licensed under the MIT license Copyright (c) 2024.