I will use Scrimba please check out the platform if you want to learn programing interactively.
Biggest reason of using scrimba is it make playing with code easy.
Check the banner to see coding in action
Day 2 code on Scrimba Code
The Plan
Copy code from day 1
Make login and registration toggle using js
Link *.js page to the index.html file
<script src="./*.js"></script>
Inside *.js file create two functions next() and prev()
The idea is to toggle between login interface and registration interface
By default we see login interface when click event is clicked we see registration interface
Just changing CSS propeties via JavaScript
Currently in style.css
#registration{ display: none }
JavaScript will dynamically add css style to #login and #registration
#login{ display: none } #registration{ display: block }
The inverse happens when click event is clicked again
JavaScript code to achieve that
function next() { document.getElementById('login').style.display = "none"; document.getElementById('registration').style.display = "block"; } function prev() { document.getElementById('registration').style.display = "none"; document.getElementById('login').style.display = "block"; }
In index.html we setup for the click event on the event on a new user
- anchor tag inside Login form add
onclick="next()"
You don't have an account yet? Register Here
- anchor tag inside Registration form add
onclick="next()"
Top comments (0)