This repository utilizes HTML, CSS, and vanilla JavaScript to create what an interactive website may appear or behave like across browser and mobile views. Using API calls, a product page loads, and pages adjust depending on size of screen. Other pages include a temperature converter for vacationers, a sale countdown page, and a contact form.
Unofficial features --
-
Responsive Design {Best Practice} [All Pages]
-
Integrate a third-party API into project. {REQ}
-
Utilized Session and Local Storage for name and email fields on the contact form
-
Convert user input between two formats and display the result. (e.g. Fahrenheit to Celcius, kilograms to pounds, etc) {Intermediate} [Home]
-
Calculate and display data based on an external factor (ex: get the current date, and display how many days remaining until some event) {Intermediate} [Promo]
-
Retrieve data from a third-party API and use it to display something within your app. {Easy} [https://fakestoreapi.com/] [Products]
-
Create a node.js web server using a modern framework such as Express.js or Fastify. Serve at least one route that your app uses (must serve more than just the index.html file). {OPTIONAL - ATTEMPTED} {Easy/Intermediate} (Original attempt: https://github.com/JodieMullins/CY-WebDev)
Special feature attempted: Mock API
Click the link from the 'About' section on the right-hand side of this repo.
OR check it out in VSCode:
*** You will likely have a better experience in FireFox if you choose to open this in VSCode, but this method will open via user's default browser ***
-
Clone to local machine from GitHub
- HOW TO CLONE: Determine your desired file path and open Git Bash within the directory of choice. Type 'git clone [git URL]' and open the project folder in VSCode.
-
Open project in Visual Studio Code
- ensure VSCode Extension 'Live Preview' from Microsoft is installed
-
Open terminal window. Type 'npm install'
- ensure Node.js is installed on the local machine
-
Right-click within the 'index.html' file and choose 'Show Preview' to view / click on web pages.
- also an option to view from browser in the hamburger menu available through the Live Preview window or by copy/pasting Live Preview window URL into a browser window
A huge thanks to all the mentors with Code:You that helped and have contributed to make this project possible from the January 2024 cohort. This project has been re-created a few times with various feature lists attempted, but it has been an indespensible learning experience. Thank you, Code:You mentors. <3