Skip to content

olassia/IT115-G1-A5

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 

Repository files navigation

IT115-G1-A5

QR Code App build tutorial

Team Members:

Nicholas Jimenez - [Team Lead]
Byron Shepard - [Tutorial]
Jeremy Bittner - [Tutorial]
Evan [Coding App]
Mich Iwata - [Coding App]
Morgan Bligh - [Research/Tutorial]

Resources:

Project Website https://mc3waller.github.io/IT115-A5-Group1-Webpage/public/index.html
QR Code app tutorial https://www.youtube.com/watch?v=AxjH-fd2SxM
How to hello world https://docs.google.com/document/d/1eaw0VFVrWigKKsECKV-mQdEMxzpKIdLrC8vYbHAzTj0/edit
Project layout guideline https://docs.google.com/document/d/1M-0SaWCetzl-NpAhEpTOEdIRFMzGI6R0pnU0CbECw_8/edit

QR Code Generator

Within this guide are the steps required to create your own QR Code Generator. A QR, or “quick response” code, is capable of storing significant amounts of data for its size and a QR Code Generator is a simple application that takes a user’s text input and generates a corresponding QR Code.

Requirements

A computer with any operating system ( OSX, Windows, etc.) A Text Editor for coding, such as Notepad++, Visual Studio Code A Basic understanding of HTML, CSS, and Javascript

Getting Started

Open your preferred Text editor, go to the top left and select “File” under File select “New File”. A new file will be created but before saving it, create a new folder to contain all files pertaining to this project, name it “QR Project”.

Below is an image of what you should write into the new file, when you have copied the code in the image save the new file as “index.html” into your “QR Project” folder. Install the “Browser Preview” extension to view build as you proceed. *Notice line 9 - “defer” attribute will prevent the DOMCcontentLoaded event from firing until the script has loaded and finished evaluating.

Screen Shot 2020-12-03 at 4 10 31 PM

Next create a new file and save as “style.css” this will stylize your application. Reproduce the code in the two images below into the file.

Screen Shot 2020-12-04 at 2 11 49 PM

Screen Shot 2020-12-04 at 2 12 15 PM

After that create another file and name it “script.js” this will utilize Javascript to perform the user requested interaction. Reproduce the code in the image below into the file.

Screen Shot 2020-12-04 at 2 12 30 PM

HitCount

About

Web app code repo

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •