Manipulate the DOM with Vanilla Javascript

Hey There! This Repo is a follow-up to Awixor‘s 1337-HtML-CSS-workshop. Please make sure to check that out first and then come back to this one. Enjoy!

Table of contents

Pre-requisites

– Check out Awixor‘s 1337-HtML-CSS-workshop.

HTML basics

CSS basics

JavaScript basics

Your Job

Starting from the ChadsList directory, you will find a pre-coded static page of a table of Chad, and a form to add one to the list. Your job is to make that form work, using vanilla Javascript. Add yourself (if you’re a chad) and some other chads you know. Here is an example of how it should be :

Demo of ChadsList

⚠️ NOTE ⚠️

You should not touch any of the HTML or CSS. You’re only allowed to edit the script.js file.

Bonus

If your JS code does what its supposed to do perfectly, why not add some bonus stuff to it?

Improve your project by adding form validation. Check that the input values should not be either empty, contain special characters, should not be already in the Chad list… etc.

⚠️ Another NOTE ⚠️

In the bonus part, you’re allowed to add your own css. Be creative !

Make it work

In order to see your changes directly in the browser without refreshing the page, after installing the Live server extention, you will need to navigate to the index.html file the click the Go live button at the bottom of VS Code, same as what is shown in the extention page here.

Resources

Good luck, and happy coding!

GitHub

View Github