This is a web application designed to run on your phone. With this app, you may add new contacts to a contact list, then call them from the application itself by selecting the name of the contact in the list. Try it for yourself!
This public repository was built to teach the basic fundamentals of using HTML, CSS, and JavaScript to create an interactive web application.
The easiest method is to simply download the files to your computer.
- Click on the code download button on this repo and select Download ZIP.
- Save the ZIP package to the desktop of your computer.
- Once downloaded, extract the files to your desktop. This should create a new folder called
contact-list-main, but you can rename it to whatever you like.
It's lovely to play with the code on your own machine. But let's say you'd like to share your code updates. What then?
Forking a repository creates a copy of the repo within your personal GitHub account. This allows you to take advantage of revision history, code collaboration, and the many other benefits of using git. You may also make a request to the original repo owner to add updates from your copy of the repo.
So...
- If you have not already done so, create an account on GitHub. It's free!
- After creating an account, come back to this repo and click the "Fork" button at the top-right corner (just beneath the navigation bar).
- GitHub will make a copy of the repo, then re-direct you to your fork of
contact-list. - Next, clone the code in order to access it on your local machine.
When working with git, you'll want to get comfortable using a terminal program such as zsh for Mac or PowerShell for Windows. This will allow you to run the commands necessary to complete the above steps.
Git itself is a software that you'll need to download and install in order to perform git commands within the terminal. Once git is installed, you will also want to set up authentication for GitHub in order to interact with your GitHub account from the terminal.
(Looking for help with this? Sloth led us through an intoduction to git in a previous workshop; the video of his presentation is available on Facebook.)
Well, you'll want to install a nifty programming application such as Visual Studio Code.
- Download VS Code.
- Once installed, open the software. Go to View > Extensions.
- In the extensions search bar, type "Live Server". Select the Live Server extension by Ritwick Day in the results (it should be the top result).
- Click on the Install button. Once installed, close VS Code and open it again.
- Go to File > Open Folder (Windows) or File > Open (Mac) and select the folder containing the project files.
- Once loaded, at the very bottom-right of the VS Code window you should see an option that says "Go Live". Click on this; a new tab should appear in your browser with the application running.
- If you make changes to any of the project files, select File > Save. The application should automatically reload within the browser, allowing you to access your changes immediately.
We got your back! Sloth discussed the basic concepts of JavaScript and walked through the initial code at GRWebDev in March of 2021. You can check out the video of his presentation on Facebook. We will continue to work on the code throughout a number of events sponsored by GRWebDev and SlothWerks.
Well, you should work with us to make updates to it! Join Sloth and fellow creatives in West Michigan as we work together to add features and improve the application. You can check out the latest "Code with Sloth" workshops on GRWebDev's Meetup page. A public Trello board is available with future topics and planned updates to the app; you can also check out the existing version history in the repo wiki. Join us on the SlothWerks Slack workgroup for community discussions in the #contact-list-dev channel!
| Name | GitHub | |
|---|---|---|
| Sloth I | slothwerks-studio | www.linkedin.com/in/slothwerks/ |
| Mark Haines | hainesma | www.linkedin.com/in/hainesma/ |
| Kate Datema | KateDatema | www.linkedin.com/in/kate-katelyn-datema-04583772/ |
It's called markdown, y'all. Check out Adam Pritchard's markdown cheatsheet; it's awesome!