Javascript Project to Remove Extra Spaces From Paragraph String in Browser Using HTML5 & CSS3 Full Project For Beginners

 

 

index.html

 

 

 

<div class="main-project-wrapper">
    <div class="page-wrapper">
        <h2> Check and Remove extra spaces</h2>
        <div class="project-13-wrapper">
            <div class="letter-count-box-wrapper">
                <textarea id="input-text" placeholder="Type to check and remove extra spaces" ></textarea>
            </div>
        </div>
        <div class="project-result" id="project-17-result"> Result will display here </div>
        <div class="btn">
            <button class="count-btns" id="btn-action"> Check and Remove Extra Spaces</button>

            <button id="reset"> Reset </button>
        </div>
    </div>
</div>

 

 

 

style.css

 

 

.page-wrapper{
  background-color: darkslategrey;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  align-items: center;
}

.page-wrapper >h2{
  padding: 10px 35px;
  margin-bottom: 10px;
  border: 1px solid rgb(5, 224, 253);
  text-align: center;
  color: rgb(192, 231, 243);
  font-family: Arial, Helvetica, sans-serif;
}

.project-13-wrapper{
  height: auto;
  background-color: rgb(3, 130, 180);
  display: flex;
  justify-content: center;
  box-shadow: 0px 0px 5px 5px rgb(247, 246, 246);
  margin-bottom: 15px;
  width: 100%;
 }

.letter-count-box-wrapper{
  border: 1px solid rgb(87, 167, 233);
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  width: 100%;
}

.letter-count-box-wrapper >textarea{
  height:200px;
  width: 100%;
  background-color: rgb(208, 238, 235);
  border: none;
  font-size: 25px;
  font-family: Arial, Helvetica, sans-serif;
  margin-left: 2px;
  padding: 0px 10px;
  color: black;
}

.count-btns{
  padding: 10px;
  width: auto;
  background-color: rgb(85, 53, 2);
  font-size: 18px;
  cursor: pointer;
  margin-top: 10px;
  margin-right: 5px;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 10px;
  border: 2px solid rgb(1, 250, 237);
  color: white;
  outline: none;
}

.count-btns:hover{
  background-color: rgb(133, 70, 42);
}

.project-result{
  font-size: 25px;
  background-color: white;
  padding: 5px 10px;
  border-radius: 5px;
  border: 2px solid black;
}

#reset{
  padding: 10px;
  width: 100px;
  background-color: rgb(243, 243, 161);
  font-size: 18px;
  cursor: pointer;
  margin-bottom: 20px;
  margin-top: 15px;
  margin-right: 15px;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 10px;
  border: 2px solid rgb(74, 180, 3);
  outline: none;
}

#h-q-copyright{
  margin: 10px;
  color: green;
  text-align: center;
}

.yvana{
  color: blue;
}

 

See also  Javascript Tutorial to Remove Specific Element From an Array Using indexOf() and splice() Method

 

script.js

 

 

// Declaring variables for each IDS
var btnAction = document.getElementById("btn-action");
var reset = document.getElementById("reset");
var resultPlaceHolder = document.getElementById("project-17-result");

// Function to take input from Text Box.
    function inputword(){
        var word = document.getElementById("input-text").value;
        return word;
    }

// defining error message.
    function errormessage(){
        resultPlaceHolder.innerHTML = "<span style='color:red;'> Please type or paste something </span>";
    }


// Reseting the progrm
    reset.addEventListener("click", function(){
        result = "Result will display here";
        document.getElementById("input-text").value = "";
        resultPlaceHolder.innerHTML = result;
    });

// Main function to check and replace
function removeExtraSpaces(string){
   
   var newString = string.replace(/\s+/g,' ').trim();  
   // /\s+/g will find the contiguous white spaces and will be replaces by ' ' single space.
   // trim will remove spaces before and after the sentences.
   return newString;
}

    btnAction.addEventListener("click", function() {
        if(inputword()){
          resultPlaceHolder.innerHTML = removeExtraSpaces(inputword());
        }else{
            errormessage();
        }
    });

 

 

See also  Bootstrap 4 Date Range Picker Component Example to Select Dates From Calendar in Browser Using Javascript Full Project For Beginners

Leave a Reply