JSFiddle - React, Tailwind, and code Playground

by aburkowsky9

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Mock Browser</title>
  </head>
  <body>
    <section id='header'>
      <button class="back-button">back</button>
      <button class="forward-button">forward</button>
      <input class="search-bar" type="text"/>
      <button class="go">Go</button>
    </section>
    <section class="container">
      <div class="back-urls">
      <h4>Back-Urls Stack</h4>
      <div class="back"></div>
      </div>
      <div class="current-page">
        <h4>Current Page</h4>
      </div>
      <div class="forward-urls">
        <h4>Forward-Urls Stack</h4>
        <div class="forward"></div>
      </div>
    </section>
  </body>
</html>

CSS

.container{
  display:flex;
  border: 1px solid black;
  width: 80%;
  height: 350px;
  margin-top: 20px;
}

.back-urls, .current-page, .forward-urls {
  border: 1px solid black;
  width: 33.33%;
  height: 350px;
  text-align: center;
}

p {
  margin: 5px
}

JavaScript

$(document).ready(function() {
  $('.go').on('click', function(event) {
    let searchInput = $('.search-bar').val();
    let $currentPagePara = $('.current-page p');
    let currentPage = $('.current-page p').text();
  	let $input = $('<p></p>').text(searchInput);
   
		if (currentPage) {
    	$currentPagePara.prependTo('.back');
      $('.current-page').append($input);
    } else {
    	$('.current-page').append($input);
    }
	});
 
 $('.back-button').on('click', function(event) {
 		let searchInput = $('.search-bar').val();
    let $currentPagePara = $('.current-page p');
  	let $input = $('<p></p>').text(searchInput);
    let $firstBack = $('.back p').first();
   
   	if ($firstBack.text()) {
   		$currentPagePara.prependTo('.forward');
      $firstBack.appendTo('.current-page');
   	}
 });
 
 $('.forward-button').on('click', function(event) {
 		let searchInput = $('.search-bar').val();
    let $currentPagePara = $('.current-page p');
  	let $input = $('<p></p>').text(searchInput);
    let $firstForward = $('.forward p').first();
   
   	if ($firstForward.text()) {
   		$currentPagePara.prependTo('.back');
      $firstForward.appendTo('.current-page');
   	}
 });
});