Language switcher

JavaScript
Medium

Objective

Implement a feature to switch the language of a webpage

Requirements

  1. The webpage should support at least two languages

  2. All visible text content on the page, including headings and menus, should be translatable

  3. The user should be able to select the language via a dropdown or toggle button

  4. When selected, the new webpage should load the new language without loading the page

  5. You can build using any UI frameworks, but should implement the language feature from scratch

Starting code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Cliché</title> <!-- Bootstrap CSS --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Bootstrap Bonanza</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <header class="jumbotron jumbotron-fluid text-center bg-primary text-white"> <div class="container"> <h1 class="display-4">Welcome to Every Bootstrap Site Ever!</h1> <p class="lead">Where everything looks the same, but slightly different.</p> </div> </header> <div class="container"> <section class="my-5"> <h2 class="text-center">Amazing Features</h2> <div class="row"> <div class="col-md-4 text-center"> <i class="fas fa-rocket fa-3x"></i> <h3>Generic Feature</h3> <p>Because every site needs a section talking about features that are actually quite standard.</p> </div> <div class="col-md-4 text-center"> <i class="fas fa-sync-alt fa-3x"></i> <h3>Overused Icons</h3> <p>Look, we have icons! They spin, they're colorful, and they add absolutely nothing to the user experience!</p> </div> <div class="col-md-4 text-center"> <i class="fas fa-heart fa-3x"></i> <h3>Bootstrap Love</h3> <p>Because why bother with originality when you can use Bootstrap and be like everyone else?</p> </div> </div> </section> <section class="my-5"> <h2 class="text-center">Our Portfolio</h2> <div class="card-deck"> <div class="card"> <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Project 1</h5> <p class="card-text">This is the first project. It's groundbreaking, just like all the other first projects.</p> </div> </div> <div class="card"> <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Project 2</h5> <p class="card-text">Project 2 is even better than Project 1. Or is it? They both look the same.</p> </div> </div> <div class="card"> <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Project 3</h5> <p class="card-text">By now, you've realized all these projects are just placeholders. But they look professional, right?</p> </div> </div> </div> </section> </div> </body> </html>