This a starter template that uses HTML, CSS and JavaScript to manipulate and render data from a JSON file of data.
Assets holds the data.json file. This is also a place where we can add images or other static assets.
"css" holds stylesheets. The normalize stylesheet aims to make styling consistent across browsers, and the main.css file is where we can write custom styles for our webpage. You are welcome to add more css files or any other css tools of your preference. The provided stylesheets are already imported into the index.html file.
"js" contains a main.js file. This script is imported into the index.html file. A basic script is implemented that tells the browser to fetch and render JSON data when the user clicks the button.
The index.html file is the starting point. More pages can always be added.
You can access the project on Codepen.io as a template. You will need a Codepen account! Once you've signed into your account, click this link, and from the bottom right corner choose fork! Otherwise, continue reading...
Before you can install, use this project and add extra functionalities to it, you need to have the following prerequisites and software installed on your computer:
Once you have all of these prerequisites, you're ready to move on to the installation steps.
To install and being able to use this frontend project, you need to fork this repository to your own GitHub account and then clone your forked repository to your local machine.
Go to the repository page on GitHub: https://github.com/shesharpnl/hackathon-2023.vanilla-js.base-example.
Click the "Fork" button in the top right corner of the repository page. This will create a copy of the repository in your own GitHub account.
Once you have forked the repository, navigate to the forked repository on your GitHub account: https://github.com/YOUR_USERNAME/hackathon-2023.vanilla-js.base-example. Replace YOUR_USERNAME
with your GitHub username.
Click the "Code" button and copy the HTTPS or SSH link to the repository.
Open your terminal and navigate to the directory where you want to store the project. For example: cd ~/projects
.
Type git clone
followed by the repository link you copied earlier, then press Enter (remember to replace YOUR_USERNAME
with your GitHub username):
git clone https://github.com/YOUR_USERNAME/hackathon-2023.vanilla-js.base-example.git
For this project, we recommend a live server extenstion for your code editor. VS Code Live Server
To enable GitHub Pages and be able to see your project deployed, you can follow these steps:
You can now access the website at this URL:
https://YOUR_USERNAME.github.io/hackathon-2023.vanilla-js.base-example/
This is how the boilerplate will look rendered in the browser:
This boilerplate can be used to build a website, experiment with styling, or to build confidence with JavaScript and DOM manipulation.
To verify that the project works, you can follow these steps:
If you encounter any issues, you can try the following steps to troubleshoot:
In the 'main.js' file on line 7 the log() method is called on the console. The console is a part of the browser. In this case, we ask that the console logs the 'data' from the JSON. This is a useful tool to test the results of our JavaScript code. You can access the console by right-clicking your browser window and choosing inspect then, console from the top right area:
By console logging we can see some output of our code, as well as any error messages the browser sends us when it attempts to execute the code.
Our custom styles can be declared in the 'main.css' file within the css folder. Some simple classes are defined that allow our button to have a bit of flare and the entire body to have some style. You can experiment with styling whole elements (such as the body selector) or create custom classes (such as the .btn class).
If you'd like to see your webpage live, you can easily deploy with GitHub pages. Simply go to your forked repository on your github account and choose settings. On the left sidebar navigation then choose "Pages." Choose the branch to deploy from - usually main - and select save. This process can take a minute or two, so feel free to take a stretch break and refresh the page when you're back.
Nice. There's just one more small change we need to make in our script.js file to get everything up and running on our live github site.
Head to your repository in the browser. Open the assets folder, choose the json file and click on "raw" from the toolbar at the top of the file preview. You should see something like this:
In the address bar of your browser copy the whole raw.githubuser url. Replace the fetch url with the url you copied. The fetch url is the highlighted text in this image:
Before starting, please read our Contributing Guide for detailed information and instructions on contributing to this repository.
The job data has been retrieved using SourceStack.
This project is licensed under the MIT License - see the LICENSE file for details.