DEV Community

0 seconds of 7 minutes, 51 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
07:51
 
Brix Mavu
Brix Mavu

Posted on

4 3

Day 2

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

  1. anchor tag inside Login form add onclick="next()"

You don't have an account yet? Register Here

  1. anchor tag inside Registration form add onclick="next()"

You have an account already? Login Here

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more